程序员教程

HTML5 表单属性

placeholder 属性

placeholder 属性可为输入字段提供一个提示性文本，当输入字段为空时显示。这有助于告诉用户应该输入什么样的数据。

                <input type="text" id="username" name="username" placeholder="请输入用户名">
                

required 属性

required 属性表示某个输入字段是必填项，在提交表单前必须填写。如果用户尝试提交未填写此字段的表单，浏览器将阻止提交并显示错误消息。

                <input type="text" id="username" name="username" required>
                

pattern 属性

pattern 属性允许您定义一个正则表达式，以验证输入字段的值是否符合预期格式。如果输入的值不匹配正则表达式，浏览器将在提交表单时阻止并显示错误消息。

                <input type="text" id="zipcode" name="zipcode" pattern="\d{5}">
                

以上示例要求用户输入一个五位数的邮政编码。

autofocus 属性

autofocus 属性可使页面加载后自动将焦点设置到特定输入字段上。这样，用户无需点击输入字段即可立即开始输入。

                <input type="text" id="username" name="username" autofocus>
                

请注意，一个表单中只应有一个输入字段具有 autofocus 属性。

readonly 属性

readonly 属性可使输入字段变为只读。用户无法修改只读字段的值，但该值仍会随表单一起提交。

                <input type="text" id="user_id" name="user_id" value="12345" readonly>
                

disabled 属性

disabled 属性用于禁用输入字段，使其不能输入或与之交互。禁用的字段不会随表单一起提交。

                <input type="text" id="promo_code" name="promo_code" disabled>
                

multiple 属性

multiple 属性允许用户选择多个文件（当 type="file" 时）或者在 <select> 元素中选择多个选项。

                <input type="file" id="files" name="files" multiple>
                <!-- 或 -->
                <select id="favorite_fruits" name="favorite_fruits" multiple>
                    <!-- 选项 -->
                </select>
                

minlength 和 maxlength 属性

minlength 和 maxlength 属性分别定义了输入字段接受的最小字符数和最大字符数。

                <input type="text" id="username" name="username" minlength="3" maxlength="20">
                

以上示例限制用户名长度必须在 3 到 20 个字符之间。

novalidate 属性

如果您希望禁用浏览器的自动验证功能，可以在 <form> 元素上添加 novalidate 属性。

                <form action="/submit" method="post" novalidate>
                    <!-- 表单内容 -->
                </form>
                

以上就是一些常用的 HTML5 表单属性及其用法。通过使用这些属性，您可以优化表单的用户体验并提高数据验证的准确性。请注意，在使用这些属性时，要确保充分测试不同浏览器的兼容性。