HTML5表单相关元素和属性

form :

可以指定id、style、html' target='_blank'>class等核心属性，还可以指定onclick事件属性。除此之外，还可以指定如下几个属性。

action：指定表单提交的URL或URI。

method：指定请求方式，一般为get或post。

enctype：指定表单内容进行编码所使用的字符集。

name：指定表单的唯一名称，一般与id的属性值一致。

target：指定使用哪种方式打开目标URL。

enctype属性用于指定表单数据的编码方式，该属性有三个属性值：

application/x-www-form-urlencoded：这是默认的编码方式，它只处理表单控件里面的value属性值，采用这种编码方式的表单会将表单控件的值处理成URL编码方式。

multipart/form-data：这种编码方式会以二进制的方式处理表单数据，这种编码方式会将文件域指定文件的内容封装到请求参数里。

text/plain：当表单的action属性值为mailto:URL的形式时使用这种编码方式适用于直接通过表单发送邮件的方式。

关于表单控件转换成请求参数的规则如下：

每个有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/ 元素的type属性为file。

提交、重置、无动作按钮：分别指定 input/ 元素的type属性为submit、reset或button即可。

input/ 元素可以指定id，style，class等核心属性，也可以指定onclick等事件属性，还可以指定onfocus、onblur等焦点事件属性。除此之外还可以指定如下属性：

checked：设置单选框，复选框默认是否选中。

disabled：表示该元素被禁用，当type= hidden 时不能指定该属性。

maxlength：指定输入框允许输入的最大字符数。

readonly：指定文本框的内容不允许修改。

size：指定该元素的宽度，当type= hidden 时不能指定该属性。

src：指定图像域所显示图像的URL，只有当type= image 时才可以指定该属性。

 !DOCTYPE html  html lang= en  head  meta http-equiv= Content-Type content= text/html;charset=GBK /  title getForm /title  /head  body  form action= http://www.crazyit.org method= get  单行文本框： input id= username name= username type= text readonly= readonly / br/  密码框： input id= password name= password type= password / br/  隐藏域： input id= hidden name= hidden type= hidden / br/  第一组单选框： br/  input id= color name= color type= radio value= red /  input id= color2 name= color type= radio value= green /  input id= color3 name= color type= radio value= blue / br/  第二个单选框： br/  input id= gender name= gender type= radio value= male /  input id= gender2 name= gender type= radio value= female br/  两个复选框： br/  input id= website name= website type= checkbox value= leegang.org /  input id= website2 name= website type= checkbox value= crazyit.org / br/  文件上传域： input id= file name= file type= file / br/  图像域： input type= image src= img/wjc.gif alt= 疯狂Java联盟 / br/  下面是四个按钮： br/  input id= ok name= ok type= submit value= 提交 /  input id= dis name= dis type= submit value= 提交 disabled= disabled /  input id= cancle name= cancle type= reset value= 重填 /  input id= no name= no type= button value= 无动作 /  /form  /body  /html 

label/ :

让标签和表单控件关联有两种方式：

隐式使用for属性：for属性为所关联表单控件的id属性值。（推荐使用）

显示关联：将普通文本、表单控件一起放在 label/ 元素内部即可。

 form action= http://www.crazyit.org method= get  label for= username 单行文本框： /label  input id= username name= username type= text / br/  label 密码框： input id= password name= password type= password / /label br/  input id= ok type= submit value= 登录疯狂Java联盟 /  /form 

button/ :

内部可以包含普通文本、文本格式化标签、图像等内容，功能比input按钮更丰富。

button/ 元素可以指定id、style、class等核心属性，还可以指定onclick等事件响应属性。除此之外还可以指定如下属性：

disabled：是否禁用按钮。

name：指定按钮唯一的名称。

type：指定该按钮属于哪种按钮，属性值只能为button、reset或submit。

value：指定该按钮的初始值。

 form action= http://www.crazyit.org method= get  button type= button b 提交 /b /button br/  button type= submit img src= images/wjc.gif alt= crazyit.org / /button br/  /form 

select/ :

可以指定id、style、class等核心属性，该元素仅可以指定onchange事件属性。除此之外还可以指定如下属性：

disabled：设置禁用该列表框和下拉菜单。

multiple：设置多选。

size：指定该列表框可以同时显示多个列表项。

select/ 元素里，只能包含如下两种元素：

option/ ：用来定义列表项和菜单项。

optgroup/ ：用来定义列表项和菜单项组，该元素只能包含 option/ 子元素。

textarea/ :

textarea/ 元素可以指定id、style、class等核心属性，还可以指定onclick、onselect、onchange事件属性。除此之外，该元素也可以指定如下几个属性：

cols：指定文本域的宽度。

rows：指定文本域的高度。

disabled：禁用该文本域。

readonly：指定文本只读。

相关推荐：

HTML表单相关知识点介绍

HTML5表单属性教程实例

以上就是HTML5表单相关元素和属性的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。