HTML 表單用于收集用戶的輸入信息，表示文檔中的一個(gè)區(qū)域，此區(qū)域包含交互控件，將用戶收集到的信息發(fā)送到 Web 服務(wù)器。
表單是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容，比如：文本域（textarea）、下拉列表（select）、單選框（radio-buttons）、復(fù)選框（checkbox） 等等。
我們可以使用 <form> 標(biāo)簽來創(chuàng)建表單:
<form>
.
input 元素
.
</form>
表單屬性
- action=“url地址” ： 數(shù)據(jù)要傳送到的地方
- method=“提交方式”： 有g(shù)et和post可以選擇
- name=“表單域名稱”： 定義一個(gè)名字
表單標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <form> | 定義供用戶輸入的表單 |
| <input> | 定義輸入域 |
| <textarea> | 定義文本域 (一個(gè)多行的輸入控件) |
| <label> | 定義了 <input> 元素的標(biāo)簽，一般為輸入標(biāo)題 |
| <fieldset> | 定義了一組相關(guān)的表單元素，并使用外框包含起來 |
| <legend> | 定義了 <fieldset> 元素的標(biāo)題 |
| <select> | 定義了下拉選項(xiàng)列表 |
| <optgroup> | 定義選項(xiàng)組 |
| <option> | 定義下拉列表中的選項(xiàng) |
| <button> | 定義一個(gè)點(diǎn)擊按鈕 |
| <datalist> | 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表 |
| <keygen> | 定義了表單的密鑰對(duì)生成器字段 |
| <output> | 定義一個(gè)計(jì)算結(jié)果 |
輸入元素
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽 <input>。
文本域（Text Fields）
文本域通過 <input type=“text”> 標(biāo)簽來設(shè)定，當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。
<form>
用戶名: <input type="text" name="username"><br>
密碼: <input type="text" name="password">
</form>
可以用 placeholder=”默認(rèn)提示“ 輸入時(shí)直接消失
注意： 在大多數(shù)瀏覽器中，文本域的默認(rèn)寬度是 20 個(gè)字符。
密碼字段
密碼字段通過標(biāo)簽 <input type=“password”> 來定義:
<form>
密碼: <input type="password" name="pwd">
</form>
密碼字段字符不會(huì)明文顯示，而是以星號(hào) * 或圓點(diǎn) . 替代。
單選按鈕（Radio Buttons）
<input type=“radio”> 標(biāo)簽定義了表單的單選框選項(xiàng):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
</body>
</html>
復(fù)選框（Checkboxes）
<input type=“checkbox”> 定義了復(fù)選框。
復(fù)選框可以選取一個(gè)或多個(gè)選項(xiàng)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="checkbox" name="vehicle" value="Bike">bike<br>
<input type="checkbox" name="vehicle" value="Car">car
</form>
</body>
</html>
按鈕（button）
<input type=“button”>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="button" value="test">
</form>
</body>
</html>
提交按鈕(Submit)
<input type=“submit”> 定義了提交按鈕。
當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到服務(wù)器。表單的動(dòng)作屬性 action 定義了服務(wù)端的文件名。
action 屬性會(huì)對(duì)接收到的用戶輸入數(shù)據(jù)進(jìn)行相關(guān)的處理:
實(shí)例
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
在上面的文本框內(nèi)鍵入幾個(gè)字母，然后點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會(huì)傳送到 html_form_action.php 文件，該頁面將顯示出輸入的結(jié)果。
method 屬性：用于定義表單數(shù)據(jù)的提交方式，可以是以下值：
- post：指的是 HTTP POST 方法，表單數(shù)據(jù)會(huì)包含在表單體內(nèi)然后發(fā)送給服務(wù)器，用于提交敏感數(shù)據(jù)，如用戶名與密碼等。
- get：默認(rèn)值，指的是 HTTP GET 方法，表單數(shù)據(jù)會(huì)附加在 action 屬性的 URL 中，并以 ?作為分隔符，一般用于不敏感信息，如分頁等。
實(shí)例
<!-- 以下表單使用 GET 請(qǐng)求發(fā)送數(shù)據(jù)到當(dāng)前的 URL，method 默認(rèn)位 GET。 -->
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 以下表單使用 POST 請(qǐng)求發(fā)送數(shù)據(jù)到當(dāng)前的 URL。 -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 表單使用 fieldset, legend, 和 label 標(biāo)簽 -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
label標(biāo)簽
常用于綁定內(nèi)容與表單標(biāo)簽的關(guān)系。當(dāng)單擊<label>標(biāo)簽內(nèi)的文本時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)(光標(biāo))轉(zhuǎn)到或者選擇對(duì)應(yīng)的表單元素上，用來增加用戶的體驗(yàn)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表單應(yīng)用</title>
</head>
<body>
<form>
<label for="name">用戶名:</label><input type="text" name="username" id="name" />
</form>
</body>
</html>
將“用戶名”這三個(gè)字放到了
文本框（textarea）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea rows="10" cols="30">
我是一個(gè)文本框。
</textarea>
</body>
</html>
下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<select name="cars">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
帶邊框的表單（fieldset）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
</body>
</html>
文章來源：http://www.zghlxwxcb.cn/news/detail-696494.html
form
form屬性列表：文章來源地址http://www.zghlxwxcb.cn/news/detail-696494.html
| 屬性 | 描述 |
|---|---|
| accept-charset | 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁面字符集）。 |
| action | 規(guī)定向何處提交表單的地址（URL）（提交頁面）。 |
| autocomplete | 規(guī)定瀏覽器應(yīng)該自動(dòng)完成表單（默認(rèn)：開啟）。 |
| enctype | 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。 |
| method | 規(guī)定在提交表單時(shí)所用的 HTTP 方法（默認(rèn)：GET）。 |
| name | 規(guī)定識(shí)別表單的名稱（對(duì)于 DOM 使用：document.forms.name）。 |
| novalidate | 規(guī)定瀏覽器不驗(yàn)證表單。 |
| target | 規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）。 |
到了這里，關(guān)于HTML5-4-表單的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
