14、HTML ＜input＞标签
上一節(jié)我們說(shuō)過(guò)關(guān)于表單的所有內(nèi)容需要放在 <form> 標(biāo)簽中，這節(jié)我們就來(lái)看一下<form> 標(biāo)簽內(nèi)部具體可以放哪些標(biāo)簽（內(nèi)容）呢？
在HTML 中，<form> 標(biāo)簽內(nèi)部有 4 種元素，分別是 input、option、select 以及 textarea 元素。本節(jié)我們先來(lái)對(duì) input 元素進(jìn)行整體介紹。
1. input元素
很多表單元素都是由一個(gè)個(gè)的 input 元素組成的。它是自閉合標(biāo)簽，根據(jù)其 type 屬性值的不同分為很多種，例如單行文本框、密碼框、單選按鈕、復(fù)選框、隱藏域、文件上傳域、普通按鈕、提交按鈕以及重置按鈕等。我們先來(lái)看一下它的語(yǔ)法格式：
<input type="表單類型" />接下來(lái)再看一下 type 常用屬性值：
type 常用屬性值：
- text ----表示單行文本框
- password---- 表示密碼框
- hidden---- 表示隱藏域
- radio---- 表示單選按鈕
- checkbox---- 表示復(fù)選框
- file ----表示文件上傳域
- button ----表示普通按鈕
- submit ----表示帶提交功能的按鈕
- reset---- 表示帶重置功能的按鈕
具體使用方法請(qǐng)看如下代碼：
<body><form action="" method="post" name="myForm">用戶名:<input type="text" name="name"><br/>密碼:<input type="password" name="password"><br/>性別:<input type="radio" name="sex" value="boy">男<input type="radio" name="sex" value="girl">女<br/>愛(ài)好:讀書<input type="checkbox" name="read" value="read">跑步<input type="checkbox" name="run" value="run">逛街<input type="checkbox" name="shopping" value="shopping">看電影<input type="checkbox" name="movie" value="movie"><br/>隱藏域<input type="hidden" name="hidden"><br/>文件上傳域<input type="file" name="file" src="url"><br/><input type="submit" value="提交"><input type="button" value="確定"><input type="reset" value="重置"></form> </body>因?yàn)樘峤恍畔⒅泻忻艽a字段，所以本次提交選用的是"post"請(qǐng)求。運(yùn)行結(jié)果如下圖：
上述代碼中使用了 type 屬性中的 text、password、radio、checkbox、hidden、file、submit 以及 reset。我們來(lái)分別看一下：
- text ----表示常規(guī)文本框，一般用來(lái)輸入一些對(duì)用戶可見(jiàn)的文字。
- password ----表示密碼框，輸入的內(nèi)容對(duì)用戶不可見(jiàn)。
- radio ----表示單選按鈕。當(dāng) type 屬性值為 radio 時(shí)，必須為其指定相同的 name 屬性值，否則實(shí)現(xiàn)不了單選的效果。
- checkbox---- 表示復(fù)選框，可以選擇多條內(nèi)容。
- hidden ----表示隱藏域，在頁(yè)面中對(duì)于用戶是不可見(jiàn)的。在表單中插入隱藏域可以方便收集或發(fā)送信息。當(dāng)表單提交時(shí)，隱藏域的信息也被一起提交。
- file---- 表示上傳文件域，src 屬性表示文件的路徑。
- submit ----表示提交按鈕，默認(rèn)值為提交，也可以根據(jù)需求使用 value 屬性進(jìn)行設(shè)置。點(diǎn)擊按鈕后，表單中的值會(huì)提交到預(yù)先設(shè)定好的 url中。
- button ----表示普通按鈕，沒(méi)有提交功能。默認(rèn)沒(méi)有 value 值，需要手動(dòng)設(shè)置，如果需要提交，建議使用 submit 按鈕。
- reset ----表示重置按鈕，同 submit 一樣也有默認(rèn) value 值，默認(rèn)為重置。點(diǎn)擊按鈕后，表單中填寫的所有數(shù)據(jù)將被清空。
2. name屬性
當(dāng)用戶向表單輸入信息時(shí)，服務(wù)器需要知道這個(gè)數(shù)據(jù)到底輸入到了表單的哪個(gè)字段（控件）。例如登錄頁(yè)面，服務(wù)器需要知道哪條數(shù)據(jù)是作為用戶名輸入的，哪條數(shù)據(jù)是作為密碼輸入的。因此，HTML 規(guī)定如果表單要想正確地被提交給表單處理器，必須為每個(gè)字段都設(shè)置 name 屬性。如果未設(shè)置，默認(rèn)不提交其數(shù)據(jù)信息。
3. disabled屬性
如果為 <input> 標(biāo)簽的某個(gè)控件設(shè)置了disabled="disabled"，表示將禁用該控件，使其不能再獲得焦點(diǎn)或被修改。被禁用后，它的值不會(huì)提交到后臺(tái)。如果是按鈕被禁用，它的點(diǎn)擊效果就會(huì)失效。
示例如下：
<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">用戶名:<input type="text" name="name" disabled="disabled" value="username"><br/>密碼:<input type="password" name="password" disabled="disabled"><br/> </form>運(yùn)行結(jié)果如圖所示：
通過(guò)運(yùn)行結(jié)果可以發(fā)現(xiàn)，預(yù)先設(shè)置好的 value 值可以正常顯示，但是不能更改其內(nèi)容。
4. readonly屬性
readonly 屬性表示只讀。它有以下特點(diǎn)：
- 一般用在單行文本框和密碼框中；
- 控件的值可以顯示，但不能修改；
- 控件可以獲取焦點(diǎn)；
- 如果有預(yù)先設(shè)置好的值，會(huì)一起提交到服務(wù)器。
總結(jié)
以上是生活随笔為你收集整理的14、HTML ＜input＞标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 13、HTML ＜meta＞标签
- 下一篇： 15、HTML单行文本框