关于前端:前端学习笔记一一HTML表单标签form

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>