表單格式
<form>
所有的表單內(nèi)容参淹，都要寫在form標(biāo)簽里面
</form>
- 表單元素本身是指
<form>，不過它也有一個(gè)更廣泛的概念乏悄，指構(gòu)成表單的所有元素.
-
<form>主要有兩個(gè)屬性浙值，分別是action和method，action表示表單數(shù)據(jù)所提交到的處理地址檩小，method表示提交內(nèi)容的方式开呐，默認(rèn)為 get，可以設(shè)置為 post.
表單元素的通用屬性
| 屬性名稱 |
作用 |
name |
表示字段名稱 |
value |
表示設(shè)置默認(rèn)字段值（最后提交的表單數(shù)據(jù)就是所有的字段值） |
disabled |
表示字段是否禁用规求，該屬性可以不用設(shè)置值筐付，加上該屬性即表示禁用 |
readonly |
表示字段是否只讀，該屬性可以不用設(shè)置值阻肿，加上該屬性即表示只讀 |
更多可參考：
Input元素
<!-- 文本輸入框 -->
<input type="text" name="username">
<!-- 文本輸入框提示信息 -->
<input type="text" name="username" placeholder="用戶名">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索">
<!-- 數(shù)字輸入框 -->
<input type="number" name="age" placeholder="只能輸入數(shù)字">
<!-- 密碼輸入框 -->
<input type="password" name="pwd" placeholder="密碼">
<!-- 單選框 -->
<input type="radio" name="sex" value="man">男
<!-- 復(fù)選框 -->
<input type="checkbox" name="hobby" value="music">音樂
<!-- 隱藏域 -->
<input type="hidden" name="other-data" value="用戶不可見數(shù)據(jù)">
<!-- 上傳文件 -->
<input type="file" name="file">
<!-- 普通按鈕 -->
<input type="button" name="button" value="普通按鈕">
<!-- 提交按鈕 -->
<input type="submit" name="submit" value="立即加入">
<!-- 重置按鈕 -->
<input type="reset" name="reset">
<input>跟<img>一樣瓦戚，無需閉合標(biāo)簽.<input>除通用屬性外，還有其常見屬性type與placeholder.- 當(dāng)是一個(gè)輸入框時(shí)冕茅，可設(shè)置
placeholder伤极，在輸入框中灰色顯示提示信息.
| Input屬性Type常用的值 |
作用 |
| text |
文本輸入框 |
| password |
密碼輸入框 |
| search |
搜索框 |
| number |
數(shù)字輸入框 |
| radio |
單選按鈕，必須要有相同的name屬性
|
| checkbox |
復(fù)選框姨伤，必須要有相同的name屬性
|
| thidden |
隱藏域 |
| file |
上傳文件 |
| button |
普通按鈕 |
| submit |
提交按鈕 |
| reset |
重置按鈕 |
更多 input 請(qǐng)參考：
Textarea元素
<textarea rows="5" cols="30" placeholder="請(qǐng)輸入評(píng)論"></textarea>
- 用于多行文本輸入哨坪，可通過
cols 和 rows 屬性來規(guī)定 <textarea> 的尺寸，不過等我們學(xué)了 CSS 之后乍楚，更好的辦法是使用 CSS 的 height 和 width 屬性來控制其尺寸.
cols(columns)屬性表示“列”当编， 規(guī)定文本區(qū)內(nèi)的可見寬度. rows屬性表示“行”, 規(guī)定文本區(qū)內(nèi)的可見行數(shù).
更多 textarea 請(qǐng)參考：
Select元素
<!-- 單選且有默認(rèn)選中值 -->
<select name="tag">
<option value="html" selected>HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
<!-- 多選 -->
<select name="tags" multiple="multiple">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
- 用于創(chuàng)建選項(xiàng)菜單，默認(rèn)只能選擇一個(gè)值徒溪，可通過設(shè)置屬性
multiple="multiple"來實(shí)現(xiàn)多選（很少很少使用多選）.
- 其選項(xiàng)為
<option>元素忿偷，常用有兩個(gè)屬性value、selected臊泌，分別表示選中該選項(xiàng)的值與默認(rèn)選中.
<select>
<optgroup label="北京市">
<option>海淀區(qū)</option>
<option>昌平區(qū)</option>
<option>朝陽區(qū)</option>
</optgroup>
<optgroup label="廣州市">
<option>天河區(qū)</option>
<option>白云區(qū)</option>
</optgroup>
<option selected="selected">貴州</option>
</select>
- 可以用
<optgroup>元素來進(jìn)行分組.
更多 select 請(qǐng)參考：
button元素
<button>我是個(gè)普通按鈕</button>
<!-- 下面的兩種方式不建議使用 -->
<button type="submit">提交按鈕</button>
<button type="reset">重置按鈕</button>
<button>元素用來定義按鈕鲤桥，跟 input 定義的按鈕不同，這個(gè)是有閉合標(biāo)簽的. 也可以通過設(shè)置 type 屬性來實(shí)現(xiàn)提交按鈕和重置按鈕渠概，不過不建議這么做茶凳。
更多 button 請(qǐng)參考：
Label元素
<!-- 包裹表單元素 -->
<label>用戶名：<input type="text"></label>
<!-- 使用for屬性關(guān)聯(lián)表單元素的id屬性 -->
<label for="username">用戶名：</label><input type="text" id="username">
<label>元素用于關(guān)聯(lián)表單元素的標(biāo)題嫂拴，可直接包裹表單元素，也可以通過設(shè)置其 for 屬性關(guān)聯(lián)到表單元素的 id 屬性贮喧，這樣點(diǎn)擊 label 標(biāo)題上關(guān)聯(lián)的表單元素就可以自動(dòng)獲取焦點(diǎn)筒狠，提升用戶體驗(yàn).
更多 label 請(qǐng)參考：
更多參考
更多關(guān)于表單元素知識(shí)請(qǐng)參考：HTML5中的表單元素
