form表单细节

一、表单

1.表单<form> 标签用于为客户输入创立 HTML 表单

2.表单能够包含 input 元素，比方文本字段、复选框、单选框、提交按钮等等。

3.表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

4.表单用于向服务器传输数据。

二、表单form 的属性

（一）action属性

action 属性规定当提交表单时，向何处发送表单数据

属性值：url 链接的地址

（二）name属性

name属性规定表单的名称。 name 属性提供了一种在脚本中引用表单的方法。

（三）method属性

method 属性规定在提交表单时所用的HTTP方法（GET 或者是 POST）

1、什么时候使用GET？

method属性的默认值是GET，假如表单的提交是被动的（比方搜索引擎查询），并且没有敏感信息；

当使用GET的时候，表单数据是提交到页面的地址栏中的。

2、什么时候使用post？

地址栏中可以储存的数据是有限的，假如想要储存更多数据，更安全的储存数据就需要使用 post

表单正在升级数据，或者是包含敏感信息（例如密码）最好使用post；

post 安全性更好，由于在页面地址栏中提交的数据使不可见的（假如上传的数据比较多或者是要上传图片，就要使用post）。

（四）legend元素

<length> 元素为 <fieldset> 元素定义标签

<fieldset>标签 可以将表单内的相关元素分组，还可以在相关表单元素附近绘制边框。

<form> <fieldset>  <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> </fieldset></form>

input元素必需要加上 name 属性，定义一个名字，后端才会正常接收输入的数据；

三、表单形容标签的使用

<label> 为input元素定义标注

<label for="wenzi">文字</label><input type="text" id='wenz'></pre>

label 元素不会向客户呈现任何特殊效果。不过，它为鼠标客户改进了可用性。

假如在 label 元素内点击文本，就会触发此控件，使该控件取得焦点。当客户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

为了实现同样的效果，会有另一种写法：不需要 for 和 id 属性；

<label>文字 <input type="text"></label></pre>

四、表单束缚属性

（一）required 属性

required 属性是一个布尔属性，规定必需在提交表单之前填写输入字段，必填字段。（required是H5的新属性）

注意：required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

（二）placeholder属性

placeholder 属性规定可形容输入字段预期值的简短的提醒信息（ 在输入框里面的提醒文字，内容不会被提交），例如一个样本值或者是预期格式的简短的形容。

placeholder 定义的提醒会在客户输入值之前显示在输入字段中。

注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

（三）value属性

value 属性为 input 元素设定值。对于不同的输入类型，value属性的用法也不同。

type类型为button、reset、submit。定义按钮上显示的文本；

type类型为text、password、hidden。定义输入字段的初始值（默认值）；

type类型为checkbox、radio、image。定义输入相关联的值；

注意：<input type=”checkbox”> 和 <input type=”radio”> 中必需设置 value 属性。

注意：value 属性无法与 <input type=”file”> 一同使用。

（四）maxlength属性

maxlength 属性规定输入字段的最大长度，以字符个数计算。

maxlength 属性与 <input type=”text”> 或者 <input type=”password”> 配合使用（有输入长度）

（五）size属性

size 属性规定以字符数计的 <input> 元素的可见宽度。

size 限制表单的长度（不建议用，用CSS去设置更好）

五、表单访问限制（表单禁用）

（一）readonly 属性

readonly 属性规定输入字段为只读，无法输入，可以使用value来设置默认值，可以提交到后端，但是客户无法修改。

只读字段无法修改，不过客户依然可以使用tab键切换到该字段，还可以选中或者拷贝其文本。

readonly 属性可以防止客户对值进行修改，直到满足某些条件为止（比方选中了一个复选框）。而后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

readonly 属性可与** <input type=”text”> 或者 <input type=”password”>** 配合使用。

（二）disabled属性

disabled 属性定义应该禁用input元素（只能看，不能提交到后端）

被禁用的 input元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其余的条件为止（比方选择了一个复选框等等）。而后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

注意：disabled 属性无法与 <input type=”hidden”> 一起使用。

六、常用的字段扩展类型

H5新标签

七、大量文本和列表

（一）文本域

textarea 标签定义一个多行的文本输入控件

文本域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（Courier）

文本域中的默认值，要放在一对textarea 标签中

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好地·办法是使用CSS的height 和 width属性

（二）列表框

select 元素可以创立单选或者是多选菜单。

option标签用于定义列表中的可用选项，即列表项；

optgroup标签 定义列表项分组

 1 <select> 2   <optgroup label="Swedish Cars"> 3     <option value="volvo">Volvo</option> 4     <option value="saab">Saab</option> 5   </optgroup> 6   <optgroup label="German Cars"> 7     <option value="mercedes">Mercedes</option> 8     <option value="audi">Audi</option> 9   </optgroup>10 </select>

（三）multiple 属性

multiple属性定义多选，multiple 属性可以设置或者是返回能否可以有多个选项被选中。

multiple 的用法：

设置 multiple属性

selectObject.multiple=true|false

返回multiple属性

selectObject.multiple

八、选项框标准打开方式

（一）radio 类型

radio 单选框 ，当客户点击一个单选按钮时，该按钮会变为选中状态，其余所有按钮会变为非选中状态。

<form> 男性： <input type="radio" checked="checked" name="Sex" value="male" /><br /> 女性： <input type="radio" name="Sex" value="female" /></form>

（二）checkbox 类型

<input type="checkbox"> 定义了复选框. 客户需要从若干给定的选择中选取一个或者若干选项，可以多个同时选中。

<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

（三）checked 属性

checked 属性是一个布尔属性。

checked 属性规定在页面加载时应该被预先选定的 <input> 元素。

checked 属性适用于 <input type=”checkbox”> 和 <input type=”radio”>。

九、文件上传

（一）file 类型

file类型 定义输入字段和 “浏览”按钮，供文件上传

（二）enctype 属性

form 标签中定义的enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

默认地，表单数据会编码为"application/x-www-form-urlencoded"。

就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）

属性值：

application/x-www-form-urlencoded 在发送前编码所有字符（默认）

multipart/form-data 不对字符进行编码。在使用包含文件上传控件的表单时，必需使用该值！

text/plain 空格转换为 “+” 加号，但不对特殊字符编码

<form action="demo-post_enctype.php" method="post" enctype="multipart/form-data"><input type="file" name="fname"><br>  <input type="submit" value="提交"></form>

（三）accept 属性

accept 规定上传文件的类型，假如多个类型可以使用逗号隔开，例如：accept=”image/png,image/jpg”（这能上传png类型的图片）

accept 属性只能与 <input type=”file”> 配合使用。它规定能够通过文件上传进行提交的文件类型。

注意：请避免使用该属性。应该在服务器端验证文件上传。

（四）multiple 属性

file 文件上传 配合 multiple属性可以上传多个文件；

multiple 属性规定输入字段可选择多个值。

假如使用该属性，则字段可接受多个值。

注意：multiple 属性使用欧冠与以下 <input> 类型：email 和 file

十、日期在表单中的使用

（一）date 类型

date 取得日期，包括年月日。

1、使用mix和max定义开始和结束时间 如：min=”2030-02-02″

2、也可使用step属性设置步长（间隔几天才可以选中）

<input type="date" max='2030-02-02' min='2019-01-01' step='5'>

（二）datetime 类型

定义 date 和 time 控件，取得日期和时间，包括年、月、日、时、分、秒、几分之一秒。

（三）time 类型

取得时间，定义用于输入时间的控件（不带时区）。

（四）week 类型

week类型 取得年份和周数

（五）month 类型

month 类型 取得年和月

（六）datetime-local 类型

datetime-local 年月日时分秒

十一、搜索表单和datalist数据列表

（一）search 类型

search类型 可以定义搜索框，但需要input type=search外面包上一层带action属性的form。

（二）datalist 标签

<datalist> 标签规定了<input> 元素可能的选项列表。

<datalist> 为input 元素提供‘自动完成’的特性。客户能看到一个下拉列表，里面是预先定义好的内容。这些内容将作为客户输入的数据。

为 datalist 元素增加 id，其余 input 元素通过 list 属性指向 datalist 的id，从而绑定 datalist 元素

一对 option 标签中的是提醒文字，假如不想有提醒文字，可以将 option 变成单标签

<form action="demo-form.php" method="get"><input list="browsers" name="browser"><datalist id="browsers">  <option value="Internet Explorer">兼容性不好</option>> <option value="Firefox">  <option value="Chrome">  <option value="Opera">  <option value="Safari"></datalist><input type="submit"></form>

十二、表单历史数据自动提醒autocomplete

autocomplete属性

type=search 会有许多默认样式和行为，会默认下拉框显示历史搜索记录，在不同的浏览器或者是设施上会有不同显示效果。

autocomplete 属性规定表单能否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当客户在字段开始输入时，浏览器基于之前输入过的历史记录，显示出字段中填写的选项。

注意：除了 Opera，其余主流浏览器都支持 autocomplete 属性

注意：autocomplete “on” 适用于表单，”off” 适用于特定的输入字段，反之亦然。

属性值：

off 输入的时候没有历史提醒，规定禁用自动完成功能。客户必需在每次使用时输入值到每个字段中，浏览器不会自动完成输入

on 输入的时候会有历史提醒，默认。规定启用自动完成功能。浏览器会基于客户之前键入的值自动完成值

<form action="demo-form.php" method="get" autocomplete="on"> First name:<input type="text" name="fname"><br> E-mail: <input type="email" name="email"><br>  <input type="submit"></form>