HTML經常使用表單標籤

1.表單元素 <form>

HTML 表單用於收集用戶輸入。

代碼示例：

<form action="http://xxx.xxx.xxx/xxx.php" method="get">
    <!--其餘表單標籤-->
</form>

經常使用屬性解釋：

action屬性定義在提交表單時執行的動做一般，表單會被提交到 web 服務器上的網頁。在上面的例子中，指定了某個服務器腳原本處理被提交表單.

method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）

2.輸入input

2.1 文本輸入框 <input type="text" />

建立一個最簡單的文本輸入框：

代碼示例：

<input type="text">

實際效果圖：

咱們能夠在這個文本框裏面輸入任意的數字、字符或符號

（1）建立一個帶有提示文字的文本輸入框：

代碼示例：

<input type="text" placeholder="請輸入你的姓名">

placeholder 屬性規定用以描述輸入字段預期值的提示,該提示會在用戶輸入值以前顯示在輸入字段中。
placeholder 屬性適用於如下輸入類型：text、search、url、tel、email 以及 password。

實際效果圖：

（2）建立一個帶有默認值的文本輸入框：

代碼示例：

<input type="text" value="hello">

value 屬性規定輸入字段的初始值。

實際效果圖：

（3）建立一個帶有默認值且不能修改的文本輸入框：

代碼示例：

<input type="text" value="hello" readonly>

readonly 屬性規定輸入字段爲只讀（不能修改）,readonly 屬性不須要值。它等同於 readonly="readonly"。

（4）建立一個禁用的文本輸入框：

<input type="text" value="" disabled />

實際效果圖：

disabled 屬性規定輸入字段是禁用的。被禁用的元素是不可用和不可點擊的。被禁用的元素不會被提交。disabled 屬性不須要值。它等同於 disabled="disabled"。

（5）建立限制輸入字數的文本輸入框：

代碼示例：

<input type="text" value="" maxlength="8" />

maxlength 屬性規定輸入字段容許的最大長度,如設置 maxlength 屬性，則輸入控件不會接受超過所容許數的字符。

如上代碼：咱們輸入超過8個文字後，再輸入任意的文字，文本輸入框都不會接收。

2.2密碼輸入框 <input type="password" />

建立一個密碼輸入框，代碼示例：

<input type="password" />

實際頁面效果：

密碼輸入框的本質仍是一個文本輸入框，只不過密碼輸入框在用戶輸入字段時，會自動的將輸入的文字用星號或實心圓替換，避免用戶密碼直接被其餘人看到。

備註：適用在文本輸入框上的屬性一樣也適用於密碼輸入框。

2.3單選按鈕 <input type="radio" />

單選輸入或單選按鈕，一般用與用戶從多個選項中選擇一個。

代碼示例：

<p>請選擇您的性別：</p>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女

實際效果圖：

注意事項：

• 同一組選項name屬性要保持一致
• 選定的選項在表單數據提交時提交的格式爲 nameVlaue:'selectVlaue'，如上代碼表單提交時提交的值：sex:male

2.3.1建立一個默認選中的單選按鈕

代碼示例：

<p>請選擇您的性別：</p>
<input type="radio" name="sex" value="male" checked />男
<input type="radio" name="sex" value="female" />女

checked 屬性規定按鈕是否默認選中狀態。checked 屬性不須要值。它等同於 checked="checked"。

2.4多選按鈕 <input type="checkbox" />

多選按鈕，用戶能夠從多個選項中選擇一個或多個

<input type="checkbox" name="vehicle" value="pen" />I have a pen
<br />
<input type="checkbox" name="vehicle" value="apple" />I have an apple

實際效果圖：

多選按鈕也能夠經過checked屬性設置多選按鈕爲默認選中狀態，多選的狀況下表單提交時，多選按鈕提交的值是用英文的逗號隔開的，例如如上表單在提交時， vehicle=pen&vehicle=apple

2.5.按鈕 Button

html中，按鈕一般分爲普通按鈕、提交按鈕、重置按鈕，其中提交和重置按鈕用於表單數據的提交和清空重置，通常放在form表單裏面，普通按鈕能夠隨意。

（1）普通按鈕<input type="button" />

代碼示例：

<input type="button" value="按鈕1" />

實際頁面效果：

value 屬性能夠設置按鈕上顯示的文字。按鈕能夠能夠經過disabled屬性來設置是否禁用。

（2）提交按鈕 <input type="submit" />

表單提交按鈕一般位於form表單內，點擊後，會將用戶輸入的數據提交到指定的地址去處理

代碼示例：

<form action="#" method="get">
    <input type="text" name="userName"  placeholder="請輸入用戶名" />
    <input type="password" name="passWord" placeholder="請輸入密碼"  />
    <input type="submit" value="提交" />
</form>

實際效果圖：

備註：

• 上述代碼使用的是get方式提交的輸入
• get方式提交數據時會在提交的目標URL地址後緊跟數據字段
• value、disabled屬性也適用於submit按鈕

（3）重置按鈕<input type="reset" />

重置（清空）按鈕一般用於用戶輸入表單數據後一鍵清空。也須要放在form表單內使用

代碼示例：

<form action="#" method="get">
    <input type="text" name="userName"  placeholder="請輸入用戶名" />
    <input type="password" name="passWord" placeholder="請輸入密碼"  />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
</form>

備註：value、disabled屬性也適用於reset按鈕

3.文本域<textarea></textarea>

文本輸入框<input type="text" />在用於字數很少的文本輸入時沒有什麼問題，可是當用戶須要輸入多行、多字數文本時，文本輸入框就會顯得很不友好。所以多行文本的輸入，咱們應該考慮使用文本域。

代碼示例：

<input type="text"/>
<br />
<br />
<textarea></textarea>

實際頁面效果：

文本域可容納無限數量的文本，但默認的文本域視覺大小比較小，能夠經過文本域右下角的「小三角」拖動來調節大小。也能夠經過cols和rows屬性來設置文本域的尺寸，可是cols屬性設置不太標準，最好的方法是經過CSS設置。

3.1設置裏默認大小的文本域

<textarea></textarea>
<textarea cols="30" rows="6"></textarea>

實際頁面效果：

rows 屬性用於設置文本域可見文本的行數。

cols 屬性用於設置文本域可見區域每行文字的個數，可是這個數量由於中英文差別不太標準。

此外，placeholder name maxlength disabled 屬性也適用於文本域。

4.下拉列表 <select></select>

下拉列表和無序列表相似，都是一種組合類型的標籤，一般用於省市區的選擇。

代碼示例：

<span>所在城市：</span>
<select name="city">
    <option value="nanjin">南京</option>
    <option value="hangzhou">杭州</option>
    <option value="shanghai">上海</option>
    <option value="hefei">合肥</option>
</select>

實際頁面效果：

4.2默認選中某一項

默認的下拉列表選中的是第一項，若是須要指定其餘選項，能夠經過selected屬性設置.

代碼示例：

<span>所在城市：</span>
<select name="city">
    <option value="nanjin">南京</option>
    <option value="hangzhou">杭州</option>
    <option value="shanghai" selected>上海</option>
    <option value="hefei">合肥</option>
</select>

實際頁面效果：