input 標簽詳解

HTML <input> 元素用于為基于Web的表單創建交互式控件,以便接受來自用戶的數據。

在HTML表單中,input標簽是最常用的控件標簽,包括最常見的文本域、按鈕都是采用這個i標簽。這個標簽的基本語法是:

<form>
    <input name="控件名稱" type="控件類型" />
</form>

在HTML,input參數所包含的類型

type取值 含義
text 文字字段
password 密碼域,用戶在頁面中輸入時不顯示具體的內容,都以“*”代替
radio 單選按鈕
checkbox 復選框
button 普通按鈕
submit 提交按鈕
reset 重置按鈕
image 圖形域,也稱為圖像提交按鈕
hidden 隱藏域,其并不顯示在頁面上,只將內容傳遞到服務器中
file 文件域

文字字段text

text屬性用來設定在表單的文本域中輸入任何類型的文本、數字或字母。輸入的內容以單行顯示。

語法

<input type="text" name="控件名稱" size="控件的長度" maxlength="最長字符數" value= "文字字段的默認取值"/>

密碼域password

在表單中還有一種文本域的形式——密碼域,輸入到該文本域中的文字均以“*“或圓點顯示。

語法

<input type="password" name="控件名稱" size="控件的長度" maxlength="最長字符數" value="文字字段的默認取值"/>

單選按鈕radio

單選按鈕能夠進行項目的單項選擇,以一個圓框表示。

語法

<input type="radio" value="單選按鈕的取值" name="單選按鈕名稱" checked="checked"/>

復選框checkbox

進行多項選擇時就需要用到復選框控件checkbox。復選框在頁面中以一個方框來表示。

語法

<input type="checkbox" value="復選框的值" name="名稱" checked="checked"/>

普通按鈕button

在網頁中按鈕也很常見,在提交頁面、恢復選項時常常需要用到按鈕。普通按鈕一般情況下需要配合腳本來進行表單處理。

語法

<input type="button" value="按鈕的取值" name="按鈕名" onclick="處理程序"/>

提交按鈕submit

提交按鈕是一種特殊的按鈕,不需要設置onclick參數,在單擊該類型按鈕時可以實現表單內容的提交。

語法

<input type="submit" name="按鈕名" value="按鈕的取值"/>

重置按鈕reset

單擊重置按鈕后,可以清除表單的內容,恢復默認的表單內容設定。

語法

<input type="reset" name="按鈕名" value="按鈕的取值"/>

圖像域image

圖像域是指可以用在提交按鈕位置上的圖片,這幅圖片具有按鈕的功能。

語法

<input type="image" src="圖像地址" name="圖像域名稱"/>

隱藏域hidden

表單中的隱藏域主要用來傳遞一些參數,而這些參數不需要在頁面中顯示。當用戶提交表單時,隱藏域的內容會一起提交給處理程序。

語法

<input type="hidden" name="隱藏域名稱" value="提交的值"/>

文件域file

文件域在上傳文件時常常用到,它用于查找硬盤中的文件路徑,然后通過表單將選中的文件上傳。在發送電子郵件、上傳頭像,傳送文件時常常會看到這一控件。

語法

<input type="file" name="文件域的名稱"/>

(完)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 什么是input? 標簽用于搜集用戶信息。根據不同的 type 屬性值,輸入字段擁有很多種形式,輸入字段可以是文本...
    饑人谷_Dylan閱讀 1,266評論 0 50
  • <input>:用于收集用戶信息。 根據不同的 type 屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段、...
    PYFang閱讀 2,042評論 0 0
  • 標簽用于搜集用戶信息,一般放在 標簽下,根據不同的type屬性值,輸入字段擁有很多種形式,可以是文本、復選框、按鈕...
    饑人谷_Oneleven閱讀 2,168評論 1 2
  • 最近學習HTML的過程中遇到了input標簽,作為一名前端初級學習者,其實我是不太了解的。既然不懂的話,就得深入的...
    饑人谷_enzo閱讀 1,664評論 0 0
  • 一、<input>是什么 它在HTML中代表一個元素(Element),多數用于表單的互交控件。input在HTM...
    饑人谷_hak閱讀 1,782評論 0 0