HTML <input>標(biāo)簽是一個輸入控件,為用戶提供用于輸入數(shù)據(jù)的交互式控件。傳統(tǒng)上, <input>標(biāo)簽位于 <form>標(biāo)簽內(nèi),并且可以通過設(shè)置適當(dāng)?shù)膖ype屬性來表示文本字段,復(fù)選框,下拉菜單,按鈕和其他輸入。此標(biāo)簽通常也稱為 <input>元素。
一個簡單的 HTML 表單,包含兩個文本輸入框和一個提交按鈕:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 footer標(biāo)簽的使用(菜鳥教程 (cainiaoplus.com))</title> </head> <body> <h1>(cainiaoplus.com)菜鳥教程</h1> <form action="demo-form.php" method="post"> 公司: <input type="text" name="company"><br> 地址: <input type="text" name="address"><br> <input type="submit" value="Submit"> </form> </body> </html>測試看看 ?/?
在此HTML5文檔示例中,我們使用了<form>標(biāo)記創(chuàng)建HTML表單。該表單包含兩個用于公司和地址的<input>控件,以及一個用于提交按鈕的<input>控件。
IEFirefoxOperaChromeSafari
目前大多數(shù)瀏覽器支持 <input>標(biāo)簽。
<input> 標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。
<input> 元素在 <form> 元素中使用,用來聲明允許用戶輸入數(shù)據(jù)的 input 控件。
通過設(shè)置type屬性,<input>元素可以成為文本字段,復(fù)選框,單選按鈕,下拉菜單,按鈕,密碼字段等等!
注意: <input> 元素是空的,它只包含標(biāo)簽屬性。
提示: 你可以使用 <label> 元素來定義 <input> 元素的標(biāo)注。
在 HTML 4.01 中, "align" 數(shù)據(jù)已經(jīng)不再使用。HTML5 中不支持該屬性。 可以使用CSS來定義 <input> 元素的對齊方式。
在 HTML5中, <input> 添加了幾個屬性,并且添加了對應(yīng)的值。
在 HTML 中,<input> 標(biāo)簽沒有結(jié)束標(biāo)簽。
在 XHTML 中,<input> 標(biāo)簽必須被正確地關(guān)閉。
New : HTML5新標(biāo)簽。
屬性 | 值 | 描述 |
---|---|---|
accept | audio/* video/* image/*MIME_type | 規(guī)定通過文件上傳來提交的文件的類型。 (只針對type="file") |
align | left right top middle bottom | HTML5已廢棄,不贊成使用。規(guī)定圖像輸入的對齊方式。 (只針對type="image") |
alt | text | 定義圖像輸入的代替文本。 (只針對type="image") |
autocompleteHTML5 | on off | autocomplete 屬性指定 <input> 元素輸入字段是否應(yīng)該啟用自動完成功能。 |
autofocusHTML5 | autofocus | 屬性規(guī)定當(dāng)頁面加載時 <input> 元素應(yīng)該自動獲得焦點。 |
checked | checked | checked 屬性規(guī)定在頁面加載時應(yīng)該被預(yù)先選定的 <input> 元素。 (只針對 type="checkbox" 或者 type="radio") |
dirnameHTML5 | inputname.dir | 指定提交的文本方向。 |
disabled | disabled | disabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素。 |
formHTML5 | form_id | form 屬性指定 <input> 元素所屬的一個或多個表單。 |
formactionHTML5 | URL | 屬性規(guī)定當(dāng)表單提交時處理輸入控件的文件的 URL。(只針對 type="submit" 和 type="image") |
formenctypeHTML5 | application/x-www-form-urlencoded multipart/form-data text/plain | 屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時如何編碼(只適合 type="submit" 和 type="image")。 |
formmethodHTML5 | get post | 定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image") |
formnovalidateHTML5 | formnovalidate | formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。 |
formtargetHTML5 | _blank _self _parent _topframename | 規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞。(只適合 type="submit" 和 type="image") |
heightHTML5 | pixels | 規(guī)定 <input>元素的高度。(只針對type="image") |
listHTML5 | datalist_id | 屬性引用 <datalist> 元素,其中包含 <input> 元素的預(yù)定義選項。 |
maxHTML5 | number date | 屬性指定 <input> 元素的最大值。 |
maxlength | number | 屬性指定 <input> 元素中允許的最大字符數(shù)。 |
minHTML5 | number date | 屬性指定 <input>元素的最小值。 |
multipleHTML5 | multiple | 屬性規(guī)定允許用戶輸入到 <input> 元素的多個值。 |
name | text | name 屬性指定 <input> 元素的名稱。 |
patternHTML5 | regexp | pattern 屬性規(guī)定用于驗證 <input> 元素的值的正則表達式。 |
placeholderHTML5 | text | placeholder 屬性規(guī)定可描述輸入 <input> 字段預(yù)期值的簡短的提示信息 。 |
readonly | readonly | readonly 屬性規(guī)定輸入字段是只讀的。 |
requiredHTML5 | required | 屬性規(guī)定必需在提交表單之前填寫輸入字段。 |
size | number | size 屬性規(guī)定以字符數(shù)計的 <input> 元素的可見寬度。 |
src | URL | src 屬性規(guī)定顯示為提交按鈕的圖像的 URL。 (只針對 type="image") |
stepHTML5 | number | step 屬性指定 <input> 元素的合法數(shù)字間隔。 |
type | button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week | type 屬性規(guī)定要顯示的 <input> 元素的類型。 |
value | text | 指定 <input> 元素 value 的值。 |
widthHTML5 | pixels | width 屬性規(guī)定 <input> 元素的寬度。 (只針對type="image") |
<input> 標(biāo)簽支持全局屬性,查看完整屬性表 HTML全局屬性。
<input> 標(biāo)簽支持所有 HTML事件屬性。