HTML基础之表单

表单的用途很多，在制作网页，特别是动态网页时常常用到，表单主要用来收集客户端提供的信息，如用户注册、在线留言

创建表单

语法：

<form action="服务器接收地址" method="get" name="" novalidate="novalidate">
<input type="text" name="uname" id="uname" value="请输入..." />


</form

form标签用于创建一个表单，会将里面的内容一起发送给服务器，结构类似于表格，表单中的其他元素都要包含在form标签中。

action是form标签的必须项，action指定表单发送的地址；method是表单数据发送至服务器的方法，常用有get/post，默认是get;name是用来为当前表单定义一个独一无二的名称，控制表单与后台程序之间的关系；novalidate设置数据提交时不进行验证，通常不会用到；target设置目标窗口打开方式，通常不会用到。

form表单中属性的值和含义

get方法提交，数据会附在网址之后提交给服务器，不安全，提交的数据量很小；post方法提交数据不会附在网址之后，会将表单中的所有数据进行打包后发送给服务器，等待服务器读取。提交过程是安全的。post是使用最多的提交方法，提交的数据量不受限制。

表单发送

1.表单接收程序，放在服务器环境中

2.表单发送地址，要填写完整

type和name属性

input元素是最常用的表单控件，也可以在表单之外使用。

input元素的type属性的作用是：指定输入内容的类型；默认为text，单行文本框；必选项。

input元素的name属性的作用是：传递参数时的参数名称；表单接收找的就是name属性值；必选项。

value和placeholder属性

input元素的value属性的作用是：输入框中的默认值；value值会发送到服务器，可选项。

input元素的placeholder属性的作用是：输入框中的默认值，当文本框获得焦点时，默认内容被清空；placeholder的值不会发送到服务器；

maxlength和disabled属性

input元素的maxlength属性的作用是：控制输入的最大字数；包括英文、数字、中文汉字等

disabled属性的作用是：设置为不可用，不可操作，不提交到服务器；一般用于格式提示；用法：disabled="disabled"

单行文本框和密码输入框

单行文本输入框（input type="text"）,可以输入任何文本、数字、字母、汉字；输入的内容以单行显示；

密码输入框（input type="pasword"）：输入的字符会以圆点或星号显示；输入的内容会被隐藏；

提交按钮和重置按钮

提交按钮（input type="sumbit"）：按钮本身不承载数据，没有name属性；点击后，将数据发送到服务器；通过value改变按钮的名称，如发送。

重置按钮（input type="reset"）：通过value改变按钮的名称，如重写；清空输入框中的内容；

普通按钮和隐藏域

普通按钮：type="button";定义一个可以点击的按钮，但是没有任何的行为，没有任何的样式；可以通过value改变按钮的名称；常用于点击按钮时，启动javascript程序。

隐藏域：type="hidden"；隐藏域不会显示在浏览器窗口界面中，一般是网页设计者设置好的数据；表单提交时，隐藏域中的value值会提交到服务器。

数字输入框和活动条

数字输入框：input type="number" name="' ：专门用来输入数字，其他类型不能输入；可以通过value设置一个默认值；可以设置最小的值和最大的值，input type="number" name="' min="6"，input type="number" name="' max="10"；step="3"设置步长，每次增加或减少为3

活动条：input type="range" name="" ：专门用来输入数字，其他类型不能输入；可以通过value设置一个默认值；可以设置最小的值和最大的值，input type="number" name="' min="6"，input type="number" name="' max="10"；step="3"设置步长，每次增加或减少为3

时间输入框，颜色选择器和文件域

时间输入框：<input type="time" name="'><input type="datetime" name=""><input type="datetime-local" name=""><input type="date" name=""><input type="month" name=""><input type="week" name="">

颜色选择器：<input type="color" name="">

文件域/文件上传：<input type="file" name="" accept="image/jpeg " multiple="multipe">

accept用于规定选取的文件类型，multiple规定一次可以选择多个文件

单选框

<input type="radio" name="" checked value="">

name值必须为相同，实现单选。向服务器发送的value值，所有还要设置好value值；可以通过checked设置默认选取状态，再次单击取消选取，

复选框/多选框

<input type="checkbox" name="name[]" checked value="">

电子邮箱和网址输入框

电子邮箱：<input type="email" name="name[]" checked value="">

网址输入：<input type="url" name="name[]" checked value="">

网址输入框输入的网址一定要包含协议

表单属性验证

pattern=“[a|b]”

[a|b]、[0~9{11}]、[a~z{5}]这是正则表达式用于验证用户输入

required="required" 必须填写的字段

多行文本输入框

基础语法：<textarea name="" rows=“” cols="" ></textarea>

多行文本输入框使用textarea标签；文本输入区域可以容纳无限数量的文本；多行文本输入框和单行文本输入框的属性差不多。

使用rows和cols设置多行文本输入框的宽和高，不是很精准，在实际开发中不使用这个两个属性，而是使用CSS控制。

多行文本输入框可以在表单之外使用。

下拉框

基本语法：

<select name="" size="3" >
<option value="">上海</option>
<option value="">厦门</option>
</select>

select表示创建下拉列表；option表示每一个下拉列表项；往服务器发送的是option的value值;size设置列表中显示多少个列表项。multiple属性可以定义多选；多选时，name属性后面加上[]

下拉框列表分组

<select name="" size="3" >
<optgroup label="市">
<option value="">上海</option>
<option value="">厦门</option>
</optgroup>
<optgroup label="市">
<option value="">上海</option>
<option value="">厦门</option>
</optgroup>
</select>

button按钮

button按钮也是有type属性，可以设置submit/reset/button这三个值，含义和input的按钮一样，常用的有name、value、disable等属性。button是双标签，可以设置更复杂的样式。不建议在表单中使用，在表单中使用input替代button，表单外使用button按钮。