2018-10-16

表单

表单

表单的作用

表单通常是用于需要收集用户输入的一些数据时，比如用户名密码、性别选项等等的时候。

表单的结构

表单的构成为一个表单区域（form）和若干表单元素（input）
表单区域：规定一个表单的范围，以及提交的地址方式等等，
表单元素：用于收集具体数据的标签元素，有许多不同的类型，主要学的是表单元素的功能。

---

<form>

<form action="" method="">
   <ul>
    <li>
      <input type="text" name="" />
  </li>
</ul>
</form>

概述

HTML <form> 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。
可以用 :valid 和:invalid CSS 伪类 来给一个元素指定样式。

属性

action提交地址
值：URL
这个值可以被 <button> 或者 <input> 元素中的 formaction 属性重载（覆盖）。

method 提交的方式
get：普通提交方式
post ：加密提交方式

• post: 指的是 HTTP post方法 ; 表单数据会包含在表单体内然后发送给服务器.
• get: 指的是 HTTP get方法; 表单数据会附加在 action 属性的URI中，并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做（数据暴露在URI里面）没什么副作用，或者表单仅包含ASCII字符时，再使用这种方法吧。

这个值可以被 <button> 或者 <input> 元素中的 formmethod属性重载（覆盖）。

autocapitalize

这是一个被 iOS Safari Mobile 使用的非标准属性。当用户在一些form的文本后代控件中，输入/编辑一些文本值时，这个属性控制了是否和怎样，对这些文本值首字母大写化。如果autocapitalize属性在某个单独的form后代控件被指定的话，那么这个单独的设定会干掉（原先）form范围内的 autocapitalize 设定. 这个非不推荐的值从 iOS 5 及其之后可用. 默认值为 sentences. 可以选择的值如下:

• none: 完全禁用自动首字母大写.
• sentences: 自动对每句话首字母大写.
• words: 自动对每个单词首字母大写.
• characters: 自动大写所有的字母.

autocomplete

用于指示 input 元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete 属性重载（覆盖）。 可能的值有:

• off: 在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。
• on: 浏览器能够根据用户之前在form里输入的值自动补全。
  注意
如果你在一个表单里把autocomplete设置成off是因为 document 提供了它独有的自动补全，那么你也应该把这个表单里每一个 input 元素的autocomplete设成off来让 document 能够自动补全. 想要了解详细信息, 参见 Google Chrome notes.

enctype

当 method 属性值为 post 时,enctype 是提交form给服务器的内容的 MIME 类型 。可能的取值有:

• application/x-www-form-urlencoded: 如果属性未指定时的默认值。
• multipart/form-data: 这个值用于一个 type 属性设置为 "file" 的 <input> 元素。
• text/plain

这个值可以被 <button> 或者 <input> 元素中的 formenctype属性重载（覆盖）。

novalidate

这个布尔类型的属性指示了，当提交时form是否没有被验证。 如果这个属性没有指定 (因此这个 form 是验证通过的)，这个默认设置可以被属于这个form的 <button> 或者 <input> 元素中的 formnovalidate属性重载（覆盖）。

target

一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复. 在 HTML 4 里, 这是一个用于 frame 的名字/关键字. 在 HTML5 里, 这是一个用于 browsing context 浏览器上下文 的名字/关键字 (举例来说, 标签页tab, 窗口window, or 或者行内 frame). 如下的关键字含有特别的含义:

• _self: 在当前HTML4或HTML5文档页面重新加载返回值。这个是默认值。译注：也就是说如果这个文档在一个frame中的话，self是在当前frame（document）中重新加载的，而不是整个页面（window）。
• _blank: 以新的HTML4或HTML5文档窗口加载返回值。
• _parent: 在父级的frame中以HTML4或HTML5文档形式加载返回值，如果没有父级的frame，行为和_self一致。
• _top: 如果是HTML 4文档: 清空当前文档，加载返回内容；HTML5: 在当前文档的最高级内加载返回值，如果没有父级，和_self的行为一致。
• iframename: 返回值在指定frame中加载。

HTML5: 这个值可以被 <button> 或者 <input> 元素中的 formtarget属性重载（覆盖）。

例子

<form action="">
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- 一个简单的表单，发送 POST 请求 -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- 使用 fieldset, legend, and label 的表单 -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

表单元素属性

• name
  指定表单元素的名字，对表单元素进行标识，与value属性的值进行对应。
• value
  value属性的值表示，收集并且需要发送数据值，可以主动设置，但大多数是用户动态进行修改的。

<input>

input是from表单里的一个表单项，可以通过不同的type值成为不同作用的表单元素

<input typle="text" value=""  name="usersname" />

input的type属性值

• text 单行文本输入框
• password 加密文本输入框
• radio 单选框
• checkbox 多选框
• submit 提交按钮
• button 普通按钮
• reset 重置按钮
• hidden 隐藏输入框
• file 文本选择框
• date 日期控件
• color 颜色控件

textarea

多行文本框

功能：创建一个多行文本输入框
属性：
cols：规定一行文本输入的最大字节（不标准）
rows：规定输入文本最大显示行数
css属性：
resize:none; 禁止改变大小

select>option

下拉列表
一种表单控件，可用于在表单中接受用户输入。

功能：创建一个下拉列表
属性：
cols：规定一行文本输入的最大字节（不标准）
rows：规定输入文本最大显示行数
mutiple：规定可以选择多个项
css属性：
resize:none; 禁止改变大小
结构展示

<select id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

特殊表单属性

• checked：默认选中该表单元素，用于单选框或者多选框
• placeholder：规定元素中默认显示的提示的内容，用于文本输入框
• autofocus：光标默认选中，用于文本输入框

lable标签

通过lable标签的for属性可以关联标记某些表单元素，使用户在使用鼠标操作时更加方便

<form action=””>

    <input type=”text”  value=”” id=”textID” />
    <label for=”textID”>点击输入文本</label>

    <input type=”checkbox”  value=”” id=”checkboxID”  />
    <label for=”radioID”>点击选中复选框</label>

</form>