HTML5 <input> 標(biāo)簽

2022-05-23 14:56 更新

實(shí)例

一個(gè)簡(jiǎn)單的 HTML 表單,包含兩個(gè)文本輸入框和一個(gè)提交按鈕:

<form action="demo_form.asp">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form> 
嘗試一下 ?
(本頁(yè)底部可以查看更多實(shí)例)

瀏覽器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前大多數(shù)瀏覽器支持 <input>標(biāo)簽。


標(biāo)簽定義及使用說(shuō)明

<input> 標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。

<input> 元素在 <form> 元素中使用,用來(lái)聲明允許用戶輸入數(shù)據(jù)的 input 控件。

輸入字段可通過(guò)多種方式改變,取決于 type 屬性。


提示和注釋

注意: <input> 元素是空的,它只包含標(biāo)簽屬性。

提示: 你可以使用 <label> 元素來(lái)定義 <input> 元素的標(biāo)注。


HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中, "align" 數(shù)據(jù)已經(jīng)不再使用。HTML5 中不支持該屬性。 可以使用CSS來(lái)定義 <input> 元素的對(duì)齊方式。

在 HTML5中, <input> 添加了幾個(gè)屬性,并且添加了對(duì)應(yīng)的值。


HTML 與 XHTML 之間的差異

在 HTML 中,<input> 標(biāo)簽沒(méi)有結(jié)束標(biāo)簽。

在 XHTML 中,<input /> 標(biāo)簽必須被正確地關(guān)閉。


屬性

New : HTML5新標(biāo)簽。

屬性 描述
accept audio/*video/*image/*MIME_type 規(guī)定通過(guò)文件上傳來(lái)提交的文件的類型。(只針對(duì)type="file")
align leftrighttopmiddlebottom HTML5已廢棄,不贊成使用。規(guī)定圖像輸入的對(duì)齊方式。 (只針對(duì)type="image")
alt text 定義圖像輸入的替代文本。 (只針對(duì)type="image")
autocompleteNew onoff autocomplete 屬性規(guī)定 <input> 元素輸入字段是否應(yīng)該啟用自動(dòng)完成功能。
autofocusNew autofocus 屬性規(guī)定當(dāng)頁(yè)面加載時(shí) <input> 元素應(yīng)該自動(dòng)獲得焦點(diǎn)。
checked checked checked 屬性規(guī)定在頁(yè)面加載時(shí)應(yīng)該被預(yù)先選定的 <input> 元素。 (只針對(duì) type="checkbox" 或者 type="radio")
disabled disabled disabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素。
formNew form_id form 屬性規(guī)定 <input> 元素所屬的一個(gè)或多個(gè)表單。
formactionNew URL 屬性規(guī)定當(dāng)表單提交時(shí)處理輸入控件的文件的 URL。(只針對(duì) type="submit" 和 type="image")
formenctypeNew application/x-www-form-urlencodedmultipart/form-datatext/plain 屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時(shí)如何編碼(只適合 type="submit" 和 type="image")。
formmethodNew getpost 定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image")
formnovalidateNew formnovalidate formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。
formtargetNew _blank_self_parent_topframename 規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞。(只適合 type="submit" 和 type="image")
heightNew pixels 規(guī)定 <input>元素的高度。(只針對(duì)type="image")
listNew datalist_id 屬性引用 <datalist> 元素,其中包含 <input> 元素的預(yù)定義選項(xiàng)。
maxNew numberdate 屬性規(guī)定 <input> 元素的最大值。
maxlength number 屬性規(guī)定 <input> 元素中允許的最大字符數(shù)。
minNew numberdate 屬性規(guī)定 <input>元素的最小值。
multipleNew multiple 屬性規(guī)定允許用戶輸入到 <input> 元素的多個(gè)值。
name text name 屬性規(guī)定 <input> 元素的名稱。
patternNew regexp pattern 屬性規(guī)定用于驗(yàn)證 <input> 元素的值的正則表達(dá)式。
placeholderNew text placeholder 屬性規(guī)定可描述輸入 <input> 字段預(yù)期值的簡(jiǎn)短的提示信息。
readonly readonly readonly 屬性規(guī)定輸入字段是只讀的。
requiredNew required 屬性規(guī)定必需在提交表單之前填寫(xiě)輸入字段。
size number size 屬性規(guī)定以字符數(shù)計(jì)的 <input> 元素的可見(jiàn)寬度。
src URL src 屬性規(guī)定顯示為提交按鈕的圖像的 URL。 (只針對(duì)type="image")
stepNew number step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
type 屬性規(guī)定要顯示的 <input> 元素的類型。
value text 指定 <input> 元素 value 的值。
widthNew pixels width 屬性規(guī)定 <input> 元素的寬度。 (只針對(duì)type="image")


全局屬性

<input> 標(biāo)簽支持全局屬性,查看完整屬性表 HTML全局屬性。


事件屬性

<input> 標(biāo)簽支持所有 HTML事件屬性


相關(guān)閱讀

HTML DOM參考手冊(cè):HTML DOM Form 對(duì)象

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)