HTML <input> required 属性

在 Web 开发中，表单是一个非常重要的组件，而 <input> 元素是表单中最基本的输入控件之一。在 HTML5 中，<input> 元素新增了一个 required 属性，用于指定输入字段是否为必填项。当设置了 required 属性之后，用户在提交表单时，如果相应的输入字段为空，浏览器会阻止表单的提交，并提示用户必须填写该字段。

使用方法

要在 <input> 元素中使用 required 属性，只需要在 <input> 标签中添加 required 即可，如下所示：

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

在上面的示例中，<input> 元素的类型为文本输入框，字段名为 username，并且设置了 required 属性，表示用户名为必填项。

示例代码

下面是一个完整的表单示例，其中包含了多个输入字段，并且其中一个字段设置了 required 属性：

// www.javascriptcn.com code example
<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">提交</button>
</form>

在上面的示例中，用户名和密码字段设置了 required 属性，而邮箱字段没有设置，因此邮箱字段可以为空。用户在提交表单时，如果用户名或密码字段为空，浏览器会提示用户必须填写这两个字段。

注意事项

• required 属性只在表单元素中有效，如 <input>、<select>、<textarea> 等。
• 使用 required 属性可以在客户端对用户进行简单的输入验证，但仍建议在服务器端对用户输入进行更严格的验证，以确保数据的安全性。

通过使用 required 属性，可以方便地对表单中的必填字段进行标记，帮助用户更好地填写表单，提高用户体验。在实际开发中，建议合理使用 required 属性，结合其他表单验证方式，以确保用户输入的准确性和完整性。