(1)表单由两部分组成,访问者在页面上可看见并填写的控件、标签和按钮的集合,以及用于获取信息并将其转化为可以读取或计算的的格式的处理脚本。
(2)表单创建,以form
标签开始结束,开始和结束form
标签之间是组成表单的标签
,控件
和按钮
。form
开始标签最重要的两个属性值,action
和method
。action
属性的值设为访问者提交表单时服务器上对数据进行处理的脚本的URL
,method
属性值要么是get
要么是post
。可设置novalidate
来关闭表单的HTML5
验证特性。get
方法表单提交后,表单中的数据会显示在浏览器的地址栏,希望表单提交后从服务器得到信息就使用get
,post
方法表单数据提交后不会出现在浏览器地址栏,可向服务器发送更多的数据。
(3)处理表单,后台完成,必须考虑将服务器端的验证加入表单处理脚本。
(4)对表单元素进行组织,使用fieldset
元素实现,legend
元素可为fieldset
元素提供标题.
(5)创建文本框,<input type="text"
,可设置label
,可设置name
用于让服务器识别识别输入数据的文本。value=default
可设置初始值,autofocus
此元素加载后默认获得焦点,size=n
定义文本框的大小n是宽度以字符为单位,maxlength="n"
设置文本框允许输入的最大字符数,autocomplete="off"
可根据输入记录提供可选择项自动填充。label
标签有一个特殊属性for
,for
的值与一个表单字段的id
值相同时,该label
就与字段显式的关联了起来,这时点击标签,输入框将获得焦点,或点击标签选中复选框。让id
、for
、name
属性的值都一样是一种并非必须但很常见的做法。for
和id
的值一定要一样。input
的类型可为text
、password
、radio
、checkbox
、email
、url
、tel
、search
、file
上传文件、hidden
设置字段隐藏等,其中可使用pattern
属性通过正则表达式定制校验规则。使用复选框时,标签文本label
不一定和value
值保持一致,因value
是发送到后台的值。
(6)选择框<label/><select><option>
其中设置size=n
属性,这里n
代表选择框的高度,multiple="multiple"
设置为多选框,selected="selected"
设置某个选项默认被选中,在select
标签中使用<optgroup label="">
可设置
(7)给input
添加disabled
和readonly
属性可设置其值不可修改,<input type="submit" value="create profile" >
可定义提交按钮。可设置带有图标的按钮,<input type="image" src="image.url"/>
。使用<button>
元素可创建包含其他元素的按钮。<input type="reset">
表单还有重置按钮。根据表单状态设置其样式,使用的是CSS3
提供的伪类,有:focus
、:checked
、:disabled
、:enable
、:required
、:optional
和:invalid
等。设置样式如input:focus{background-color:yellow}