input 標簽詳解

常用的input標簽

  • button

一個沒有默認行為的推送按鈕

  • checkbox

一個被選中的盒子,必須使用value屬性來確定被提交的數據 用checked屬性確認checkbox是否被選中

  • file

可以讓用戶選擇一個文件,accept屬性限制了能夠選擇文件的類型。

  • hidden

一種不被顯示但是里面的值會被傳到后臺

  • image

一個圖形化的提交按鈕,必須使用src屬性來指定圖片的地址和alt屬性來說明圖片未被正確顯示時對圖片的描述,也可以使用width和height屬性來設置圖片的大小

  • password

一個單線的文板框,里面的文本是被遮住的,用maxlength屬性來定義可以輸入文本的最大長度

  • radio

單選按鈕,必須使用value屬性來確定被提交的數據使用checked讓radio默認被選中。在一個單選框組里面,每個單選按鈕必須使用一個name值,只有一個單選框能被選中。

  • reset

一個可以重置form表單里所有默認值的按鈕.

  • submit

用來提交form信息的按鈕。

  • text

一個單線文本框,自動從輸入值中刪除換行符。

  • required

此屬性input標簽必填.

  • minlength

input標簽的最小字節長度

  • maxlength

input標簽的最大字節長度

  • pattern

正則表達式用于驗證input標簽里的值


在input里,name 有什么作用?

name 屬性規定 input 元素的名稱。
name 屬性用于對提交到服務器后的表單數據進行標識,或者在客戶端通過 JavaScript 引用表單數據。

注釋:只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。


radio 如何 分組?

使用相同name值的radio為同組。


placeholder 屬性有什么作用?

placeholder 屬性規定可描述輸入字段預期值的簡短的提示信息(比如:一個樣本值或者預期格式的短描述)。
該提示會在用戶輸入值之前顯示在輸入字段中。


type=hidden隱藏域有什么作用? 舉例說明

  1. 隱藏域在頁面中對于用戶是不可見的,在表單中插入隱藏域的目的在于收集或發送信息,以利于被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候,隱藏域的信息也被一起發送到服務器。
  2. 有些時候一個form里有多個提交按鈕,怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢?我們就可以寫一個隱藏域,然后在每一個按鈕處加上onclick="document.form.command.value="xx""然后我們接到數據后先檢查command的值就會知道用戶是按的那個按鈕提交上來的。
  3. javascript不支持全局變量,但有時我們必須用全局變量,我們就可以把值先存在隱藏域里,它的值就不會丟失了。

例子: 使用hidden實現點擊提交按鈕數字加1

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

推薦閱讀更多精彩內容

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