表单学习（1）

“表单”是html中比较重要的一个知识点，它同时也涉及了大量地css和JavaScript相关的知识，所以决定好好学习一下。

1. 概念

表单由一个或多个按钮，复选框等小部件组成，用户可以通过操作表单向服务器发送数据，实现了用户与服务器的交互

---

2. 表单的重要元素之<form>

<form>元素设定了一个可以包含交互控制元件的区域。

2.1 属性（几个常用的）

• action：值为一个url，用来设定该表单提交时，向（服务器）何处发送数据。这个属性可以被<input>或<button>中的formaction属性覆盖。

• autocomplete：html5新增属性。用来设置浏览器是否要自动补全input。可以被子元素的autocomplete属性覆盖。
  有两个值：off 和 on。为on时，浏览器能够根据用户之前在表单里输入的值自动补全。为off时，用户必须在每一个input都输入一个值（或者文档自带补全的办法），浏览器不会自动补全。
  

  image.png
  设置为“on”时效果如上，就是没有输入时选中输入框，会出现一个下拉列表显示你输入过的所有数据，有输入时会自动匹配，显示你输入过的数据

• enctype：该属性要结合method属性使用。当method属性的值为POST时，该属性设定了表单要提交给服务器的内容的MIME类型（就是互联网媒体类型，比如audio，video，text啥的）。
  可能的取值：

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

此值可以被 <button> 或者<input>元素中的 formenctype 属性覆盖。

• method：这个属性可能的值有：
  post：指HTTP的POST方法。表单的数据会包含在表单体内发送给服务器。
  get：指HTTP的GET方法。表单的数据会放在action属性的url里面，以查询参数的形式发送给服务器。这种方法会使数据完全暴露在url中。
  dialog: 将表单放在一个<dialog></dialog>里面，当提交表单时会自动关闭dialog
  这个属性也能被<button>,<input type="submit">,<input type="image">元素中的formmethod属性覆盖。

• target：用来设置表单提交后，在哪里显示收到的回复，有以下可能值：
  _self: 自己本身（当前窗口）
  _parent: 父窗口
  _top: 顶级窗口（有时候顶级窗口和父窗口是同一个）
  _blank: 一个新的窗口
  iframename：指定一个iframe的名字
  是的，它也可以被<button> 或者<input>元素中的 formtarget 属性覆盖

2.2 一些注意与延伸

2.2.1 <form>里面不能包含<form>

2.2.2 <fieldset>和<legend>

<fieldset>标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。
他有三个属性：

• disabled：布尔属性，一旦设置会使得<fieldset>内部包含的控件都不可用，都变成灰色状态。
• form：指定控件组所属的<form>，它的值等于<form>的id属性。
• 该控件组的名称。（不是user看到的那个名称）
  <legend>来标记该控件组的标题

<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio">
    <label for="radio">Click me</label>
  </fieldset>
</form>

实现的效果：

来自MDN