html5表单单选框加高,HTML5中的增强表单

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

HTML5中不仅新增加了一些新的表单标签属性，而且还增加了表单验证的功能。今天让我们一起来盘点那些常用的表单输入元素。

form元素

form元素的一些基本属性

action属性说明了要往哪个URL地址提交表单数据。

method属性指定了提交表单数据所使用的HTTP方法，默认值是"get"，但其实大多数表单都是通过"post"方法提交的。

这里延伸拓展一下关于get方法和post方法的区别：get方法主要用于从服务器端获取数据，post方法主要用于向服务器端发送数据

get方法要传递到服务器端的数据包含在浏览器地址栏的URL中，而post方法提交的数据包含在HTTP报文的主体部分中

get请求用于安全交互，同一个请求可以发起任意多次而不会对服务器端产生副作用，这就决定了get请求是幂等的；而post方法用于不安全交互，提交数据的行为可能会导致服务器端一些状态的改变

get请求提交的数据量较小，受URL长度的限制一般不能超过2KB，而post方法则没有这方面的限制

get方法可以传递的数据被限制为ASCII码，而post方法则可以支持整个ISO10646字符集。

此外form元素具有的其他属性还有：

enctype属性指定了浏览器对发送给服务器的数据采用的编码格式，其可能取值有："application/x-www-form-urlencoded"：这是默认编码方式

"multipart/form-data"：用于将文件上传到服务器

"text/plain"：在各大浏览器中存在差异，不推荐使用

autocomplete属性是HTML5中新增的用于form元素的属性。可以用于开启或关闭表单的自动完成功能。当开启该功能时，浏览器会根据以往用户在其他表单输入的数据，自动帮助用户填写此表单。注：autocomplete属性设置的是表单中input元素的行为方式，该属性也可以定义在input标签上，用于覆盖表单上定义的autocomplete属性。

target属性用于指定表单提交后服务器端反馈回来的信息的显示位置。可选的值有："_blank"：显示在新窗口中

"_parent"：显示在父框架中

"_self"：显示在当前窗口或框架中，这是默认值

"_top"：显示在顶层窗口中

""：显示在指定框架中

name属性用于定义表单的名字。

button元素

button元素可以通过设置type属性来定义它的三种不同用法："submit"：用于提交表单，默认值，也就是说，默认情况下按下按钮就可以提交表单

"reset"：用于重置表单，当button定义为这样的按钮时没有其他的属性可用

"button"：定义普通的按钮，没有特别的语义，在按下时不会发生任何事情

对于作为提交表单的按钮(即type属性值为"submit")，它具有的属性有："form"：指定按钮关联的表单，需要将该值设置为对应表单的id属性值

"formaction"，"formenctype"，"formmethod"，"formtarget"，"formnovalidate"：分别可以覆盖关联表单上定义的对应属性值

input元素

input标签上的通用属性

对于input标签，可以定义autofocus属性来自动聚焦到页面中的某个input元素。(单选框，复选框以及提交按钮都可以使用这个属性，但要注意，页面中只有一个元素可以使用该属性，如果有多个，后面的元素的autofocus属性会覆盖前面的)1

禁用某个input元素可以定义disabled属性：1

用于输入文本的input元素

用于输入文本的input元素，即type属性值定义为"text"的input元素，或者未设置type属性的input元素。它所具有的属性有："list"：指定为文本框提供参考值的datalist元素，其属性值为datalist元素的id值

"maxlength"：设定用户可以在文本框中输入的字符的最大长度

"pattern"：指定一个用于验证输入的正则表达式

"placeholder"：指定在输入前显示在文本框中的提示信息

"readonly"：将文本框设置为只读以防止用户修改其内容

"required"：用于指定该项为必填项

"size"：根据指定文本框中可见的字符长度设定其宽度

"value"：设置文本框初始值1

支持同样所有这些属性的input元素还有的是将type属性设置为"email"，"tel"或"url"的input元素。

用于输入密码的input元素

用于输入文本的input元素，即type属性值定义为"password"的input元素。除了上面用于输入文本的input元素具有的list属性之外，用于输入密码的input元素也拥有其他相同的属性。

用于生成按钮的input元素

跟button元素一样，使用input元素通过定义其type属性可以定义三种不同的按钮："submit"：用于提交表单，也具有同type属性值为submit的button元素相同的属性

"reset"：用于重置表单，当input元素定义为这样的按钮时没有其他的属性可用

"button"：定义普通的按钮，没有特别的语义，在按下时不会发生任何事情

只接受数值的文本框

将input元素的type属性值定义为"number"生成的输入框只接受数值。它具有的属性有："list"：指定为文本框提供参考值的datalist元素，其属性值为datalist元素的id值

"readonly"：将文本框设置为只读以防止用户修改其内容

"required"：用于指定该项为必填项

"value"：设置文本框初始值

"min"：设定可接受的最小值

"max"：设定可接受的最大值

"step"：设定上下调节数值的步长1

另外一种只接受数值的input元素是type属性值为"range"的input元素。用户只能从给定的数值范围中选择一个数作为要提交的数据。它支持的属性和type属性值为"number"的input元素完全相同。

用于获取布尔型输入的input元素

将多个input元素的type属性设置为"checkbox"可以生成复选框。这类input元素支持的属性有："checked"：设置该复选框刚显示出来时或重置表单后呈勾选状态

"required"：表示用户必须勾选该复选框

"value"：设定复选框呈勾选状态时提交给服务器的值

用于生成单选按钮的input元素

定义单选按钮，需要将input元素的属性设置为"radio"。它具有的属性和定义复选框的input元素完全相同。

用于生成隐蔽数据项的input元素

将input元素的type属性设置为"hidden"，可以用来生成隐蔽数据项。最常用到的就是它的name属性和value属性。

用于生成图片按钮的input元素

可以将要定义为提交按钮的input元素的type属性设置为"image"，用于生成图片按钮。将input元素的type属性设置为”image"也可以用来生成分区响应图。它具有的属性有："width"：以像素为单位定义图片按钮的宽

"height"：以像素为单位定义图片按钮的高

"src"：指定图片来源

"alt"：提供元素的说明文字

"formaction"，"formenctype"，"formmethod"，"formtarget"，"formnovalidate"：分别可以覆盖input元素所处的表单定义的对应属性值。1

定义上传文件的input元素

将input元素的type属性设置为"file"可以定义选择框，用户可以通过该选择框选择本地文件并上传到服务器。该元素支持的属性有："accept"：指定接受的MIME类型

"multiple"：设置这个属性表示可以同时上传多个文件

"required"：表示用户必须上传文件

需要特别注意的一点是，要上传文件，必须将表单的编码类型(即enctype属性)设置为"multipart/form-data"。

除了上面的这些各有各的用途的input元素之外，还可以定义用于获取日期和时间的input元素(将input元素的type属性值定义为"datatime"，"date"，"time"，"month"和"week"，具有的属性和只接受数值的input元素完全相同)以及可以用来获取颜色的input元素(将input元素的type属性定义为"color"，它只支持"list"属性)

select元素

select元素通常用于定义一个选项列表供用户选择。它所具有的属性有："name"：设置选项列表的名称

"disabled"：禁用该选项列表

"form"：设置选项列表关联的表单

"autofocus"：自动聚焦

"required"：用户必须从选项列表中选出一项

"multiple"：用户可以从选项列表中同时选择多个选项

"size"：设定呈现给用户的选项个数

textarea元素

textarea元素用于生成多行文本框。它所具有的属性有："name"：设置选项列表的名称

"disabled"：禁用该选项列表

"form"：设置选项列表关联的表单

"autofocus"：自动聚焦

"required"：用户必须从选项列表中选出一项

"maxlength"：设定允许用户输入字符的最大长度

"readonly"：设置文本框为只读，不允许用户修改其内容

"placeholder"：指定在输入前显示在文本框中的提示信息

"rows"：通过指定行数来设置文本框的高度

"cols"：通过指定列数来设置文本框的宽度

"wrap"：用于控制用户在输入文字时插入换行符的方式，可选的值有"soft"和"hard"。使用"hard"可以保证每行的字符个数不会超过cols属性的大小。