总结input标签的各种类型
总结input标签的各种类型
文章目录
总结input标签的各种类型一、input标签的定义二、input标签的类型1.type="button"2.type="checkbox"3.type="color"4.type="date"5.type="datetime-local"6.type="email"7.type="file"8.type="hidden"9.type="image"10.type="month"11.type="number"12.type="password"13.type="radio"14.type="range"15.type="reset"16.type="search"17.type="submit"18.type="tel"19.type="text"20.type="time"21.type="url"22.type="week"
一、input标签的定义
标签用于创建交互式表单控件，用于接收用户输入的数据。一般用在
二、input标签的类型
1.type=“button”
type="button" 用于创建一个普通按钮，本身不会执行任何操作，通常需要搭配 JavaScript 代码来触发特定功能。
按钮外观可通过 CSS 自定义样式。点击按钮时，若未绑定事件处理函数，则不会有默认行为。value：设置按钮显示的文本内容。
2.type=“checkbox”
type="checkbox" 用于创建复选框，允许用户从一组选项中选择一个或多个选项。
可以通过 checked 属性设置默认选中状态。多个复选框可以使用相同的 name 属性，方便后端接收数据。checked：设置复选框默认是否选中。value：设置复选框被选中时提交的值。
3.type=“color”
type="color" 用于创建一个颜色选择器，用户点击后会弹出颜色选择对话框，方便选择所需颜色。
不同浏览器的颜色选择器外观可能略有不同。可以通过 value 属性设置默认颜色。value：设置默认选中的颜色，格式为十六进制颜色码（如 #FF0000）。
4.type=“date”
type="date" 用于创建一个日期选择器，用户可以通过日历界面选择日期。
不同浏览器的日期选择器外观可能不同。可以通过 min 和 max 属性限制可选择的日期范围。min：设置可选择的最小日期。max：设置可选择的最大日期。value：设置默认选中的日期。
5.type=“datetime-local”
type="datetime-local" 用于创建一个日期和时间选择器，用户可以选择具体的日期和时间。
不同浏览器的日期和时间选择器外观可能不同。可以通过 min 和 max 属性限制可选择的日期和时间范围。min：设置可选择的最小日期和时间。max：设置可选择的最大日期和时间。value：设置默认选中的日期和时间，格式为 YYYY-MM-DDTHH:mm。
6.type=“email”
type="email" 用于创建一个电子邮件输入框，浏览器会自动验证输入的内容是否符合电子邮件地址的格式。
提交表单时，若输入的内容不符合电子邮件格式，浏览器会提示用户。可以通过 multiple 属性允许用户输入多个电子邮件地址。multiple：允许用户输入多个电子邮件地址，用逗号分隔。pattern：自定义电子邮件地址的验证规则。
7.type=“file”
type="file" 用于创建一个文件选择框，用户可以选择本地文件进行上传。
可以通过 accept 属性限制用户可选择的文件类型。需要配合
8.type=“hidden”
type="hidden" 用于创建一个隐藏的输入框，该输入框不会在页面上显示，但会随表单一起提交数据。
常用于存储一些需要随表单提交的额外数据，如用户 ID、表单标识符等。由于隐藏输入框的值可以被用户修改，因此不适合存储敏感信息。value：设置隐藏输入框的值。
9.type=“image”
type="image" 用于创建一个图像按钮，用户点击图像时会提交表单。
图像按钮可以自定义显示的图片。点击图像按钮时，会将点击位置的坐标作为表单数据提交。src：指定图像的 URL。alt：设置图像的替代文本。
10.type=“month”
type="month" 用于创建一个月份选择器，用户可以选择具体的年份和月份。
不同浏览器的月份选择器外观可能不同。可以通过 min 和 max 属性限制可选择的年份和月份范围。min：设置可选择的最小年份和月份，格式为 YYYY-MM。max：设置可选择的最大年份和月份，格式为 YYYY-MM。value：设置默认选中的年份和月份，格式为 YYYY-MM。
11.type=“number”
type="number" 用于创建一个数字输入框，用户只能输入数字。
可以通过 min、max 和 step 属性限制输入的数字范围和步长。部分浏览器会提供上下箭头按钮，方便用户调整数字。min：设置可输入的最小数字。max：设置可输入的最大数字。step：设置每次调整数字的步长。
12.type=“password”
type="password" 用于创建一个密码输入框，用户输入的内容会被隐藏，通常显示为星号或圆点。
密码输入框会自动隐藏用户输入的内容，保护用户隐私。可以通过 maxlength 属性限制输入的密码长度。maxlength：设置可输入的最大密码长度。placeholder：提供输入提示信息。
13.type=“radio”
type="radio" 用于创建单选按钮，用户只能从一组选项中选择一个选项。
同一组单选按钮需要使用相同的 name 属性。可以通过 checked 属性设置默认选中的选项。checked：设置单选按钮默认是否选中。value：设置单选按钮被选中时提交的值。
14.type=“range”
type="range" 用于创建一个滑块输入框，用户可以通过拖动滑块选择一个范围内的值。
可以通过 min、max 和 step 属性限制滑块的取值范围和步长。部分浏览器会显示滑块当前的值。min：设置滑块的最小值。max：设置滑块的最大值。step：设置滑块每次移动的步长。
15.type=“reset”
type="reset" 用于创建一个重置按钮，点击该按钮会将表单中的所有输入字段恢复到初始值。
重置按钮会立即重置表单，无需确认。可以通过 CSS 自定义按钮的样式。value：设置按钮显示的文本内容。
16.type=“search”
type="search" 用于创建一个搜索输入框，外观和功能类似于普通的文本输入框，但部分浏览器会提供额外的搜索相关功能。
部分浏览器会在输入框中显示清除按钮，方便用户清空输入内容。
可以通过 placeholder 属性提供搜索提示信息。
placeholder：提供搜索提示信息。
17.type=“submit”
type="submit" 用于创建一个提交按钮，点击该按钮会将表单数据提交到服务器。
提交按钮会触发表单的提交事件，将表单数据发送到
18.type=“tel”
type="tel" 用于创建一个电话号码输入框，部分移动设备会为该输入框显示数字键盘。
浏览器不会对输入的内容进行严格的电话号码格式验证。
可以通过 pattern 属性自定义电话号码的验证规则。
pattern：自定义电话号码的验证规则。
placeholder：提供输入提示信息。
19.type=“text”
type="text" 用于创建一个单行文本输入框，用户可以输入任意文本。
是最常用的输入框类型。
可以通过 maxlength 属性限制输入的文本长度。
maxlength：设置可输入的最大文本长度。
placeholder：提供输入提示信息。
20.type=“time”
type="time" 用于创建一个时间选择器，用户可以选择具体的时间。
不同浏览器的时间选择器外观可能不同。
可以通过 min 和 max 属性限制可选择的时间范围。
min：设置可选择的最小时间，格式为 HH:mm。
max：设置可选择的最大时间，格式为 HH:mm。
value：设置默认选中的时间，格式为 HH:mm。
21.type=“url”
type="url" 用于创建一个 URL 输入框，浏览器会自动验证输入的内容是否符合 URL 格式。
提交表单时，若输入的内容不符合 URL 格式，浏览器会提示用户。
可以通过 placeholder 属性提供输入提示信息。
pattern：自定义 URL 的验证规则。
placeholder：提供输入提示信息。
22.type=“week”
type="week" 用于创建一个周选择器，用户可以选择具体的年份和周数。
不同浏览器的周选择器外观可能不同。
可以通过 min 和 max 属性限制可选择的年份和周数范围。
min：设置可选择的最小年份和周数，格式为 YYYY-Www。
max：设置可选择的最大年份和周数，格式为 YYYY-Www。
value：设置默认选中的年份和周数，格式为 YYYY-Www。
