详解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>

上述代码中，我们创建了一个多选下拉框，并设置了选项值。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/298144.html