概述:
- <form> 標簽用于為用戶輸入創(chuàng)建 HTML 表單.
- 表單用于向服務(wù)器傳輸數(shù)據(jù).
- 表單能夠包含input 元素萄传，比如文本字段甚颂、復(fù)選框、單選框秀菱、提交按鈕等等振诬。表單還可以包含textarea、fieldset衍菱、 legend 和 label 元素等赶么。
- 表單使用表單標簽 <form> 來設(shè)置:
<form>·input 元素·</form>
表單元素
1.輸入元素: <input>標簽
定義和用法:
input標簽用于收集用戶信息.根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式脊串。輸入字段可以是文本字段辫呻、復(fù)選框、掩碼后的文本控件琼锋、單選按鈕放闺、按鈕等等。常用標簽有:
- <strong><input type="text"> 文本域</strong>.用戶可以在文本域?qū)懭胛谋尽?/li>
<form>
名：
<input type="text" name="firstname">
<br />
姓：
<input type="text" name="lastname">
</form>
可以增加placeholder屬性缕坎，在文本輸入框中顯示灰色提示文字雄人，開始輸入內(nèi)容，提示文字會消失念赶。
<form>
name: <input type="text" name="name" placeholder="please enter your name">
</form>
- <strong><input type="password">密碼域</strong>.密碼字段字符不會明文顯示，而是以星號或圓點替代恰力。
<form>
用戶：
<input type="text" name="user">
<br />
密碼：
<input type="password" name="password">
</form>
- <strong><input type="checkbox">復(fù)選框</strong>.可以多項選擇.
<form>
我喜歡自行車：
<input type="checkbox" name="Bike">
<br />
我喜歡汽車：
<input type="checkbox" name="Car">
</form>
<strong><input type="radio">單選按鈕</strong>.單向勾選時.
<form>
男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</form>
注意:
- 同一組的input,要采用相同的name,才能達到單選的效果
- 如某項input為check="checked" , 則該項初始狀態(tài)時為被選中的那個.
- 提交按鈕
submit類型
<input type="submit"> 定義了提交按鈕叉谜。當用戶單擊確認按鈕時，表單的內(nèi)容會被傳送到另一個文件踩萎。表單的動作屬性定義了目的文件的文件名停局。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關(guān)的處理。
<form name="input" action="test.html" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
示例代碼的執(zhí)行是：在上面的文本框內(nèi)鍵入幾個字母，然后點擊確認按鈕董栽，那么輸入數(shù)據(jù)會傳送到 "test.html" 的頁面码倦。該頁面將顯示出輸入的結(jié)果。
button類型
<input type="button"> 只是定義顯示提交按鈕锭碳。當用戶單擊確認按鈕時袁稽，表單的內(nèi)容不會被提交傳送。
reset類型
<input type="reset"> 定義清空按鈕擒抛。當用戶單擊清空按鈕時推汽，input輸入框內(nèi)用戶輸入的內(nèi)容都會被清空重置。
2.注記元素—<label> 標簽
<label> 標簽為 input 元素定義標注.
label 元素不會向用戶呈現(xiàn)任何特殊效果歧沪。不過歹撒，它為鼠標用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本诊胞，就會觸發(fā)此控件暖夭。就是說，當用戶選擇該標簽時撵孤，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上迈着。
注意：<label> 標簽的 for 屬性應(yīng)當與相關(guān)元素的 id 屬性相同。使用"for"時,點擊label內(nèi)容會自動進入對應(yīng)屬性輸入框.
<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> 元素用來創(chuàng)建下拉列表早直。<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> 標簽定義一個多行的文本輸入控件糕韧。用于輸入大段文字段落。文本區(qū)域中可容納無限數(shù)量的文本喻圃，其中的文本的默認字體是等寬字體（通常是 Courier）萤彩。可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸大小斧拍，<strong>不過更好的辦法是使用 CSS 的 height 和 width 屬性雀扶。</strong>
<form>
<textarea rows="10" cols="30">
我是一個文本框。
</textarea>
</form>
參考:
http://www.w3school.com.cn/tags/tag_form.asp
http://www.reibang.com/p/9dad5c004002
