詳解input屬性

一、type屬性

input元素的type屬性是一個比較重要的屬性，它定義了輸入控件的類型。常用的type類型有文本輸入框、密碼輸入框、單選框、複選框等。下面我們分別進行介紹。

文本輸入框

文本輸入框是input元素中最常用的類型之一，用於接受用戶的輸入，如下所示：

    
        <label>用戶名:</label>
        <input type="text" name="username">
    

上述代碼中，我們創建了一個文本輸入框並指定了name屬性。name屬性是提交到服務器的表單數據的名稱，可以用於在後端接受數據。

密碼輸入框

密碼輸入框也是一種輸入框類型，用於隱藏輸入的文本內容。示例如下：

    
        <label>密碼:</label>
        <input type="password" name="password">
    

上述代碼中，我們創建了一個密碼輸入框，與文本輸入框不同的是，輸入的內容會被隱藏起來，用“*”替代。

單選框

單選框是一種用於多項選擇的控件，只能選擇其中的一項。示例如下：

    
        <div>
            <label>性別:</label>
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" value="female">女
        </div>
    

上述代碼中，我們創建了兩個單選框，並指定了name屬性和value屬性。name屬性表示單選框所在組的名稱，value屬性則表示當前項的取值。

複選框

複選框是一種用於多項選擇的控件，可以選擇多個選項。示例如下：

    
        <div>
            <label>愛好:</label>
            <input type="checkbox" name="hobby" value="football">足球
            <input type="checkbox" name="hobby" value="basketball">籃球
            <input type="checkbox" name="hobby" value="swimming">游泳
        </div>
    

上述代碼中，我們創建了三個複選框，並指定了name屬性和value屬性。name屬性表示複選框所在組的名稱，value屬性則表示當前項的取值。如果用戶選擇了多個選項，則會將所選項的值提交到服務器。

二、placeholder屬性

placeholder屬性用於設置文本輸入框的提示內容。示例如下：

    
        <label>郵箱:</label>
        <input type="email" name="email" placeholder="請輸入郵箱">
    

上述代碼中，我們創建了一個文本輸入框，並使用placeholder屬性設置了提示內容。當用戶輸入內容時，提示內容會自動消失。

三、readonly屬性

readonly屬性用於設置文本輸入框為只讀模式，即用戶可以看到文本框內的內容但無法編輯內容。該屬性可用於展示一些固定的信息並防止用戶誤操作。示例如下：

    
        <label>姓名:</label>
        <input type="text" name="name" value="Tom" readonly>
    

上述代碼中，我們創建了一個文本輸入框，並將其設置為只讀模式，並設置了默認值為“Tom”。

四、disabled屬性

disabled屬性用於設置文本輸入框為不可用狀態，即用戶無法進行任何操作。該屬性可用於在某種情況下禁用用戶輸入。示例如下：

    
        <label>手機號:</label>
        <input type="text" name="phone" value="13312345678" disabled>
    

上述代碼中，我們創建了一個文本輸入框，並將其設置為不可用狀態，並設置了默認值為“13312345678”。

五、required屬性

required屬性用於設置文本輸入框為必填項，即用戶需要填寫文本框才能提交表單。示例如下：

    
        <label>地址:</label>
        <input type="text" name="address" required>
    

上述代碼中，我們創建了一個文本輸入框，並將其設置為必填項，即用戶必須填寫該項才能提交表單。

六、size屬性

size屬性用於設置文本輸入框的寬度。示例如下：

    
        <label>備註:</label>
        <input type="text" name="remark" size="50">
    

上述代碼中，我們創建了一個文本輸入框，並將其設置寬度為50字符。

七、maxlength屬性

maxlength屬性用於設置文本輸入框可輸入的最大字符數。示例如下：

    
        <label>留言:</label>
        <input type="text" name="message" maxlength="100">
    

上述代碼中，我們創建了一個文本輸入框，並將其最大輸入字符數限制為100個字符。

八、autocomplete屬性

autocomplete屬性用於開啟/關閉瀏覽器自動填充功能。設置該屬性值為“on”時開啟自動填充功能，設置為“off”時關閉自動填充功能。示例如下：

    
        <label>搜索:</label>
        <input type="text" name="search" autocomplete="off">
    

上述代碼中，我們創建了一個文本輸入框，並將其開啟了自動填充功能。

九、pattern屬性

pattern屬性用於設置文本輸入框的輸入格式。我們可以使用正則表達式對輸入格式進行限制。示例如下：

    
        <label>身份證:</label>
        <input type="text" name="id_card" pattern="\d{17}[\d|x]|\d{15}">
    

上述代碼中，我們創建了一個文本輸入框，並使用pattern屬性設置了輸入格式為身份證號碼。

十、multiple屬性

multiple屬性用於設置多選下拉框。示例如下：

    
        <label>選擇城市:</label>
        <select name="city" multiple>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">廣州</option>
        </select>
    

上述代碼中，我們創建了一個多選下拉框，並設置了選項值。