6-HTML< form>表单标签和属性

一.什么是< form>表单

• 格式：

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

• 作用：
  form表单一般用来收集用户的信息，并把信息传送到后台。
• 注意点：
  1.在浏览器中所有表单标签都有特殊的外观和默认功能格式。
  2.表单能够包含input标签,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含非input 标签 menus textarea fieldset legend label 等。

---

二.< form>标签

• 格式：

<form name="myForm" action="form_action.asp" method="get"></form>

• 作用：
  <form> 标签用于为用户输入创建 HTML 表单。
• 常用属性：
  name: 表单提交时的名称
  action: 提交到的地址
  method: 规定用于发送 form-data 的 HTTP 方法，提交方式：get和post
  enctype:规定在发送表单数据之前如何对其进行编码
• application/x-www-form-urlencoded：在发送前编码所有字符（默认）
• text/plain：空格转换为 "+" 加号，但不对特殊字符编码
• multipart/form-data：使用包含文件上传控件的表单时，必须使用该值

---

三.表单提交方式method取值post 和 get 的区别

1.get提交可以在url中看到提交信息，post则是提交到后台。
2.get通常用于提交少量数据得到大量数据，一般用于获取查询信息，比如搜索。post则相反，一般用于更新资源信息，上传数据然后得到回馈信息，如提交博客。
3.get提交的数据一般受浏览器的限制，大小在1kb字节以内。post理论上大小无限制，只受服务器的性能限制。
4.get请求的数据会保留在浏览器历史记录中，安全性不好，所以信息提交一般使用post。

---

四.表单中的< input>标签

• 格式：

<input name="username" type="text" placeholder="用户名" maxlength=10 value=123/> 

• 作用：
  <input>标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
• < input>常用属性:

属性	取值	作用
name	---	定义 input 元素的名称
type	button/checkbox/file hidden/image/password radio/reset/submit/text	规定 input 元素的类型
checked	checked	加checked属性会默认选上
placeholder	---	用于在输入框中显示提示信息。输入文字时消失，不会被提交
maxlength	number	规定输入字段中的字符的最大长度
value	---	规定 input 元素的值
disabled	disabled	当 input 元素加载时禁用此元素,就是禁止输入
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"）

• 注意点：
  1.<input>都要有name属性,用于向提交到后台的信息进行命名，若无name则后台会自动忽略该条信息。
  2.action提交地址若不填写则会直接提交到当前页面。
  3.所有的<input>可以添加属性 disabled来禁用输入。
  4.<input>中除了提交按钮和重置按钮所有标签都可以添加value属性。用来指定将来提交到服务器的值。
  更多属性请查阅w3c

---

五.< input>常用type类型：

• 给< input>标签添加不同的type属性取值可以让< input>有多种类型，结合起来可以组成一个<form>表单。

---

1. type="text"：文本输入框，用于文本输入。
   格式：

<input name="username" type="text" placeholder="用户名" maxlength=10 /> 

注意点：
标签中添加value属性可以用来给输入框设置默认文本。

2. type="password"：密码输入框，输入时显示星号。
   格式：

<input name="password" type="password" placeholder="密码" />

注意点：
标签中添加value属性可以用来给输入框设置默认密码。

3. type="radio" : 单选圆圈按钮，name要相同才能实现单选，value要有值
   格式：

<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女

注意点：
若想默认单选其中一个，可以在标签中添加checked属性。

4. type="checkbox" ：多选框，加checked属性会默认选上。提交时，如果选中（如bike），则bike=on
   格式：

<input type="checkbox" name="bike" checked/>自行车
<input type="checkbox" name="car" />汽车

注意点：
多选框中一般必须填写每一个选项的name可以把name设置为同一个名字，然后分别设置不同的value值时

5. type="submit"： 提交按钮 用于提交填好的信息
   格式：

 <input type="submit" value="提交" />

注意点：
form表单有另一种设置提交按钮的方式，即在form中使用button标签，这个按钮放在 form 中也会点击自动提交，提交的内容不光可以有文字，还可以有图片等多媒体内容，缺点是不同的浏览器得到的value值不一样，可能还会有其他的兼容问题。
格式：

  <button type="submit">提交</button>

6. type="reset"： 重置按钮 用于清空表单中的数据。
   格式：

 <input type="reset" value="重置" />

注意点：
重置按钮上的文字默认为"重置" ，若想改变文字可以通过value修改。

7. type="button"：按钮
   格式：

 <input type="button" value="按钮上的文字" />

注意点：
可以通过value给按钮制定标题，通常配合JS使用。

8. type="hidden"： 隐藏域 用户看不到，用于暂存数据。或者安全性校验
   格式：

 <input name="url_delete" type="hidden" value="/delete.php" />
<input name="csrf_token" type="hidden" value="a23dafd23444" />

---

六.type="hidden"：隐藏域的作用

• 1.隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
• 2.有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，．而且不会有浏览器不支持，用户禁用cookie的烦恼。
• 3.有些时候一个form里有多个提交按钮，如需使程序能够分清楚到底用户是按那一个按钮提交上来的，我们就可以写一个隐藏域，然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
• 4.有时候一个网页中有多个form，但多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
• 5.javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
• 例子:
  比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。

---

七.表单中的其它标签

• < textarea>标签 文本域
  格式：

<textarea name="maneywords" maxlength=10 placeholder="ddd"></textarea>

作用：
文本域 用于输入多行文本。
注意点：
1.默认情况下输入框可以无限换行，输入框有自己的宽度和高度。
2.默认情况下输入框可以手动拉伸。
3.可以给< textarea>标签添加cols和rows属性来定义宽度和高度。
例< textarea cols="2" rows="3">

• < select>标签 下拉列表
  格式：

<select name="mycar"> 
<option value ="volvo">Volvo</option>
 <option value ="saab">Saab</option> 
<option value="opel">Opel</option>
 <option value="audi" selected>Audi</option> 
</select>

作用：
用于定义下拉列表。
注意点：
1.下拉列表不能输入，但是可以选择，也可以设置默认选项。
2.可以使用< optgroup>标签把下拉列表进行分组，类似建立一个列表。格式如下：

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

• <lable>标签 聚焦
  格式：

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

<form>
  <label for="acc123">账号:</label>
  <input type="text" name="account" id="acc123" />
</form>

作用：
<label> 标签为input 元素定义标注（标记）。在 label元素内点击文本，就会触发此控件。就是说，当用户选择label 元素内包裹的文本，浏览器就会自动将焦点转到和该文本相关的表单控件（输入框等）上。
注意点：
1.使用步骤：将文本用<label> 标签包裹起来，给文本相关的表单控件绑定的（输入框等）设置一个id名。最后在<label> 标签中设置for属性的值为id。
2.另一种聚焦格式，不过此种格式只能设置文本与表单控件单独在一行的时候，有很大的局限性。格式如下：

<label>
  账号:<input type="text" name="account" id="acc123" />
</label>

• <datalist>标签 待选项
  格式：

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

作用：
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。就是说给输入框绑定待选项。
注意点：
一般直接在<input>标签中用list属性绑定。

• type中的一些参数设定可检验输入框中输入的内容是否符合格式，不过部分浏览器不支持，特别是ie全部不支持。例如：

邮箱 <input type="email">
域名 <input type="url">
电话 <input type="number">
日历 <input type="date pickers">
搜索 <input type="search">
范围 <input type="range">
颜色 <input type="color">

---

*** 此文章著作权由饥人谷_刘冲和饥人谷(QQ 群: 222459918) 所有。转载须说明来源。***