HTML中表单控件的写法,HTML表单和表单控件

表单元素

元素用于生成输入表单，该元素不会生成可视化部分。在html5规范以前，其他表单控件，如单行文本、多行文本域、单选按钮、复选框等都必须放在元素之内。元素可以指定id、style、class等核心属性，还可以指定onclick等事件属性。除此之外还可以指定如下几个属性：

action：指定当点击表单内的“确认”按钮时，该表单被提交到哪个地址。该属性既可是一个绝对地址，也可以是一个相对地址。该属性必填。

method：指定提交表单时发送何种类型的请求，该属性值可为get或post，分别用于发送GET和POST请求。该属性必填。默认是GET。

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

name：指定表单的唯一名称，该属性值于id属性值保存一致

target：指定使用哪种方式打开目标URL，与超链接的target可接受的属性值完全一样，_blank、_parent、_self和_top四个值

enctype

表单的enctype属性有三个值：

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

multipart/form-data：这种编码方式会以二进制流的方式来处理表单数据，会把文件域指定文件的内容也封装到请求参数里。当需要通过表单上传文件时使用该属性

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

单纯的

元素既不能生成可视化内容，也不包含任何表单控件，甚至不能提交表单，因此元素必须与其他控件元素集合使用

当在

元素里定义一个或多个表单控件，一旦提交表单，该表单里的表单控件将会转成请求参数。规则如下

1、每个有name属性的表单控件对应一个请求参数，没有name属性的表单控件不会生成请求参数

2、如果多个表单控件有相同的name属性，则多个表单控件只生成一个请求参数，只是该参数有多个值

3、表单控件的name属性指定请求值，value属性指定请求参数值

4、如果某个表单控件设置了disable或disable="disabled"属性，则该表单控件不再生成请求参数

input元素

元素是表单控件中功能最丰富的，下面几种元素都是`元素生成的

当行文本框：指定元素的type属性为text

密码输入框：指定元素的type属性为password

隐藏域：指定元素的type属性为hidden

单选框：指定元素的type属性为radio

复选框：指定元素的type属性为checkbox

图像域：指定元素的type属性为image即可。当type='image'时可以指定元素的width和height两个属性

文件上传域：指定元素的type属性为file即可

提交、重设、无动作按钮：分别指定元素的type属性为submit、reset、button

在上面的这些表单控件中，单行文本框、密码输入框都用于接收用户输入，而隐藏域不能接收用户输入，也不能生成可视化部分，它用于提交额外的请求参数，请求参数的值就是该隐藏域的value属性值，因此定义隐藏域的同时应该指定value属性值。

单选框、复选框不能接收用户的输入，因此定义它们时也会指定value属性值，用于设置它们所对应的请求参数值，对于单选框、复选框，当它们被勾选后才会生成对应的请求参数

文件上传域会生成应该单行文本框和应该“浏览”按钮，该文件上传域允许用户浏览本地磁盘文件，并将该文件上传到服务器。

图像域和提交按钮的作用基本一样，单击它们都会导致表单被提交，区别是图像域是应该图像按钮。

重设按钮的作用是清空表单内用户的输入，将表单内所有表单控件的值恢复到最初的状态。

无动作按钮，它只是一个按钮，在默认情况下，单击该按钮对表单不会有任何作用。

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

checked：设置单选框、复选框初始状态是否处于选中状态，该属性只能是checked，表示初始即被选中。只有当type属性值为checkbox或radio时才可指定该属性

disabled：设置首次加载禁用次元素。该属性值只能是disabled，表示该元素被禁用，则该元素无法获得输入焦点、无法选中、无法输入文本等

maxlength：值为数字，指定文本框中所允许输入的最大字符数

readonly：指定文本框内的值不允许用户修改(可以使用js脚本修改)

size：值为数字，指定元素的宽度，当type="hidden"时不能指定该属性

src：指定图像域显示图像的URL，只有当type="image"时才能指定

例子

!DOCTYPE html>

使用input元素定义表单控件

单行文本框：

不能编辑的文本框：

密码框：

隐藏域：

第一组单选框：

第二组单选框：

两个复选框：

文件上传域：

图像域：

下面是四个按钮：

屏幕快照 2018-11-26 下午7.39.51.png

当进行输入和选择操作之后，点击提交按钮，将会导航到对应的http://www.baidu.com页面，后面会拼接对应的参数