表单元素
<form.../>
元素用于生产输入表单,该元素不会生成可视化部分。在HTML5规范以前,其它表单控件,如单行文本框、多行文本域、单选按钮、复选框等都必须放在<form.../>
元素之内。
<form.../>
元素可以指定id、style、class等核心属性,还可以指定onclick等事件属性。除此之外还可以指定action,method,enctype,name,target
<form.../>
元素method属性非常重要,它指定可该表单提交请求的方式,表单默认以GET方式提交请求。
表单的enctype属性用于指定表单数据的编码方式,有如下3个值:
- application/x-www-form-urlencoded: 这是默认的编码方式,它只处理表单控件里的value属性值,采用这种编码方式的表单会将表单控件的值处理成URL编码方式
- multipart/form-data: 这种编码方式会以二进制的方式来处理表单数据,这种编码方式会把文件域指定文件的内容也封装到请求参数里。当需要通过表单上传文件时使用该属性值
- text/plain: 当表单的action属性值为mailto:URL的形式时使用这种编码方式比较方便,这种编码方式主要适应于直接通过表单发送邮件的方式
当在<form.../>
元素里定义一个或多个表单空间时,一旦提交该表单,该表单里的表单控件将会转换成请求参数。规则如下:
- 每个有name属性的表单控件对应一个请求参数,没有name属性的表单控件不会生成请求参数
- 如果多个表单控件有相同的name属性,则多个表单控件只生成一个请求参数,只是该参数有多个值
- 表单控件的name属性指定请求参数名,value属性指定请求参数
- 如果某个表单控件设置了disabled或disabled=“disabled”属性,则该表单控件不再生成请求参数
使用input元素
- 单行文本框:
<input type="text" />
- 密码输入框:
<input type="password" />
- 隐藏域:
<input type="hidden" />
- 单选框:
<input type="radio" />
- 复选框:
<input type="checkbox" />
- 图像域:
<input type="image" />
,此时,可以为<input.../>
元素指定width和height两个属性 - 文本上传域:
<input type="file" />
- 提交:
<input type="submit" />
- 重设:
<input type="reset" />
无动作按钮:
<input type="button" />
在是上面这些表单控件中,单行文本框、密码输入框、都用于接收用户输入,而隐藏域不能接收用户输入,也不能生产可视化部分,它用于提交额外的请求参数,请求参数的值就是该赢藏域的value属性值,因此定义赢藏域的同时应指定value属性值
单选框、复选框不能接收用户输入,因此定义它们时同时也会指定value属性值,用于设置它们所对应的请求参数值。对于单选框、复选框而言,当它们被勾选后,它们才会生成对应的请求参数值
文件上传域会生成一个单行文本框和一个“浏览“按钮,该文件上传域允许用户浏览本地磁盘文件,并将该文件上传到服务器
图像域和提交按钮的作用基本一样,单击它们都会导致表单被提交,区别是图像域是一个图像按钮
重设按钮的作用是清空表单内用户的输入,将表单内所有表单控件的值恢复到初始状态
无动作按钮,只是一个按钮,在默认情况下,单击该按钮对表单不会有任何作用。通常为该按钮编写javascript脚本来响应它的单击、双击等事件
<input.../>
元素可以指定id、style、class等核心属性,也可以指定onclick等事件属性,还可以指定onfocus、onblur等焦点事件属性。除此之外,还可以指定:checked:设置单选框、复选框初始状态是否处于选择状态,该属性值只能是checked,表示初始即被选中。只有当type属性值为checkbox或radio时才可指定该属性
- disabled:设置首次加载时禁用此元素。该属性值只能是disabled,表示该属性被禁用,则该元素无法获得输入焦点、无法选中、无法在其中输入文本,无法响应鼠标单击、双击事件。当type=“hidden”时不能指定该属性
- maxlength:该属性值是一个数字,指定文本框中所允许输入的最大字符数
- readonly:指定该文本框内的值不允许用户修改(可以使用javascript)脚本修改
- size:该属性值是一个数字,指定该元素的宽度。当type=“hidden”时不能指定
- src:指定图像域所显示图像的URL,只有当type=“image”时才可指定该属性
1 |
|