1.表单标签以及表单属性
在HTML5中,<form>标签属于为用户创建表单,以实现用户信息的收集和传递,其他标签必须在它的范围内才有效,创建表单的基本语法如下:
<form action="URL地址" method="提交方式">
<i-- 各种表单控件 --!>
</form>
在上述语法中,action和method属于<form>标签的两个常用属性,它们分别用于定义URL地址,以及指定向服务器发送数据的提交方法,其提交方法有两种,一种事post方法,另一种是get方法。
2.标签常用属性及其格式
在HTML5中,<input>标签用于搜集用户信息,根据其不同的tupe属性值,<input>标签拥有多种输入类型,除此之外,该标签还有一些常用属性。
type属性属性值
text(定义单行的输入,可输入文本)
password(定义密码字段,该字段中的字被掩盖)
radio(定义单选按钮) checkbox(定义复选框)
button(定义可单击按钮)
submit(定义提交按钮,会把表单数据发送到服务器)
reset(定义重置按钮,会清除表单的所有数据)
file(定义输入字段和浏览按钮,可以文件上传)
email(定义输入Email地址的文本框)
url(定义输入URl地址的文本框)
number(定义用于输入文本的文本框)
range(定义用于包含范围内的数值的文本框)
search(定义用于输入搜索关键字的文本框)
name属性属性值
自定义(用于指定表单控件的名称)
value属性属性值
自定义(用于指定表单控件的初始值)
size属性属性值
自负数/像素(用于指定表单控件的初始宽度)
maxlength属性属性值
number(用于指定输入字段中的字符的最大长度)
checked属性属性值
checked(用于指定按钮首次加载时应当被选中)
文本框
文本框用于输入单行的文本信息,如用户名,账号,证件号码等,基本用法如下:
<input type="text">
密码框
在实际的表单登录或注册操作中,当输入密码时,输入的数据会使用黑色实心圆点或黑色星号来代替,从而对数据进行遮挡,其原理为将本文框控件的type属性设置为password,可对输入的数据进行遮挡。语法如下
<input type="password">
单选按钮
在网站注册时,会注意到“性别”字段里有两个选项:“男”和“女”。如果不允许用户选择多个选项,则可以使用表单元素的单选按钮。单选按钮用于互相排斥的值,也就是用户只能从选项列表中选择一项。单选按钮组中的所有按钮共享同一个名称,所以浏览器可以将按钮组合在一起,通过选中其中一个单选按钮,其他单选按钮自动变为未被选中状态,示例:
<form>
性别:
<input type="radio" name="sex" value="男"/> 男
<input type="radio" name="sex" value="女"/> 女
我们发现,当打开页面时,“男”和“女”单选按钮均未被选中,如果希望页面加载时能够有一个默认的选项,可以使用checked属性实现,修改代码如下:
<input type="radio"