HTML <input> type屬性用法及代碼示例

HTML <input>類型的屬性用於指定要顯示的<input>元素的類型。 <input> type屬性的默認類型是text。

用法:

<input type="value">

屬性值：

button:它用於定義文檔中的可單擊按鈕。它通常與JavaScript一起使用以激活腳本。
checkbox:它用於定義複選框字段。該複選框顯示為一個方形框，在激活該框時將其選中。它允許用戶在所有受限選項中選擇一個或多個選項。
color:它用於定義顏色選擇器。該值應為七個字符的十六進製表示法。默認值為＃000000(黑色)。
date:它用於定義日期選擇器或控製字段。該值將是年，月和日。
email:用於定義電子郵件地址的字段。輸入的電子郵件ID將自動驗證，以檢查電子郵件ID的格式是否正確。
file:它用於指定文件選擇字段，並添加一個按鈕以選擇要上傳到表單的文件。
hidden:它用於定義輸入隱藏字段。隱藏字段還包括用戶提交表單時無法查看或修改的數據。隱藏字段僅存儲提交表單時需要更新的那些數據庫記錄。
image:它用於將圖像定義為提交按鈕。
month:用於指定月份和年份字段的控件。該值必須采用“YYYY-MM”的格式。
number:用於指定輸入數字的輸入字段。
password:用於指定輸入標簽的密碼字段。密碼應通過HTTPS頁麵提供，因為它包含用戶的敏感信息。
radio:用於定義單選按鈕。單選按鈕用於使用戶從預定義選項列表中準確選擇一個選項。通過使用“input”元素創建單選按鈕輸入控件，該元素的類型屬性的值為“radio”。
range:它用於定義對用戶輸入的數字的控製。它可以設置對用戶輸入的不重要數字或值的限製。缺省值為0到100。
reset:它用於定義一個重置按鈕。重置按鈕用於將所有表格值重置為其初始值。
search:它用於定義輸入搜索字符串的文本字段。
submit:它用於定義一個提交按鈕。它用於將所有用戶值提交到表單處理程序。表單處理程序是一個服務器頁麵，可激活用於處理所有輸入值的腳本。
tel:它用於定義輸入用戶電話號碼的字段。
text:它用於定義單行文本字段。文本字段的默認寬度為20個字符。
time:用於指定輸入時間控製字段。
url:它用於定義輸入URL的字段。提交表單之前，此輸入值會自動驗證。
week:它用於定義一周和一年的控製字段。

例：

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>  
        HTML input type Attribute  
    </title>  
</head>  
      
<body style="text-align:center;">  
  
    <h1 style="color:green;">GeeksforGeeks</h1>  
          
    <h3>HTML <input> type Attribute</h3>  
          
    <form action="#" method="get">  
        Username:<input type="text" name="uname">  
              
        <br><br>  
              
        Password:<input type="password" name="pwd">  
              
        <br><br>  
              
        <button type="submit" value="submit">  
            Submit  
        </button>  
              
        <button type="reset" value="reset">  
            Reset  
        </button>  
    </form>  
</body>  
  
</html>

輸出：

支持的瀏覽器：下麵列出了HTML <input> type屬性支持的瀏覽器：

穀歌瀏覽器
IE瀏覽器
Firefox
Safari
Opera

相關用法

注：本文由純淨天空篩選整理自jit_t大神的英文原創作品 HTML | <input> type Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。