4.23、表单
用于采集用户输入数据 发送服务器 实现用户和服务器之间数据交互
一个完整表单包含:表单域、表单元素--表单控件、提示信息--文本
4.23.1、表单标签--form 块级元素
用于声明表单,定义数据采集范围
一个页面中可以有多个form标签,多个form标签为并列关系,不能嵌套
用户向服务器提交数据时,一次只能提交一个表单中的数据;如果需要提交多个表单,可以使用JavaScript的异步交互方式实现
method属性 提交表单时所用的http方法,默认get
get方式:将数据作为URL地址一部分发送给服务器;请求数据可以被缓存,能够保留在浏览器的历史记录中,能作为书签被收藏;有长度限制;安全性较低
post方式:将数据隐藏在HTTP数据流中传输;请求数据不会被魂村,不能保留在浏览器的历史记录中,不能作为书签被收藏;对数据长度没有限制;安全性比get方式高
4.23.2、表单控件
行块级元素
type属性:设置不同控件类型
name属性:表单字段名;如果不设置name属性,输入框的内容无法随表单一起提交
单行文本输入框
密码框
单选按钮
name属性:可以实现单选按钮的互斥
value属性:必不可少,表示选项代表的值
性别:
复选框
value属性:必不可少,表示选项代表的值
checked属性:用于单选按钮和复选框的默认选中,可以直接在input标签中写checked或checked="checked"
提交按钮
value属性:修改按钮上的文字
重置按钮
value属性:修改按钮上的文字
普通按钮
value属性:修改按钮上的文字
上传文件
不能设置value属性
图片形式按钮
input的类型为image时,必须设置src属性和alt属性
隐藏域
对用户不可见,目的是收集或发送信息到服务器
4.23.3、button标签
默认为submit
4.23.4、select下拉列表 行块级元素
value属性:选项代表的值
selected属性,用于下拉列表的默认选中,属性写在option标签,直接写selected或selected="selected"
4.23.5、多行文本域
cols属性:宽度
rows属性:行数,一半不用,用宽高实现尺寸
textarea{
resize:none; /* 禁止用户手动调整多行文本域的大小 */
}
4.23.6、label标签
用来扩大点击范围,一般用于单选、复选按钮中
4.23.7、表单属性
disabled属性:禁用input元素,被禁用的元素不可用,不可点击,不会提交
readonly属性:只读,不能修改,可以被提交
size属性:控件的长度,
maxlength属性:允许输入的最多字符数
checked属性:单选按钮和复选框的默认选中
selected属性:下拉列表的默认选中