Day14-HTML form 表单
2016-06-14 00:00
134 查看
摘要: 网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
action :数据被传送的地方,比如save.php
name : 为文本框命名,以备后台程序ASP 、PHP使用。
value : 为文本输入框设置默认值。(一般起到提示作用)
效果如下:
效果如下:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。
效果如下:
 
3ff0
; 属性:multiple="multiple" 可多选 按住 Ctr + 单击
<option> 选项:
属性:value 向服务器提交的值 selected="selected" 即默认选项
效果图:
value:按钮上显示的文字
type:只有当type值设置为reset时,按钮才有重置作用
value:按钮上显示的文字
1、语法:
所有表单控件(文本框,文本域,按钮,单选框,复选框等)都必须放在<form></form>标签中,否则用户输入的信息提交不到服务器!1. form属性
method :数据传输方式:POST GET 等action :数据被传送的地方,比如save.php
2. input属性
type : text:文本框 password:密码框 raido:单选按钮 checkbox:复选框 file:文件选择框 submit:提交按钮name : 为文本框命名,以备后台程序ASP 、PHP使用。
value : 为文本输入框设置默认值。(一般起到提示作用)
[code=plain]<form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" id="username" value="" /> <label for="pass">密码:</label> <input type="password" name="pass" id="pass" value="" /> <input type="submit" value="确定" name="submit" /> <input type="reset" value="重置" name="reset" /> </form>
效果如下:
2、文本域
rows 行数 cols 列数[code=language-html]<textarea rows="12" cols="50"> 请输入您的建议! </textarea>
效果如下:
3、复选框 单选框
1、type:当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
[code=language-html]<form method="post" action="save.php"> <!--复选框--> <label>性别:</label> <label>男</label> <input type="radio" name="gender" value="1"> <label>女</label> <input type="radio" name="gender" value="2"> </form>
注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。
效果如下:
4、下拉框
<select> 创建下拉框 
3ff0
; 属性:multiple="multiple" 可多选 按住 Ctr + 单击
<option> 选项:
属性:value 向服务器提交的值 selected="selected" 即默认选项
[code=language-html]<form method="post" action="save.php"> <!--下拉列表框--> <label>爱好:</label> <select> <option value="buy">购物</option> <option value="book">读书</option> <option value="music" selected="selected">音乐</option> <option value="play">旅游</option> </select> </form>
效果图:
5、提交按钮 提交数据
type:只有当type值设置为submit时,按钮才有提交作用value:按钮上显示的文字
[code=language-html]<input type="submit" value="确定" name="submit" />
6、重置按钮
当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。type:只有当type值设置为reset时,按钮才有重置作用
value:按钮上显示的文字
[code=language-html]<input type="reset" value="重置">
相关文章推荐
- 5个常见可用性错误和解决方案
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 在线用表单建立文件夹
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Jquery 表单取值赋值的一些基本操作
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具
- JavaScript与HTML结合的基本使用方法整理
- Ruby编写HTML脚本替换小程序的实例分享
- C#实现windows form拷贝内容到剪贴板的方法