1、表单简介

HTML 表单用于搜集不同类型的用户输入。
　　表单是一个包含表单元素的区域。表单元素包括：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。下面会对常见表单元素做逐一介绍。

２、表单标签

表单使用表单标签 <form> 来设置:

<form>·input 元素·</form>

３、表单元素

（1）输入元素—<input>标签

input标签的输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
1）文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
name: <input type="text" name="name">
</form> 

可以增加placeholder属性，在文本输入框中显示灰色提示文字，开始输入内容，提示文字会消失。

<form>
name: <input type="text" name="name" placeholder="请输入名字">
</form> 

2）密码字段通过标签<input type="password"> 来定义,密码字段字符不会明文显示，而是以星号或圆点替代。

<form>
Password: <input type="password" name="pwd">
</form> 

3）单选按钮（Radio）通过<input type="radio"> 标签定义了表单单选框选项。

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

4）复选框（Checkboxes）通过<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> 

5）上传文件框（file）通过<input type="file" >定义上传文件框，用户可以看到一个文件选择的窗口，通过点击“浏览”按钮选择文件。accept属性是指定浏览的文件类型。如下代码，则只能浏览选择git/png格式的图片文件。

<form>
<input type="file"  accept="image/gif,image/png"> 
</form> 

6）提交按钮

• submit类型

<input type="submit"> 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="test.html" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 

示例代码的执行是：在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "test.html" 的页面。该页面将显示出输入的结果。

• button类型
  <input type="button"> 只是定义显示提交按钮。当用户单击确认按钮时，表单的内容不会被提交传送。

• reset类型
  <input type="reset"> 定义清空按钮。当用户单击清空按钮时，input输入框内用户输入的内容都会被清空重置。

7）隐藏（hidden）通过<input type="hidden">来隐藏内容，在页面上该input不做显示。

<form>
<input type="hidden"  name="huangyh" value="name"> 
</form> 

示例代码的input在页面中并不会显示，但浏览器仍然会向后台传输name值和value值。

（2）注记元素—<label> 标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

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

 <form action="test.html">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="提交">
</form> 

（3）下拉选择元素—<select> 标签

<select> 元素用来创建下拉列表。<select> 元素是一种表单控件，可用于在表单中接受用户输入。<select> 元素中的 <option> 标签定义了列表中的可用选项。

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> 

（4）文本域—<textarea> 标签

<textarea> 标签定义一个多行的文本输入控件。用于输入大段文字段落。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

<form>
 <textarea rows="10" cols="30">
我是一个文本框。
</textarea> 
</form>

后记

以上为Form表单中常用常见的元素，整理以作记忆，也方便日后补充添加。