一、HTML表單
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如:文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等,表單使用表單標簽 <form> 來設置。
常見表單元素如下:
<form>
input 輸入元素
option 下拉列表
textarea 文本域
submit 提交按鈕
button 按鈕
..
其他非輸入元素
..
</form>
二、HTML 表單 - input輸入元素
多數情況下被用到的表單標簽是輸入標簽(<input>)。
輸入類型是由類型屬性(type)定義的。大多數經常被用到的輸入類型如下:
1. 文本域
文本域通過<input type="text"> 標簽來設定,當用戶要在表單中鍵入字母、數字等內容時,就會用到文本域。
<form action="/abc" method="post">
First name:<input type="text" name="firstname">
Last name:<input type="text" name="lastname">
</form>
注意:表單本身并不可見。同時,在大多數瀏覽器中,文本域的缺省寬度是20個字符。
2. 密碼字段
密碼字段通過標簽<input type="password"> 來定義。
<form action="/abc" method="post">
Password: <input type="password" name="pwd">
</form>
注意:密碼字段字符不會明文顯示,而是以星號或圓點替代,視瀏覽器而定到底顯示什么。
3. 單選按鈕
<input type="radio"> 標簽定義了表單單選框選項。
<form action="/abc" method="post">
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</form>
4. 復選框
<input type="checkbox"> 定義了復選框。用戶需要從若干給定的選擇中選取一個或若干選項。
<form action="/abc" method="post">
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
5. 提交按鈕
<input type="submit"> 定義了提交按鈕。當用戶單擊確認按鈕時,表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:
<form action="/abc" method="post">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
三、HTML 表單 - 非input輸入元素
1. 多行文本
<textarea> 標簽定義一個多行的文本輸入控件。
文本區域中可容納無限數量的文本,其中的文本的默認字體是等寬字體(通常是 Courier)。
可以通過 cols 和 rows 屬性來規定 textarea 的尺寸大小,不過更好的辦法是使用 CSS 的 height 和 width 屬性。
<form action="/abc" method="post">
<textarea name="article">
此處是多行文本區...
</textarea>
</form>
2. 按鈕
<button> 標簽定義一個按鈕。
在 <button> 元素內部,您可以放置內容,比如文本或圖像。這是該元素與使用 <input> 元素創建的按鈕之間的不同之處。
提示:請始終為 <button> 元素規定 type 屬性。不同的瀏覽器對 <button> 元素的 type 屬性使用不同的默認值。
<form action="/abc" method="post">
用戶名:<inputtype="text" name="Username">
<button>提交</button>
</form>
請始終為按鈕規定 type 屬性。
Internet Explorer 的默認類型是 "button",而其他瀏覽器中(包括 W3C 規范)的默認值是 "submit"。
不推薦在HTML表單里用<button>作為提交按鈕。
3. 下拉菜單
用select和option共同組成下拉菜單。<select> 元素用來創建下拉列表,<select> 元素中的<option>標簽定義了列表中的可用選項。
提示:
- <select> 元素是一種表單控件,可用于在表單中接受用戶輸入。
- <option> 標簽可以在不帶有任何屬性的情況下使用,但是通常需要使用 value 屬性,此屬性會指示出被送往服務器的內容。
- 務必與 select 元素配合使用此標簽,否則這個標簽是沒有意義的。
<form action="/abc" method="post">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</form>