Study 4 —— 表單標籤

時間 2019-11-07

標籤 study 表單標籤欄目 HTML 简体版

原文原文鏈接

表單：用於採集瀏覽者的相關數據。
表單標記<form></form>
表單的基本語法格式以下：

<form action="url" method="get | post" enctype="mime"></form>

其中，action指定處理提交表單的格式，能夠是URL地址或電子郵件地址；
method指明提交表單的HTTP方法；
enctype指明用來把表單提交給服務器時的互聯網媒體形式。

表單的基本元素
表單元素是可以讓用戶在表單中輸入信息的元素，常見的有文本框，密碼框，下拉菜單，單選框，複選框等。
1. 單行文本輸入框text

<input type="text" name="..." size="..." maxlength="..." value="單行文本輸入框">

其中，type="text"定義單行文本輸入框；
name屬性定義文本框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
size屬性定義文本框的寬度，單位是單個字符寬度；
maxlength屬性定義最多輸入的字符數；
value屬性定義文本框的初始值。

2. 多行文本框標記<textarea>

<textarea name="..." cols="..." rows="..." wrap="..."></textarea>

其中cols屬性定義多行文本框的寬度，單位是單個字符寬度；
rows屬性定義多行文本框的高度，單位是單個字符寬度；
wrap屬性定義輸入內容大於文本域時顯示的方式。

3. 密碼域password

<input type="password" name="..." size="..." maxlength="...">


4. 單選按鈕radio

<input type="radio" name="..." value="...">

name屬性定義單選按鈕的名稱，單選按鈕都是以組爲單位使用的，在用一組中的單選項都必須用同一名稱；
value屬性定義單選按鈕的值，在同一組中它們的域值必須是不一樣的。

5. 複選框checkbox

<input type="checkbox" name="..." value="...">


6. 選擇列表標記<select>
下拉選擇框主要用於在有限的空間裏設置多個選項，它既能夠用做單選，也能夠用做多選。

<select name="..." size="..." multiple>
<option value="..." selected>...</option>
...
</select>

其中，size屬性定義選擇列表的行數；
multiple屬性表示能夠多選，不設置即爲單選；
selected屬性表示默認已經選擇本選項。

7. 普通按鈕button

<input type="button" name="..." value="..." onclick="...">

onclick屬性表示單擊行爲，也能夠經過指定腳本函數來定義按鈕的行爲。
value屬性定義按鈕的顯示文字。

8. 提交按鈕submit

<input type="submit" name="..." value="...">


9. 重置按鈕reset
用於清空表單中輸入的信息。

<input type="reset" name="..." value="...">


10. url屬性
url屬性用於說明網站網址，顯示爲在一個文本框中輸入URL地址。在提交表單時會自動驗證url的值。

<input type="url" name="userurl">


11. email屬性
與url屬性相似，email屬性用於讓瀏覽者輸入E-mail地址。在提交表單時會自動驗證email域的值。

<input type="email" name="user_email">


12. date和Times
HTML5新增了一些日期和時間輸入類型，其中包括：date、datetime、datetime-local、month、week和time
日期和時間輸入類型

屬性                  含義
date                 選取日、月、年
month                選取月、年
week                 選取周和年
time                 選取時間
datetime             選取時間、日、月、年
datetime-local       選取時間、日、月、年（本地時間）

以date屬性爲例，代碼格式入下：

<input type="date" name="user_date">


13. number屬性
number屬性提供了一個輸入數字的輸入類型。用戶能夠直接輸入數字或者經過單擊微調框中的按鈕選擇數字。

<input type="number" name="shuzi">

另外，min和max屬性能夠規定輸入數字的最小值和最大值。

14. range屬性
顯示一個滾動範圍控件

<input type="range" name="..." min="..." max="...">


15. required屬性
required屬性規定必須在提交以前填寫輸入域（不能爲空）。
required屬性適用於如下類型的輸入屬性：
text、search、url、email、password、date、pickers、number、checkbox和redio等。

<input type="text" name="user" required="required">


綜合實例 —— 建立用戶反饋表單

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用戶反饋單</title>
</head>
<body>
<form>
<h1>用戶反饋表單</h1>
<p>姓  名：<input type="text" name="name" size="12" maxlength="20"/><br></p>
<p>性  別：<input type="radio" name="sex" value="male"/>男
                     <input type="radio" name="sex" value="female"/>女<br></p>
<p>年  齡：<input type="number" name="age"/><br></p>
<p>聯繫電話：<input type="text" name="tel"/><br></p>
<p>電子郵件：<input type="email" name="email"/><br></p>
<p>聯繫地址：<input type="text" name="site"/></p>
<p>請輸入您對網站的建議：<br>
<textarea name="suggest" cols="32" rows="8"></textarea>
</p>
<p>
<input type="submit" name="submit" value="提交"/> 
<input type="reset" name="clear" value="清空"/>
</p>
</form>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。