6.1 属性 required
表单中的数据验证是Web开发中的一个重要方面，有助于确保输入信息的正确性和完整性。HTML提供了许多内置的属性来检查输入数据，比如 required、pattern、min、max，以及 placeholder 和 value 属性， 这些都能增强用户与表单的交互。
属性 required 表示输入字段是必填的。如果标记为 required 的字段没有被填写，浏览器不会让表单提交。
语法
HTML
<input type="text" name="username" required>
使用示例
HTML
<form action="/" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<button type="submit">提交</button>
</form>
解释
如果指定了 required 属性，用户必须在提交表单之前填写此字段。 如果字段为空，浏览器会显示一个错误消息，并不会提交表单。
6.2 属性 pattern
属性 pattern 可以用来设置正则表达式来验证输入数据。如果输入的数据不符合指定的模式，浏览器会显示一个错误消息，并不会提交表单。
语法
HTML
<input type="text" name="username" pattern="[A-Za-z]{3,}">
使用示例
属性 pattern 设置一个正则表达式，输入数据必须符合这个表达式。 在这个例子中，用户名必须只包含字母且长度不小于三个字符。
HTML
<form action="/" method="post">
<label for="username">用户名（仅限字母，至少3个字符）:</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
<button type="submit">提交</button>
</form>
6.3 属性 min 和 max
属性 min 和 max 用于设置数字和日期字段的最小和最大允许值。
语法
HTML
<input type="number" name="age" min="18" max="99">
使用示例
数字字段
min: 设置最小允许值。在这个例子中，最小年龄是18岁。max: 设置最大允许值。在这个例子中，最大年龄是99岁。
HTML
<form action="/" method="post">
<label for="birthday">出生日期（从1900-01-01到2024-12-31）:</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
<button type="submit">提交</button>
</form>
6.4 属性 placeholder
属性 placeholder 设置一个占位文本，当用户没有输入数据时，这个文本会显示在输入框中。这个属性帮助用户理解此字段预期输入的数据类型。
语法
HTML
<input type="text" name="username" placeholder="输入用户名">
使用示例
属性 placeholder 在用户开始输入数据之前，显示输入框中的文本。在这个例子中，输入框占位文本是 "输入用户名"。
HTML
<form action="/" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="输入用户名" required>
<button type="submit">提交</button>
</form>
6.5 属性 value
属性 value 设置输入元素的初始值。这个值会在页面加载或者表单重置时显示在输入框中。
语法
HTML
<input type="text" name="username" value="default user">
使用示例
属性 value 设置输入框的初始值。在这个例子中，默认的用户名是 "default user"。
HTML
<form action="/" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" value="default user" required>
<button type="submit">提交</button>
</form>
GO TO FULL VERSION