掌握 HTML：深入理解和应用 <input> 标签

是的，作为前端开发者，我们经常使用到这个标签。不过，别以为<input>只是个平平无奇的标签，它其实有趣得多

当谈到<input>标签时，我们不能忽视它最重要的属性——type（类型）。它有 22 个属性值，你没听错，就是 22 个

首先，我们有最常见的类型——text（文本）。当你需要用户输入一些文字时，就可以用它。你可以设定预设值（value），起个字段名称（name），还能展示一段提示文本（placeholder）

接下来是 password（密码）类型，当你需要用户输入密码时使用它，页面上就只能显示圆点或星号，保护用户的信息安全

还有checkbox（复选框），允许用户选择多个选项；radio（单选框），让用户在多个选项中只能选择一个

还有许多其他类型，例如date（日期），number（数字），email（电子邮件），url（网址）等等

每个类型都有自己独特的用途，让开发变得更加丰富多样

目录

• button：按钮
• checkbox：多选框
• color：颜色选择框
• date：日期选择框
• datetime-local：日期时间选择框
• email：邮箱输入框
• file：文件选择框
• hidden：隐藏
• image：图片按钮
• month：月份输入框
• number：数字输入框
• password：密码输入框
• radio：单选框
• range：滑块
• reset：重置按钮
• search：搜索输入框
• submit：提交按钮
• tel：电话号码输入框
• text：文本输入框
• time：时间选择框
• url：网址输入框
• week：周输入框

button：按钮

基本用法

<input type="button" value="按钮" />

功能描述

它是 <input> 标签的一种特殊类型

当你需要在网页上添加一个按钮时，<input type="button">就派上用场了，<button> 表示很赣

你可以为按钮设置一个特定的值（value），比如说“点击我”或者“提交”，用来为按钮添加文本内容

这个按钮并不像你想的那样有很多花样

它就是一个按钮，没什么特别的，不像其他类型的输入框，它并不接收用户的输入，它只是专门用来触发某些动作的

当然，即使它看起来简单，你也可以通过自定义样式让它变得炫酷

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="button"	1	12	1	15	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="button"	18	4	14	1	4.4

参考

MDN-input_button

checkbox：多选框

基本用法

<div>
  <input id="checkout-html" name="checkout-html" type="checkbox" value="checkout-html" checked></input>
	<label for="checkout-html">HTML</label>
</div>

<div>
  <input id="checkbox-css" name="checkbox-css" value="checkbox-css" type="checkbox"></input>
	<label for="checkbox-css">CSS</label>
</div>

功能描述

当你需要在网页上添加一个复选框时，<input type="checkbox">就派上用场了

这个复选框可以让你设置一个值（value），同时也可以设置一个字段名（name）来标识它，当用户点击了复选框，它就会被选中，当再次点击，它就会取消选中

你甚至可以设置预设的选中状态（checked）

你也可以通过一些 JavaScript 代码来获取复选框的选中状态，然后根据用户的选择进行一些逻辑操作

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="checkbox"	1	12	1	15	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="checkbox"	18	4	14	1	4.4

参考

MDN-input_checkbox

color：颜色选择框

基本用法

<input type="color" value="#def0fd" />

功能描述

<input type="color">可以在网页中创建一个颜色选择器，让用户挑选他们喜欢的颜色

当用户点击这个输入框时，会弹出一个颜色选择器，他们可以通过拖动鼠标或者直接输入颜色的 HEX 代码来选择他们喜欢的颜色

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="color"	20	14	29	12	12.1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="color"	25	27	12	12.2	4.4

参考

MDN-input_color

date：日期选择框

基本用法

<input type="date" value="2023-07-05" min="2023-01-01" max="2023-12-31" />

功能描述

<input type="date"> 它可以让用户选择日期，在网页中显示一个日期选择器

当用户点击这个日期输入框时，一个日历会弹出，用户可以通过点击日历中的日期来选择他们想要的日期

你还可以通过一些额外的属性来自定义这个日期输入框

例如，你可以设置最小日期（min）和最大日期（max），以便限制用户可选择的日期范围，这可以避免用户选择不符合要求的日期

看看这个例子：<input type="date" value="2023-07-05" min="2023-01-01" max="2023-12-31">，我们给它设置了一个默认值（2023 年 7 月 5 日），并限制了可选择的日期范围在 2023 年 1 月 1 日到 2023 年 12 月 31 日之间

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="date"	20	12	57	11	14.1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="date"	25	57	11	5	4.4

参考

MDN-input_date

datetime-local：日期时间选择框

基本用法

<input
  type="datetime-local"
  value="2023-07-05T13:55"
  min="2023-01-01T00:00"
  max="2023-12-31T23:59"
/>

功能描述

注意

由于 datetime-local 类型受限于浏览器支持，并且不同浏览器在输入方法上存在差异

目前最好是使用第三方框架或库来展示，或者实现一个自己的输入控件

另一个方法是拆分为 date 和 time 输入控件

这两个的支持都比 datetime-local 更广泛

<input type="datetime-local">比<input type="date">更是厉害，它不仅可以让用户选择日期，还可以选择时间

假设我们有这样一个例子：<input type="datetime-local" value="2023-07-05T18:30" min="2023-01-01T00:00" max="2023-12-31T23:59">，我们给它设置了一个默认值（2023 年 7 月 5 日 18:30），并限制了可选择的日期范围在 2023 年 1 月 1 日至 2023 年 12 月 31 日，时间范围在 00:00 至 23:59 之间

当用户点击这个日期时间输入框时，一个弹出窗口会出现，里面同时有一个日期选择器和时间选择器，用户可以通过点击选择器中的日期和时间来自由地选择他们想要的日期和时间

与此同时，你也可以为这个日期时间输入框设置一些自定义样式，比如改变边框颜色、调整大小或者添加一些动画效果，让它看起来更加符合你的网页需求

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="datetime-local"	20	12	93	11	14.1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="datetime-local"	25	93	11	5	4.4

参考

MDN-input_datetime-local

email：邮箱输入框

基本用法

<input type="email" />

功能描述

在你的网页中使用 <input type="email">，用户就可以在一个文本框中输入他们的电子邮件地址

这个输入框会自动检查输入内容是否符合电子邮件地址的格式要求，以确保用户输入的是有效的邮件地址

当用户输入一个不合法的电子邮件格式时，浏览器会自动提示用户输入正确的电子邮件地址

另外，你还可以使用一些额外的属性来进一步自定义这个电子邮件输入框

• 可以使用 required 属性要求用户必须输入电子邮件地址

• 可以使用 placeholder 属性在输入框中显示一个提示性的文本，引导用户输入正确的电子邮件格式

• 可以使用 pattern 属性自定义校验规则

  邮箱必须是以 @163.com 为后缀 <input type="email" pattern=".+@163\.com" />
  

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="email"	20	12	93	11	14.1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="email"	25	93	11	5	4.4

参考

MDN-input_email

file：文件选择框

基本用法

<input type="file" accept="image/*,.pdf" />

功能描述

<input type="file"> 标签是用于在网页上创建一个文件上传的选择框，它允许用户从他们的计算机上选择一个文件并上传到网页中

这个功能非常有用，特别是在需要用户上传图片、文档或其他文件的场景下

当用户点击这个文件上传的输入框时，系统的文件选择对话框会弹出，用户可以在自己的计算机上浏览文件，并选择要上传的文件

一旦用户选择了一个文件，该文件的路径就会显示在输入框旁边，这样一来，你就可以轻松地获取用户上传的文件路径，并在后续的处理中使用这个文件

另外，你还可以使用一些额外的属性来进一步约束文件上传

• 可以使用 accept 属性限制用户只能上传特定类型的文件
• 可以使用 multiple 属性来决定是否允许多选

文件类型说明

唯一文件类型说明符是一个字符串，每个唯一文件类型说明符可以采用下列形式之一：

• 一个以英文句号（“.”）开头的合法的不区分大小写的文件名扩展名。例如：.jpg、.pdf 或 .doc
• 一个不带扩展名的 MIME 类型字符串
• 字符串 audio/*，表示“任何音频文件”
• 字符串 video/*，表示“任何视频文件”
• 字符串 image/*，表示“任何图片文件”

accept 属性的值是包含一个或多个（用逗号分隔）唯一文件类型说明符的字符串

例如，一个文件选择器需要能被表示成一张图片的内容，包括标准的图片格式和 PDF 文件

<input type="file" accept="image/*,.pdf" />

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="file"	1	12	1	11	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="file"	18	4	11	1	4.4

参考

MDN-input_file

hidden：隐藏

基本用法

是不是什么都看不到，看不到就对了
<input type="hidden" name="userid" value="123456" />

功能描述

<input type="hidden"> 是一个隐藏类型的表单输入元素

它可以在表单中存储数据，但不会在用户界面上显示出来，这意味着用户无法直接看到或更改这个隐藏字段的值

让我们看看一个例子：

<input type="hidden" name="userid" value="123456" />

在这个例子中，我们创建了一个隐藏的输入字段，字段名为 "userid" ，值为 "123456"。当表单提交时，无论用户是否能看到这个字段，它的值都会被一同提交到服务器

注意

尽管该值并未作为页面内容中显示给用户，但仍然可以使用任何浏览器的开发者工具或“查看源代码”功能来查看并进行编辑。请不要将表单的安全性依赖于使用 hidden 输入上

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="hidden"	1	12	1	2	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="hidden"	18	4	11	1	4.4

参考

MDN-input_hidden

image：图片按钮

基本用法

<input type="image" src="image.png" alt="Submit" />

功能描述

<input type="image"> 是一种用于在 HTML 表单中添加图像按钮的标签

它允许用户通过单击图像来提交表单，通常用于实现自定义的图像按钮、地图导航等交互功能

<input type="image"> 的常用属性：

• src：用于指定要显示的图像路径或 URL
• alt：用于为图像添加替代文本，以提供可访问性和当图像无法加载时的说明

需要注意的是，<input type="image"> 需要在 <form> 元素内使用，并与其他表单元素一起提交表单数据

当用户单击 <input type="image"> 标签中的图像时，表单数据会按照常规的 <form> 提交方式进行发送

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="image"	1	12	1	15	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="image"	18	4	14	1	4.4

参考

MDN-input_image

month：月份输入框

基本用法

<input type="month" min="2023-01" max="2023-12" value="2023-7" />

功能描述

<input type="month"> 是一个用于在表单中选择年份和月份的输入元素，它会显示一个月份选择器，供用户选择指定的年份和月份

举个例子

<input type="month" min="2023-01" max="2023-12" value="2023-7" />

在这个例子中，我们设置了 min 属性为 "2023-01" ，max 属性为 "2023-12" ，value 属性为 "2023-7"

这意味着用户只能在 2023 年 1 月至 2023 年 12 月之间选择，并且默认选中的是 2023 年 7 月

除了你设置的 min、max 和 value 属性之外，还可以通过其他属性进行更多的定制

例如，你可以设置 required 属性来确保用户必须选择一个月份；你还可以使用 JavaScript 来操作和验证用户输入

---

这个月份输入框的外观可能因浏览器而异，但通常会显示为一个下拉选择框，可让用户选择年份和月份

注意

需要注意浏览器兼容问题

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="month"	20	12	No	11	No

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="month"	25	18	14	1.5	4.4

参考

MDN-input_month

number：数字输入框

基本用法

<input type="number" min="0" max="100" value="50" />

功能描述

<input type="number"> 是一个输入框，看起来和普通的文本输入框没什么不同，但是它有一个特殊的地方，就是它只允许输入数字

当然， <input type="number"> 还有一些其他的特性，比如你可以设置最小值和最大值，这样一来，用户就不能在这个范围之外乱输数字了

比如，假设我设置了 <input type="number" min="0" max="100">，那么用户只能输入 0 到 100 之间的数字

注意

逻辑上，不应该向数字输入框输入数字以外的字符

但某些浏览器允许这些不合法字符，另外一些浏览器不允许

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="number"	7	12	29	15	5.1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="number"	18	29	14	5	4.4

参考

MDN-input_number

password：密码输入框

基本用法

<input type="password" minlength="6" placeholder="输入您的密码" />

功能描述

<input type="password"> 和普通的文本输入框长得很像，但是它有一个特殊功能，就是它会将你输入的字符隐藏起来

当你输入密码时，屏幕上不会显示实际的字符，而是用星号（“*”）或点（“•”）等符号来代替

这个<input type="password">还有一些其他的小聪明

比如，有时候你会发现在输入密码的时候，字符后面会自动加上一个小眼睛图标，点一下那个小眼睛，就能切换密码显示和隐藏

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="password"	1	12	1	2	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="password"	18	4	14	1	4.4

参考

MDN-input_password

radio：单选框

基本用法

<div>
  <input id="radio-html" name="radio" type="radio" value="radio-html" checked></input>
	<label for="radio-html">HTML</label>
</div>
<div>
  <input id="radio-css" name="radio" type="radio" value="radio-css"></input>
	<label for="radio-css">CSS</label>
</div>

功能描述

<input type="radio"> 标签是表单中一种常见的选项类型，用来让用户从多个预定义的选项中选择一个

<input type="radio"> 标签可以创建一个单选框，它具有以下几个属性：

• name 属性：用于定义一组选项的名称，相同名称的选项会被视为一组，用户只能在这一组选项中选择一个
• value 属性：用来指定每个选项的值，当用户选择某个选项时，该选项的值会被提交到服务器或者通过 JavaScript 代码进行处理
• checked 属性：用来指定初始状态下哪个选项被选中，默认情况下，第一个出现的选项会被选中

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="radio"	1	12	1	15	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="radio"	18	4	14	1	4.4

参考

MDN-input_radio

range：滑块

基本用法

<label for="voice">声音：</label>
<input type="range" min="1" max="100" value="50" name="voice" id="voice" />

功能描述

<input type="range"> 标签则是一种用于创造滑动条的标签，它可以让用户通过拖动滑块来选择一个指定范围内的数值

标签具有以下几个属性：

• name 属性：用于定义滑动条的名称，可以在提交表单时使用
• min 和 max 属性：分别定义滑动条可以选择的最小值和最大值
• value 属性：定义滑动条初始时的数值，默认为最小值
• step 属性：定义滑动条每次调整的步长，默认为 1

通过使用 <input type="range"> 标签，开发人员可以为用户提供更直观、交互性更强的操作方式

它可以用于各种互动应用，比如调整音量、选择时长、拖动大小等

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="range"	4	12	23	11	3.1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="range"	57	52	11	5	4.4

参考

MDN-input_range

reset：重置按钮

基本用法

<input type="reset" value="Reset" />

功能描述

<input type="reset"> 标签是用来创建一个重置按钮，当用户点击该按钮时，表单中的输入内容将会被恢复到默认值或者为空

相关信息

需要注意的是，<input type="reset"> 标签的使用应该谨慎，因为它会重置整个表单中的输入内容，并且没有确认提示

如果您的设计不需要提供重置功能，那么最好不要包含这个标签，以避免用户误操作或者造成不必要的困扰

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="reset"	1	12	1	15	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="reset"	18	4	14	1	4.4

参考

MDN-input_reset

search：搜索输入框

基本用法

<input type="search" name="q" placeholder="站内搜索..." />

功能描述

在网页中，搜索功能是用户经常使用的重要功能之一

为了提供更方便、快捷的搜索体验，就有了 <input type="search"> 标签，用于创建搜索输入框

<input type="search"> 标签的主要特点如下：

• 默认图标：<input type="search"> 标签在浏览器中会显示一个搜索图标，以增强搜索框的可识别性
• 提示文本：可以通过为 <input type="search"> 标签添加 placeholder 属性来设置搜索输入框的提示文本，以引导用户输入相关内容
• 清除按钮：在一些现代浏览器中，<input type="search"> 标签还会自动添加一个清除按钮，方便用户一键清除输入内容

需要注意的是，<input type="search"> 标签并不是强制的，也可以使用 <input type="text"> 标签来实现搜索输入框

但是使用 <input type="search"> 标签能够更好地在浏览器中表现为搜索的语义化，以及提供一些额外的功能和样式优化

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="search"	5	12	4	10.6	5

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="search"	18	4	14	4.2	4.4

参考

MDN-input_search

submit：提交按钮

基本用法

<input type="submit" value="Submit" />

功能描述

在网页中，表单提交是用户最常用的一种交互行为，而 <input type="submit"> 标签就是用来创建提交按钮的

<input type="submit"> 标签的主要特点如下：

• value 属性：用来设置提交按钮的显示文本，默认为 "Submit"。可以根据具体的需求设置适合的显示文本，以增强按钮的语义化
• 表单关联：为了使 <input type="submit"> 标签能够正确地提交表单，需要将该标签放在 <form> 标签中，并与需要提交的表单进行关联

当用户填写完表单并点击提交按钮时，表单中的数据将被发送到服务器进行处理

需要注意的是，虽然 <input type="submit"> 标签是最常见的提交按钮形式，但并不是唯一的选择

HTML 还提供了其他形式的提交按钮，比如使用 <button> 标签来创建按钮，并通过 JavaScript 控制其提交行为

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="submit"	1	12	1	15	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="submit"	18	4	14	1	4.4

参考

MDN-input_submit

tel：电话号码输入框

基本用法

<label for="phone">手机号码：</label>
<input type="tel" id="phone" name="phone" />

功能描述

<input type="tel"> 是一种用于在 HTML 表单中接收电话号码输入的标签

它提供了一种方便的方式让用户输入和验证电话号码，通常用于注册、联系信息等场景

当用户在 <input type="tel"> 中输入电话号码时，浏览器会根据所设置的属性进行验证

手机键盘将自动弹出，以方便用户输入数字和其他与电话号码相关的字符

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="tel"	3	12	1	11	4

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="tel"	18	1	11	3	3.7

参考

MDN-input_tel

text：文本输入框

基本用法

<label for="username">昵称：</label>
<input
  type="text"
  id="username"
  name="username"
  minlength="4"
  maxlength="18"
  size="20"
/>

功能描述

<input type="text"> 是一种用于在 HTML 表单中接收文本输入的标签

<input type="text"> 的常用属性：

• minlength：用于指定用户输入的最小长度限制
• maxlength：用于指定用户输入的最大长度限制
• size：用于指定文本输入框的显示宽度，以字符数为单位
• required：表示这个字段是必填项，如果用户没有输入内容，浏览器会显示一个警告

需要注意的是，虽然 minlength 和 maxlength 属性可以在前端进行基本的输入限制，但不可靠

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="text"	1	12	1	15	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="text"	18	4	14	1	4.4

参考

MDN-input_text

time：时间选择框

基本用法

<label for="time">时间：</label>
<input type="time" id="time" name="time" min="00:00" max="23:59" />

功能描述

<input type="time"> 是一种用于在 HTML 表单中接收时间输入的标签

它可以方便地让用户选择时间，通常用于预约、提醒和时刻选择等场景

<input type="time"> 的常用属性：

• min：用于指定用户可以选择的最小时间。在上述示例中，我们设置为"00:00"，表示用户无法选择更早的时间
• max：用于指定用户可以选择的最大时间。在上述示例中，我们设置为"23:59"，表示用户无法选择更晚的时间

用户在 <input type="time"> 中选择时间时，通常会显示一个滚动选择器或者下拉列表，用户可以通过这些界面元素方便地选择时间

需要注意的是，不同浏览器对 <input type="time"> 的展示和支持程度可能有所不同，某些浏览器可能会忽略min和max属性

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="time"	20	12	57	10	14.1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="time"	25	57	10.1	5	4.4

参考

MDN-input_time

url：网址输入框

基本用法

<label for="url">网址：</label>
<input
  type="url"
  name="url"
  id="url"
  placeholder="https://dreamruins.com"
  pattern="https://.*"
  size="30"
/>

功能描述

<input type="url"> 是一种用于在 HTML 表单中接收 URL 输入的标签

它可以方便地让用户输入并验证网址，通常用于用户提交网址、链接或者导航目标等场景

<input type="url"> 的常用属性：

• placeholder：用于在输入框为空时显示的提示文本。在上述示例中，我们设置为 https://dreamruins.com，作为一个示例 URL
• pattern：用于指定用户输入的 URL 的正则表达式模式。在上述示例中，我们设置为"https://.*"，表示输入的 URL 必须以"https://"开头
• size：用于指定文本输入框的显示宽度，以字符数为单位

在用户输入 URL 时，浏览器会验证输入的值是否符合 URL 的格式要求，如果用户输入的 URL 不满足正则表达式模式，浏览器会显示一个警告提示

需要注意的是，虽然浏览器会验证 URL 的格式，但并不能保证用户提供的 URL 是有效的或者存在

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="url"	1	12	1	11	1

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="url"	18	4	14	1	4.4

参考

MDN-input_url

week：周输入框

基本用法

<label for="week">周：</label>
<input
  type="week"
  name="week"
  id="week"
  min="2023-W1"
  max="2023-W52"
  value="2023-W27"
/>

功能描述

<input type="week"> 是一种用于在 HTML 表单中接收周数输入的标签

它可以方便地让用户选择特定年份的周数，通常用于项目计划、学术日历和时间调度等场景

<input type="week"> 的常用属性：

• min：用于指定用户可以选择的最小周数。在上述示例中，我们设置为"2023-W1"，表示用户无法选择更早的周数。
• max：用于指定用户可以选择的最大周数。在上述示例中，我们设置为"2023-W52"，表示用户无法选择更晚的周数。
• value：用于设置周数输入框的初始值。在上述示例中，我们设置为"2023-W27"，表示默认显示为 2023 年的第 27 周。

用户在 <input type="week"> 中选择周数时，通常会显示一个滚动选择器或者下拉列表，用户可以通过这些界面元素方便地选择周数

注意

需要注意的是，不同浏览器对 <input type="week"> 的展示和支持程度可能有所不同

某些浏览器可能会忽略 min 和 max 属性

浏览器兼容性

相关信息

• 数字表示该浏览器开始支持的版本

• No 表示不支持

PC 端

PC 端	Chrome	Edge	Firefox	Opera	Safari
type="week"	20	12	No	11	No

---

移动端

移动端	Chrome Android	Firefox Android	Opera Android	Safari IOS	WebView Android
type="week"	25	18	14	No	4.4

参考

MDN-input_week