14、HTML ＜input＞标签
上一節我們說過關于表單的所有內容需要放在 <form> 標簽中，這節我們就來看一下<form> 標簽內部具體可以放哪些標簽（內容）呢？
在HTML 中，<form> 標簽內部有 4 種元素，分別是 input、option、select 以及 textarea 元素。本節我們先來對 input 元素進行整體介紹。
1. input元素
很多表單元素都是由一個個的 input 元素組成的。它是自閉合標簽，根據其 type 屬性值的不同分為很多種，例如單行文本框、密碼框、單選按鈕、復選框、隱藏域、文件上傳域、普通按鈕、提交按鈕以及重置按鈕等。我們先來看一下它的語法格式：
<input type="表單類型" />接下來再看一下 type 常用屬性值：
type 常用屬性值：
- text ----表示單行文本框
- password---- 表示密碼框
- hidden---- 表示隱藏域
- radio---- 表示單選按鈕
- checkbox---- 表示復選框
- file ----表示文件上傳域
- button ----表示普通按鈕
- submit ----表示帶提交功能的按鈕
- reset---- 表示帶重置功能的按鈕
具體使用方法請看如下代碼：
<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/>愛好:讀書<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>因為提交信息中含有密碼字段，所以本次提交選用的是"post"請求。運行結果如下圖：
上述代碼中使用了 type 屬性中的 text、password、radio、checkbox、hidden、file、submit 以及 reset。我們來分別看一下：
- text ----表示常規文本框，一般用來輸入一些對用戶可見的文字。
- password ----表示密碼框，輸入的內容對用戶不可見。
- radio ----表示單選按鈕。當 type 屬性值為 radio 時，必須為其指定相同的 name 屬性值，否則實現不了單選的效果。
- checkbox---- 表示復選框，可以選擇多條內容。
- hidden ----表示隱藏域，在頁面中對于用戶是不可見的。在表單中插入隱藏域可以方便收集或發送信息。當表單提交時，隱藏域的信息也被一起提交。
- file---- 表示上傳文件域，src 屬性表示文件的路徑。
- submit ----表示提交按鈕，默認值為提交，也可以根據需求使用 value 屬性進行設置。點擊按鈕后，表單中的值會提交到預先設定好的 url中。
- button ----表示普通按鈕，沒有提交功能。默認沒有 value 值，需要手動設置，如果需要提交，建議使用 submit 按鈕。
- reset ----表示重置按鈕，同 submit 一樣也有默認 value 值，默認為重置。點擊按鈕后，表單中填寫的所有數據將被清空。
2. name屬性
當用戶向表單輸入信息時，服務器需要知道這個數據到底輸入到了表單的哪個字段（控件）。例如登錄頁面，服務器需要知道哪條數據是作為用戶名輸入的，哪條數據是作為密碼輸入的。因此，HTML 規定如果表單要想正確地被提交給表單處理器，必須為每個字段都設置 name 屬性。如果未設置，默認不提交其數據信息。
3. disabled屬性
如果為 <input> 標簽的某個控件設置了disabled="disabled"，表示將禁用該控件，使其不能再獲得焦點或被修改。被禁用后，它的值不會提交到后臺。如果是按鈕被禁用，它的點擊效果就會失效。
示例如下：
<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>運行結果如圖所示：
通過運行結果可以發現，預先設置好的 value 值可以正常顯示，但是不能更改其內容。
4. readonly屬性
readonly 屬性表示只讀。它有以下特點：
- 一般用在單行文本框和密碼框中；
- 控件的值可以顯示，但不能修改；
- 控件可以獲取焦點；
- 如果有預先設置好的值，會一起提交到服務器。
總結
以上是生活随笔為你收集整理的14、HTML ＜input＞标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 13、HTML ＜meta＞标签
- 下一篇： 15、HTML单行文本框