HTML5知识点3
3.表单标签
表单在HTML5中,标签用于用户创建表单,以实现用户信息的收集和传递。
语法:
<form action="URL地址" method="提交方式">
<!-- 各种表单控件>
</form>
3.1.1 表单的属性
action和method属于标签的两个常用属性,其提交方式有两种,一种是post方法,另一种是get方法。
它们的特点:(1)使用post方法提交表单的方式不会改变浏览器地址栏的状态,表单数据也不会被显示在地址栏中。
(2)使用get方法提交表单的方式,浏览器地址栏的状态会发生改变,该方法会将表单提交的数据在URL中清晰的显示出来。
post方法安全性高于get方法,为了避免数据泄露,建议尽量常用post方法提交表单数据。
3.1.2< input>标签的常用属性及其格式
属性 | 属性值 | 说明 |
---|---|---|
text | 定义单行输入字段,用户可在其中输入文本。 | |
password | 定义密码字段。字符被掩码。 | |
radio | 定义单选按钮 | |
checkbox | 定义复选框 | |
button | 定义可单击按钮 | |
submit | 定义提交按钮,把表单数据送到服务器 | |
type | reset | 定义重置按钮。会清除所有数据 |
file | 定义输入字段和浏览按钮,供文件上传 | |
定义输入Email地址的文本框 | ||
url | 定义输入URL地址的文本框 | |
number | 输入文本的文本框 | |
range | 输入包含一定范围内的数值的文本框 | |
search | 输入搜索关键字的文本框 | |
name | 自定义 | 指定表单控件的名称 |
value | 自定义 | 指定表单控件的初始值 |
size | 像素 | 指定表单控件的初始宽度 |
maxlength | number | 指定输入之段中的字符的最大长度 |
checked | checked | 指定按钮首次加载时应当被选中 |
3.1.3列表框和多行文本框
列表框用于提供一组数据项,它是通过标签和标签实现的。标签用于显示提供用户选择的列表框,而每个选项是由标签标示的,因此标签必须至少包含一个标签。
<select name="指定列表名称">
<option value="可选项的值" selected="selected">北京</option>
<option value="可选项的值">......</option>
<option value="可选项的值">......</option>
......
</select>
数字
number类型的属性
属性 | 属性值 | 描述 |
---|---|---|
max | number | 最大值 |
min | number | 最小值 |
value | number | 默认值 |
stpe | number | 合法数字间隔 |
滑块
range类型的属性
属性 | 属性值 | 描述 |
---|---|---|
max | number | 最大值 |
min | number | 最小值 |
value | number | 默认值 |
stpe | number | 合法数字间隔 |
3.1.4多行文本域
在表单中,除使用type属性定义不同的控件之外,还有两个其他常用的表单控件,即列表框和多文本域,下面对这两个表单控件进行详细讲解。
语法:<textarea name="textarea" cols="显示的宽度" rows=“显示的行数”>
文本内容
</textarea>
3.1.5表单验证
在表单注册或者登录时,通常会发现系统会自动验证用户输入的内容是否正确,除了可以使用(JavaScript)代码实现表单验证外,HTML5也提供了几个属性来验证表单。
3.1.6 placeholder属性
placeholder属性用于input类型的文本框提供一种提示。当文本框为空时,提示语显示;当在文本框中输入内容时,提示语消失。placeholder属性适用的input类型有text,search,url,email和passw。
3.1.7required属性
required属性用于规定在输入框中填写的内容不能为空,否则不允许用户提交表单。
该属性使用的input类型有text,password,email,search,url,number,checkbox,radio,file等
3.1.8pattern属性
pattern属性用于验证在input类型输入框中,用户输入的内容是否与所定义的正则表达式相匹配。
该类型使用得input类型有text,password,email,search,uel等。
3.2文章总结
标签用于为用户创建表单,已实现用户信息的收集和传递,表单标签要在它的范围内才有效。 method提交方法有两种,一种是post方法,另一种是get方法。 标签用于收集用户信息,该标签根据不同的type属性值会对应不同的输入类型。 标签常用的type属性值有text(文本框),password(密码框),radio(单选按钮),>>checkbox(复选框),button(普通按钮),submit(提交按钮),reset(重置按钮),file(文件域),email(邮箱),url(网址),number(数字),range(滑块),search(搜索框)。 将type属性值设为hidden隐藏烈性即可创建隐藏域。 readonly属性设置为hidden隐藏类型即可创建隐藏域。 readonly属性和disabled属性表示单元元素的只读和禁用。 使用