7.1 文本框
HTML 提供了多种输入类型的表单元素，允许用户以不同格式输入数据，如文本、电子邮件、日期等。下面详细讲解 各种输入类型及其使用。
元素 <input type="text"> 用于输入单行文本。这是最基础且常用的输入类型。
使用示例：
<label for="name">名字:</label>
<input type="text" id="name" name="name">
属性
maxlength: 限制最大字符数placeholder: 占位符文本，用户输入前显示在输入框内required: 指定输入框为必填项
带属性的示例：
<label for="username">用户名:</label>
<input type="text" id="username" name="username" maxlength="20" placeholder="请输入用户名" required>
7.2 数字输入框
元素 <input type="number"> 用于输入数值。它限制输入为数字，并且可以包含增减箭头。
使用示例：
<label for="quantity">数量:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
属性
min: 设置最小允许值max: 设置最大允许值step: 定义数值变化的步长value: 设置初始值
7.3 邮箱输入框
元素 <input type="email"> 用于输入电子邮件地址。它会检查输入的文本是否符合邮件地址格式。
使用示例：
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">
属性
multiple: 允许输入多个电子邮件地址，以逗号分隔pattern: 设置正则表达式进行额外的数据验证
带属性的示例：
<label for="emails">Email 地址 (用逗号分隔):</label>
<input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
7.4 电话号码输入框
元素 <input type="tel"> 用于输入电话号码。它不检查号码格式，但可以通过 pattern 属性设置输入格式。
使用示例：
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
属性
pattern: 设置正则表达式验证输入号码的格式。
带属性的示例：
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
7.5 日期输入框
元素 <input type="date"> 用于输入日期。在支持的浏览器中，会显示一个日历小工具来方便选择日期。
使用示例：
<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">
属性
min: 设置最早允许的日期max: 设置最晚允许的日期
带属性的示例：
<label for="appointment">预约日期:</label>
<input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
7.6 时间输入框
元素 <input type="time"> 用于输入时间。支持的浏览器中会显示时间选择小工具。
使用示例：
<label for="meeting_time">会议时间:</label>
<input type="time" id="meeting_time" name="meeting_time">
属性
min: 设置最早允许的时间max: 设置最晚允许的时间step: 定义时间变化的步长
带属性的示例：
<label for="alarm">闹钟:</label>
<input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
7.7 URL 输入框
元素 <input type="url"> 用于输入网址 (URL)。它会检查输入的文本是否符合 URL 格式。
使用示例：
<label for="website">网站:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
属性
pattern: 设置正则表达式进行额外的数据验证。
带属性的示例：
<label for="personal_website">个人网站:</label>
<input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
7.8 密码输入框
元素 <input type="password"> 用于输入密码。输入的数据会被隐藏，显示为星号或点。
使用示例：
<label for="password">密码:</label>
<input type="password" id="password" name="password">
属性
maxlength: 限制最大字符数placeholder: 占位符文本required: 指定输入框为必填项
带属性的示例：
<label for="new-password">新密码:</label>
<input type="password" id="new_password" name="new_password" maxlength="20" placeholder="请输入密码" required>
7.9 范围输入框
元素 <input type="range"> 用于在某一范围内输入值。它显示为一个滑块。
使用示例：
<label for="volume">音量:</label>
<input type="range" id="volume" name="volume">
属性
min: 设置最小允许值max: 设置最大允许值step: 定义数值变化的步长value: 设置初始值
带属性的示例：
<label for="brightness">亮度:</label>
<input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
7.10 颜色选择框
元素 <input type="color"> 用于选择颜色。在支持的浏览器中，会出现颜色选择小工具。
使用示例：
<label for="favcolor">选择你喜欢的颜色:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
属性
value: 设置初始颜色。
7.11 搜索框
元素 <input type="search"> 用于输入搜索查询。在大多数浏览器中，
它具有内置样式和清除功能。
使用示例：
<label for="search">搜索:</label>
<input type="search" id="search" name="search" placeholder="输入搜索查询">
GO TO FULL VERSION