前言：
form表单是一个网页很重要的组成部分，它具有可供用户填写、选择、上传信息并把这些信息集中起来交由代后台服务器处理的作用。
一，<form> 标签
<form action="##" method="post">
<label for="uname">名字:</label>
<input type="text" name="uname" id="uname" >
</form>
<form> 标签于用于创建HTML 表单，如代码上一样始终包含文本字段、复选框、单选框、提交按钮等等，以便把所填写的信息递交给后台服务器。
| 主要属性 | 主要的值 | 功能 |
|---|---|---|
| action | * url* | 规定当提交表单时向何处发送表单数据。 |
| method | post，get | 规定以何种方式向action的值发送请求. |
| name | form_name | 规定表单的名字。 |
二，<label>标签
<form action="#" method="post">
<label for="uname">名字:</label>
<input type="text" name="uname" id="uname" >
</form>
<label> 标签为 input 元素定义标注（标记），为它设置for属性，当鼠标点击它的时候，相应的input元素表单控件自动获取焦点。
| 主要属性 | 主要的值 | 功能 |
|---|---|---|
| for | id | 规定 label 绑定到哪个表单元素。 |
| form | formid | 规定 formid绑定到哪个表单元素。 |
三，<input>标签
<form action="##" method="post">
<div>
<label for="uname">名字:</label>
<input type="text" name="uname" id="uname" placeholder="请输入您的名字">
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请输入您的密码">
</div>
<div>
<label>性别:</label>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女
</div>
<div>
<label>取向：</label>
<input type="radio" name="uso" value="男" >男
<input type="radio" name="uso" value="女" >女
<input type="radio" name="uso" value="男&女" >男&女
<div>
<label>爱好：</label>
<input type="checkbox" name="hobby" value="hy1" >吃饭
<input type="checkbox" name="hobby" value="hy2" >睡觉
<input type="checkbox" name="hobby" value="hy3" >打豆豆
</div>
<div>
<label for="uword">请上传您的文章:</label>
<input type="file" name="word">
</div>
</form>
效果如下图：
| 主要属性 | 主要的值 | 功能 |
|---|---|---|
| type | button，checkbox，file，hidden，image，password，radio，reset，submit，text | 规定 input的形态如文本域，密码域等 |
| placeholder | text | 可描述输入字段预期值的提示信息 |
| value | value | 规定 input 元素的值 |
| name | name | 元素的名称 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
<input>标签是form表单最重要的标签，它的type属性可以让它变成各种形态。
| 主要属性 | 主要的值 | 功能 |
|---|---|---|
| type | button，checkbox，file，hidden，image，password，radio，reset，submit，text | 规定 input的形态如文本域，密码域等 |
| placeholder | text | 可描述输入字段预期值的提示信息 |
| value | value | 规定 input 元素的值 |
| name | name | 元素的名称 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
四，<select>标签，<option>标签
<form action="##" method="post">
<select name="car">
<option value="宝马">宝马</option>
<option value="奔驰" selected="selected">奔驰</option>
<option value="法拉利">法拉利</option>
</select>
</form>
效果如下图：
用<select>标签创建下拉列表，<option>标签创建的选择项。
1.<select>标签：
| 主要属性 | 主要的值 | 功能 |
|---|---|---|
| name | name | 规定下拉列表的名称。 |
| size | number | 规定下拉列表的可以见数量 |
| multiple | multiple | 规定可选择多个选项。 |
2.<option>标签：
| 主要属性 | 主要的值 | 功能 |
|---|---|---|
| value | text | 定义送往服务器的选项值 |
| selected | selected | 默认被选中的值 |
五， <textarea> 标签
<form action="##" method="post">
<label>评论：</label>
<textarea placeholder="请输入您评论"></textarea>
</form>
效果如下图：
| 主要属性 | 主要的值 | 功能 |
|---|---|---|
| name | name_of_textarea | 规定文本区的名称 |
| readonly | readonly | 规定文本区为只读 |
| maxlength | number | 规定文本区域的最大长度（以字符计） |
| placeholder | text | 规定描述文本区域预期值的简短提示 |
用<textarea>标签创建多行输入框，标签对中的字符会默认出现。
| 主要属性 | 主要的值 | 功能 |
|---|---|---|
| name | name_of_textarea | 规定文本区的名称 |
| readonly | readonly | 规定文本区为只读 |
| maxlength | number | 规定文本区域的最大长度（以字符计） |
| placeholder | text | 规定描述文本区域预期值的简短提示 |
六，按钮
<form action="##" method="get">
<div>
<label for="uname">名字:</label>
<input type="text" name="uname" id="uname" >
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" id="password" >
</div>
<button>提交</button>
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
效果如下图：
<button>和 <input type="submit">都可创建提交按钮，按下即可提交同在一form表单内的数据， <input type="reset">可创建清空按钮，按下即可清空同在一form表单内的数据（预设的value值无法清空）
