HTML 输入标签
<input>
标签的作用:HTML中的<input>
标签定义用户数据输入字段,type
属性决定接受的输入类型。- 不同的输入类型:HTML5支持多种输入类型,包括文本、按钮、复选框、颜色选择器、日期选择器、电子邮件、文件、隐藏输入等。
- 特定属性的使用:
<input>
标签的name
属性指定输入的名称,minlength
、maxlength
、size
等属性用于限制文本长度,pattern
用于验证输入模式。
HTML <input>
标签定义了用户可以输入数据的字段。type
属性决定了接受何种类型的用户输入。
<input type="text" name="firstname" />
浏览器输出
这里,
type
- 决定<input>
标签接受的输入类型name
- 指定输入的名称,当将数据提交给服务器时,数据将以此名称命名。
不同的输入类型
HTML5 中可用的各种输入标签类型包括:
- text - 创建单行文本字段(默认)
- button - 创建无默认功能的按钮
- checkbox - 创建复选框
- color - 创建颜色选择器
- date - 创建日期选择器
- datetime-local - 创建日期和时间选择器
- email - 创建允许用户输入有效电子邮件地址的输入字段
- file - 创建允许用户上传文件或多个文件的输入字段
- hidden - 创建不可见的输入字段
- image - 使用图像创建按钮
- month - 创建允许用户输入月份和年份的输入字段
- password - 创建允许用户安全输入信息的输入字段
- radio - 创建单选按钮
- range - 创建用户可以选择值的范围选择器
- reset - 创建清除所有表单值至默认值的按钮
- search - 允许用户在文本字段中输入搜索查询
- submit - 允许用户将表单提交给服务器
- tel - 定义输入电话号码的字段
- time - 创建接受时间值的输入字段
- url - 让用户输入和编辑 URL
- week - 让用户从日历中选择一周和一年
1. 输入类型 text
输入类型 text
用于创建单行文本字段。它是默认的输入类型。
<label for="name">搜索: </label> <input type="text" id="name" />
浏览器输出
输入类型 text
还可以包含 minlength
、maxlength
和 size
属性。例如,
<label for="name">姓名</label>
<input type="text" id="name" minlength="4" maxlength="8" />
浏览器输出
在上述例子中,只允许输入 4 到 8 个字符长度的值。
注意:如果未提供 type
属性,标签将成为文本类型。
2. 输入类型 button
输入类型 button
用于创建无默认功能的按钮。例如,
<input type="button" value="点击我!" />
浏览器输出
值属性中的文本将显示在按钮上。
注意:通常使用 JavaScript 为此类按钮添加功能。
3. 输入类型 checkbox
输入类型 checkbox
用于创建复选框输入。例如,
<input type="checkbox" id="subscribe" value="subscribe" />
<label for="subscribe">订阅新闻通讯!</label><br />
浏览器输出(未选中的复选框)
复选框可以在选中和未选中之间切换。
浏览器输出(选中的复选框)
只有当复选框被选中时,复选框的值才会包含在表单数据中,如果未选中,则不会包含。
4. 输入类型 color
输入类型 color
用于创建允许用户选择颜色的输入字段。例如,
<input type="color" id="background" /> <label for="background">背景颜色</label>
浏览器输出(展开前)
浏览器输出(展开后)
颜色选择器内置于浏览器中。用户也可以手动输入颜色的十六进制代码。颜色选择器的 UI 会因浏览器而异。
5. 输入类型 date
输入类型 date
用于创建允许用户使用浏览器的日期选择器界面输入日期的输入字段。例如,
<label for="birthday">生日:</label> <input type="date" id="birthday" />
浏览器输出(展开前)
浏览器输出(展开后)
6. 输入类型 datetime-local
输入类型 datetime-local
用于创建允许用户使用浏览器的日期时间选择器选择日期和时间的输入字段。从输入中选择的时间不包含时区信息。例如,
<label for="meeting-time">选择您的预约时间:</label>
<input type="datetime-local" id="meeting-time" />
浏览器输出(展开前)
浏览器输出(展开后)
7. 输入类型 email
输入类型 email
用于创建允许用户输入有效电子邮件地址的输入字段。
<label for="email">输入您的电子邮件:</label> <input type="email" id="email" />
浏览器输出
如果提供的值不是有效的电子邮件地址,该输入字段会抛出错误。例如,
浏览器输出
8. 输入类型 file
输入类型 file
用于创建允许用户从其设备上传文件或多个文件的输入字段。例如,
<input type="file" name="file" />
浏览器输出
9. 输入类型 hidden
输入类型 hidden
用于创建不可见的输入字段。它用于向服务器提供表单中用户无法看到或修改的额外值。例如,
<input type="hidden" name="id" value="123" />
10. 输入类型 image
输入类型 image
用于使用图像创建按钮。
<input type="image" src="/submit.png" alt="submit" />
浏览器输出
让我们看一个如何在表单中使用它的例子。
<form>
<label for="firstname">名字: </label>
<input type="text" id="firstname" name="firstname" /><br /><br />
<label for="lastname">姓氏: </label>
<input type="text" id="lastname" name="lastname" /><br /><br />
<input type="image" src="/submit.png" alt="submit" />
</form>
浏览器输出
11. 输入类型 month
输入类型 month
用于创建允许用户使用浏览器的可视界面输入月份和年份的输入字段。例如,
<label for="start">选择月份:</label> <input type="month" id="start" />
浏览器输出(展开前)
浏览器输出(展开后)
12. 输入类型 password
输入类型 password
用于创建允许用户安全输入信息的输入字段。例如,
<label for="password">密码:</label> <input type="password" id="password" />
浏览器输出
浏览器会使用星号(*)显示用户输入的所有字符。
13. 输入类型 radio
输入类型 radio
用于定义单选按钮。单选按钮在一个组中定义。单选按钮允许用户从一组选项中选择一个选项。
<form>
<input type="radio" id="cat" name="animal" value="cat" />
<label for="cat">猫</label>
<input type="radio" id="dog" name="animal" value="dog" />
<label for="dog">狗</label>
</form>
浏览器输出
从上面的例子中我们可以看到,所有的单选按钮共享相同的 name
属性。这允许用户从单选按钮组中准确地选择一个选项。
提交表单数据时,输入的键将是 name
属性,值将是所选的单选按钮。
注意:提交表单时,name
属性用作数据的键。
14. 输入类型 range
输入类型 range
用于创建范围选择器,用户可以从中选择值。用户可以从给定的范围中选择一个值。默认范围从 0 到 100。例如,
<label for="range">选择值:</label> <input type="range" id="range" value="90" />
浏览器输出
15. 输入类型 reset
输入类型 reset
定义了清除所有表单值至默认值的按钮。例如,
<form>
<label for="name">姓名:</label>
<input id="name" type="text" /><br />
<input type="reset" value="重置" />
</form>
浏览器输出
浏览器输出(重置后)
16. 输入类型 search
输入类型 search
允许用户在文本字段中输入搜索查询。它与输入类型 text 类似。例如,
<label for="search">搜索:</label><input type="search" id="search" />
浏览器输出
注意:除非我们使用一些 JavaScript 来进行搜索计算,否则搜索输入不会作为搜索工作。
17. 输入类型 submit
当用户将表单提交给服务器时使用输入类型 submit
。它呈现为一个按钮。例如,
<input type="submit" value="提交" />
浏览器输出
这里,value
属性中提供的文本将显示在按钮上。
18. 输入类型 tel
输入类型 tel
用于定义输入电话号码的字段。电话号码不会自动验证为特定格式,因为电话格式在世界各地都不同。它具有一个名为 pattern
的属性,用于验证输入的值。例如,
<label for="phone">电话号码:</label>
<input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />