HTML 表单Input类型
HTML 输入类型
以下是您可以在 HTML 中使用的不同input类型:
- <input type="button">
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="hidden">
- <input type="image">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="reset">
- <input type="search">
- <input type="submit">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
type 属性的默认值为“text”。
输入类型文本
<input type="text"> 定义 单行文本输入字段:
示例
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
这就是上面的 HTML 代码在浏览器中的显示方式:
密码
<input type="password"> 定义一个密码字段:
示例
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
<input type="submit" value="提交">
</form>
上面的 HTML 代码在浏览器中的显示为:
密码字段中的字符被屏蔽(显示为星号或圆圈)。
输入类型 提交
<input type="submit"> 定义一个用于将表单数据 提交到表单处理程序的按钮。
表单处理程序通常是带有用于处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定:
示例
<form action="/third/http.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
上面的 HTML 代码在浏览器中的显示为:
如果省略提交按钮的 value 属性,按钮将使用默认文本:
示例
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
reset重置
<input type="reset"> 定义一个重置按钮 ,它将所有表单值重置为其默认值:
示例
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
上面的 HTML 代码在浏览器中的显示为:
如果更改输入值然后单击“重置”按钮,表单数据将重置为默认值。
单选
<input type="radio"> 定义一个单选按钮。
单选按钮让用户只能选择有限数量的选项之一:
示例
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
<input type="submit" value="提交">
</form>
上面的 HTML 代码在浏览器中的显示为:
checkbox类型
<input type="checkbox"> 定义一个复选框。
复选框让用户在有限的选项中选择零个或更多选项。
示例
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
<input type="submit" value="提交">
</form>
上面的 HTML 代码在浏览器中的显示为:
按钮
<input type="button"> 定义一个按钮:
示例
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
上面的 HTML 代码在浏览器中的显示为:
颜色
<input type="color"> 用于应包含颜色的输入字段。
根据浏览器支持,颜色选择器可以显示在输入字段中。
示例
<form>
<label for="favcolor">选择您的最爱
颜色:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
日期
<input type="date"> 用于应包含日期的输入字段。
根据浏览器支持,日期选择器可以显示在输入字段中。
示例
<form>
<label for="birthday">生日:</label>
<input
type="date" id="birthday" name="birthday">
</form>
您还可以使用 min and max 属性为日期添加限制:
示例
<form>
<label for="datemax">输入日期在1980-01-01之前:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
Datetime-local
<input type="datetime-local"> 指定日期和时间输入字段,没有时区。
根据浏览器支持,日期选择器可以显示在输入字段中。
示例
<form>
<label for="birthdaytime">生日(日期和
时间):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
电子邮件
<input type="email"> 用于应包含电子邮件地址的输入字段。
根据浏览器支持,提交时可以自动验证电子邮件地址。
一些智能手机识别电子邮件类型,并在键盘上添加“.com”以匹配电子邮件输入。
示例
<form>
<label for="email">输入你的电子邮箱:</label>
<input type="email" id="email" name="email">
</form>
文件
为 <input type="file"> 文件上传定义了一个文件选择字段和一个“浏览”按钮。
示例
<form>
<label for="myfile">选择一个文件:</label>
<input type="file" id="myfile" name="myfile">
</form>
隐藏类型
定义了一个隐藏的 <input type="hidden"> 输入字段(对用户不可见)。
隐藏字段允许 Web 开发人员在提交表单时包含用户无法看到或修改的数据。
隐藏字段通常存储提交表单时需要更新的数据库记录。
注意:虽然该值不会在页面内容中显示给用户,但可以使用任何浏览器的开发人员工具或“查看源代码”功能看到(并且可以编辑)。不要使用隐藏输入作为一种安全形式!
示例
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
年月
<input type="month"> 允许用户选择月份和年份。
根据浏览器支持,日期选择器可以显示在输入字段中。
示例
<form>
<label for="bdaymonth">生日(月份和
年):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
数字
<input type="number"> 定义了一个数字 输入字段。
您还可以对接受的数字设置限制。
以下示例显示一个数字输入字段,您可以在其中输入 1 到 5 之间的值:
示例
<form>
<label for="quantity">数量(1至
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
输入限制
以下是一些常见输入限制的列表:
属性 | 描述 |
---|---|
checked | 指定页面加载时应预选输入字段 |
disabled | 指定应禁用输入字段 |
max | 指定输入字段的最大值 |
maxlength | 指定输入字段的最大字符数 |
min | 指定输入字段的最小值 |
pattern | 指定正则表达式以检查针对输入值 |
readonly | 指定仅读取输入字段(无法更改) |
required | 指定需要输入字段(必须填写) |
size | 指定输入字段的长度(字符) |
step | 指定输入字段的法定数字步长 |
value | 指定输入字段的默认值 |
您将在下一章中了解有关输入限制的更多信息。
以下示例显示了一个数字输入字段,您可以在其中输入一个从 0 到 100 的值,步长为 10。默认值为 30:
示例
<form>
<label for="quantity">数量:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
range 范围
<input type="range"> 定义了一个用于输入精确值不重要的数字的控件(如滑块控件)。 min 默认范围是 0 到 100。但是,您可以使用、 max 和 step 属性设置接受哪些数字的限制:
示例
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
search 搜索
<input type="search"> 用于搜索字段(搜索字段的行为类似于常规文本字段)。
示例
<form>
<label for="gsearch">搜索Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
tel 电话
<input type="tel"> 用于应包含电话号码的输入字段。
示例
<form action="/third/http.php">
<label for="phone">输入你的电话号码:</label>
<input type="tel" id="phone" name="phone"
pattern="1[0-9]{10}">
<input type="submit">
</form>
time 时间
<input type="time"> 允许用户选择时间(无时区)。
根据浏览器的支持,时间选择器可以显示在输入字段中。
示例
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
URL 网址
<input type="url"> 用于应包含 URL 地址的输入字段。
根据浏览器的支持,url 字段可以在提交时自动验证。
一些智能手机识别 url 类型,并在键盘上添加“.com”以匹配 url 输入。
示例
<form>
<label for="homepage">添加您的主页:</label>
<input type="url" id="homepage" name="homepage">
</form>
week 周
允许用户选择 <input type="week"> 一个周和一年。
根据浏览器支持,日期选择器可以显示在输入字段中。
示例
<form>
<label for="week">选择一个星期:</label>
<input type="week" id="week" name="week">
<input type="submit" value="提交">
</form>