表单类标签
操作者用于输入信息,并将信息提交给服务器的标签集合。
表单标签介绍
form标签:表单元素(其余标签)标签的容器标签
input标签:用于用户信息输入的标签。
button标签:按钮标签。
select/option标签:下拉框标签。
textarea标签:文本域标签。
lable标签:修饰输入元素的文字标签。
表单元素标签公有的属性(html4标准)
id:表单标签的唯一索引,一般在js中根据唯一索引获取表单元素。
name:表单标签的名称,在提交数据时,以name属性作为实际值的索引。
disabled:禁用当前表单元素。
readonly:规定表当前表单元素为只读元素。
value:设定或获取当前表单元素的输入值。
accessKey:访问当前元素的快捷键,非表单类属性,但通常用在表单元素中。
form标签:输入标签项的容器,封装子输入标签,主要作用如下
设定当前表单提交的目标服务器地址。
设定提交的http请求类型。
设定提交数据的编码格式。
通过js可以在提交前验证数据的合法性。
method的设定
取值范围
get:声明本次请求的目的是从服务器获取数据。
post:声明本次请求的目的是向服务器传送数据。
get与post的区别
目的不同
提交方式不同(一个在响应头,一个在响应体)
提交数据长度不同,get:不超过255个字符,post理论上不受限制。
安全性get在地址栏显示信息,不安全。
缓存机制不同,get请求的地址会保存到浏览器的访问历史记录中,post不会。
enctype的设定的取值范围
input标签:用来声明一组用于用户输入信息的标签,使用type属性可以设定输入的类型。
input标签的分类
输入类
text:文本框,type的默认值,
password:密码框,密码框的文字以黑点方式显示。
hidden:隐藏框,元素不显示,可以通过此标签提交用户不可见信息如id等。
私有属性(具备表单标签的公有属性)
maxlength:限定输入字符的长度。
<input type="text" value="userName" name="text" maxlength="10" />
<input type="password" value="password" name = "password" maxlength="10" />
选择类
checkbox:多选框。
radio:单选框,表单中name属性相同的radio,只能有一个被选中。
私有属性(具备表单标签的公有属性)
checked:设定是否被选中,在html中只要声明此属性就被选中
<input type="radio" name = "sex" value = "1"/></br>
<input type="checkbox" name="fav" checked="false" value="1"/>
文件类
file:文件选择框。
私有属性(具备表单标签的公有属性)
multiple:设定是否可以多选,在html中只要声明此属性就可以多选。
accept:设定选择文件的mime类型,多个类型用逗号分隔开。
<input type="file" name = "file" multiple accept="image/gif, image/jpeg"/>
按钮类
button:按钮标签。
image:图片按钮标签。
submit:提交按钮标签,默认行为是提交当前form表单。
reset:重置按钮标签,默认行为是当前表单恢复到网页初始化状态。
<input type="submit" value = "提交" />
<input type="reset" value = "重置" />
button标签:按钮标签,非闭合标签,可以在该标签内部插入其他html元素,因此可以定义出功能强大的按钮。
私有属性(具备表单标签的公有属性)
type:按钮的类型。
reset:重置类型按钮
submit:提交类型按钮
button:不同按钮,无默认行为。
<button type="submit"><div>大家好</div></button>
下拉框标签:使用select、option两个标签声明下拉框。
<select name="pro" >
<option value="1">北京</option>
<option value="2">上海</option>
</select>
select标签私有属性
multiple:规定可选择多个选项。
size:规定可见下拉框选项的数量。
option标签私有属性
selected:当前下拉明细项是否被选中。
textarea标签:设定多行的文本输入控件。
私有属性(具备表单标签的公有属性)
cols:规定文本区内的可见宽度。
rows:规定文本区内的可见行数。
maxlength:文本输入的最大字符数量。
<textarea name = "introduce" maxlength="500" cols="20" rows="10"></textarea>
label元素:输入标签的文字描述标签,可以代替输入标签响应用户的操作。
私有属性说明
for:输入标签的id属性值。
<label for="sex1">女</label>
<input id = "sex1" type="radio" name = "sex" value = "1"/>