总结input标签的各种类型

总结input标签的各种类型

一、input标签的定义

<input>标签用于创建交互式表单控件，用于接收用户输入的数据。一般用在<fomr表单>中。并且用<label>标签来定义input元素的显示文本。
<input>标签在HTML中是单标签，不用闭合标签

<form id='example'><label form='example' for='name'>姓名</label><input id='name' name='name'><!-- others -->
</form>

二、input标签的类型

1.type=“button”

type="button" 用于创建一个普通按钮，本身不会执行任何操作，通常需要搭配 JavaScript 代码来触发特定功能。

• 按钮外观可通过 CSS 自定义样式。
• 点击按钮时，若未绑定事件处理函数，则不会有默认行为。
• value：设置按钮显示的文本内容。

<input type="button" value="点击我执行操作" onclick="myFunction()">
<script>
function myFunction() {alert('按钮被点击了！');
}
</script>

2.type=“checkbox”

type="checkbox" 用于创建复选框，允许用户从一组选项中选择一个或多个选项。

• 可以通过 checked 属性设置默认选中状态。
• 多个复选框可以使用相同的 name 属性，方便后端接收数据。
• checked：设置复选框默认是否选中。
• value：设置复选框被选中时提交的值。

<form><input type="checkbox" name="interests" value="reading" checked> 阅读<input type="checkbox" name="interests" value="sports"> 运动<input type="checkbox" name="interests" value="music"> 音乐
</form>

3.type=“color”

type="color" 用于创建一个颜色选择器，用户点击后会弹出颜色选择对话框，方便选择所需颜色。

• 不同浏览器的颜色选择器外观可能略有不同。
• 可以通过 value 属性设置默认颜色。
• value：设置默认选中的颜色，格式为十六进制颜色码（如 #FF0000）。

<input type="color" name="bgColor" value="#FF0000" onchange="changeBgColor(this.value)">
<script>
function changeBgColor(color) {document.body.style.backgroundColor = color;
}
</script>

4.type=“date”

type="date" 用于创建一个日期选择器，用户可以通过日历界面选择日期。

• 不同浏览器的日期选择器外观可能不同。
• 可以通过 min 和 max 属性限制可选择的日期范围。
• min：设置可选择的最小日期。
• max：设置可选择的最大日期。
• value：设置默认选中的日期。

<input type="date" name="birthdate" min="1900-01-01" max="2024-12-31">

5.type=“datetime-local”

type="datetime-local" 用于创建一个日期和时间选择器，用户可以选择具体的日期和时间。

• 不同浏览器的日期和时间选择器外观可能不同。
• 可以通过 min 和 max 属性限制可选择的日期和时间范围。
• min：设置可选择的最小日期和时间。
• max：设置可选择的最大日期和时间。
• value：设置默认选中的日期和时间，格式为 YYYY-MM-DDTHH:mm。

<input type="datetime-local" name="appointment" min="2024-01-01T09:00" max="2024-12-31T18:00">

6.type=“email”

type="email" 用于创建一个电子邮件输入框，浏览器会自动验证输入的内容是否符合电子邮件地址的格式。

• 提交表单时，若输入的内容不符合电子邮件格式，浏览器会提示用户。
• 可以通过 multiple 属性允许用户输入多个电子邮件地址。
• multiple：允许用户输入多个电子邮件地址，用逗号分隔。
• pattern：自定义电子邮件地址的验证规则。

<input type="email" name="email" placeholder="请输入您的电子邮件地址" required>

7.type=“file”

type="file" 用于创建一个文件选择框，用户可以选择本地文件进行上传。

• 可以通过 accept 属性限制用户可选择的文件类型。
• 需要配合 <form> 标签的 enctype="multipart/form-data" 属性才能上传文件。
• accept：指定用户可选择的文件类型，如 .jpg,.png 或 image/*。
• multiple：允许用户选择多个文件。

<form action="upload.php" method="post" enctype="multipart/form-data"><input type="file" name="myFile" accept="image/*" multiple><input type="submit" value="上传文件">
</form>

8.type=“hidden”

type="hidden" 用于创建一个隐藏的输入框，该输入框不会在页面上显示，但会随表单一起提交数据。

• 常用于存储一些需要随表单提交的额外数据，如用户 ID、表单标识符等。
• 由于隐藏输入框的值可以被用户修改，因此不适合存储敏感信息。
• value：设置隐藏输入框的值。

<form action="process.php" method="post"><input type="hidden" name="userId" value="123"><input type="submit" value="提交">
</form>

9.type=“image”

type="image" 用于创建一个图像按钮，用户点击图像时会提交表单。

• 图像按钮可以自定义显示的图片。
• 点击图像按钮时，会将点击位置的坐标作为表单数据提交。
• src：指定图像的 URL。
• alt：设置图像的替代文本。

<form action="submit.php" method="post"><input type="image" src="submit-button.png" alt="提交表单">
</form>

10.type=“month”

type="month" 用于创建一个月份选择器，用户可以选择具体的年份和月份。

• 不同浏览器的月份选择器外观可能不同。
• 可以通过 min 和 max 属性限制可选择的年份和月份范围。
• min：设置可选择的最小年份和月份，格式为 YYYY-MM。
• max：设置可选择的最大年份和月份，格式为 YYYY-MM。
• value：设置默认选中的年份和月份，格式为 YYYY-MM。

<input type="month" name="subscriptionMonth" min="2024-01" max="2024-12">

11.type=“number”

type="number" 用于创建一个数字输入框，用户只能输入数字。

• 可以通过 min、max 和 step 属性限制输入的数字范围和步长。
• 部分浏览器会提供上下箭头按钮，方便用户调整数字。
• min：设置可输入的最小数字。
• max：设置可输入的最大数字。
• step：设置每次调整数字的步长。

<input type="number" name="quantity" min="1" max="100" step="1" value="1">

12.type=“password”

type="password" 用于创建一个密码输入框，用户输入的内容会被隐藏，通常显示为星号或圆点。

• 密码输入框会自动隐藏用户输入的内容，保护用户隐私。
• 可以通过 maxlength 属性限制输入的密码长度。
• maxlength：设置可输入的最大密码长度。
• placeholder：提供输入提示信息。

<input type="password" name="password" placeholder="请输入密码" required>

13.type=“radio”

type="radio" 用于创建单选按钮，用户只能从一组选项中选择一个选项。

• 同一组单选按钮需要使用相同的 name 属性。
• 可以通过 checked 属性设置默认选中的选项。
• checked：设置单选按钮默认是否选中。
• value：设置单选按钮被选中时提交的值。

<form><input type="radio" name="gender" value="male" checked> 男<input type="radio" name="gender" value="female"> 女
</form>

14.type=“range”

type="range" 用于创建一个滑块输入框，用户可以通过拖动滑块选择一个范围内的值。

• 可以通过 min、max 和 step 属性限制滑块的取值范围和步长。
• 部分浏览器会显示滑块当前的值。
• min：设置滑块的最小值。
• max：设置滑块的最大值。
• step：设置滑块每次移动的步长。

<input type="range" name="volume" min="0" max="100" step="5" value="50">

15.type=“reset”

type="reset" 用于创建一个重置按钮，点击该按钮会将表单中的所有输入字段恢复到初始值。

• 重置按钮会立即重置表单，无需确认。
• 可以通过 CSS 自定义按钮的样式。
• value：设置按钮显示的文本内容。

<form><input type="text" name="username" value="默认用户名"><input type="reset" value="重置表单">
</form>

16.type=“search”

type="search" 用于创建一个搜索输入框，外观和功能类似于普通的文本输入框，但部分浏览器会提供额外的搜索相关功能。

• 部分浏览器会在输入框中显示清除按钮，方便用户清空输入内容。

• 可以通过 placeholder 属性提供搜索提示信息。

• placeholder：提供搜索提示信息。

<input type="search" name="searchQuery" placeholder="请输入搜索关键词">

17.type=“submit”

type="submit" 用于创建一个提交按钮，点击该按钮会将表单数据提交到服务器。

• 提交按钮会触发表单的提交事件，将表单数据发送到 <form> 标签的 action 属性指定的 URL。

• 可以通过 CSS 自定义按钮的样式。

• value：设置按钮显示的文本内容。

<form action="submit.php" method="post"><input type="text" name="message"><input type="submit" value="提交消息">
</form>

18.type=“tel”

type="tel" 用于创建一个电话号码输入框，部分移动设备会为该输入框显示数字键盘。

• 浏览器不会对输入的内容进行严格的电话号码格式验证。

• 可以通过 pattern 属性自定义电话号码的验证规则。

• pattern：自定义电话号码的验证规则。

• placeholder：提供输入提示信息。

<input type="tel" name="phone" placeholder="请输入电话号码" pattern="\d{3}-\d{4}-\d{4}">

19.type=“text”

type="text" 用于创建一个单行文本输入框，用户可以输入任意文本。

• 是最常用的输入框类型。

• 可以通过 maxlength 属性限制输入的文本长度。

• maxlength：设置可输入的最大文本长度。

• placeholder：提供输入提示信息。

<input type="text" name="username" placeholder="请输入用户名" required>

20.type=“time”

type="time" 用于创建一个时间选择器，用户可以选择具体的时间。

• 不同浏览器的时间选择器外观可能不同。

• 可以通过 min 和 max 属性限制可选择的时间范围。

• min：设置可选择的最小时间，格式为 HH:mm。

• max：设置可选择的最大时间，格式为 HH:mm。

• value：设置默认选中的时间，格式为 HH:mm。

<input type="time" name="meetingTime" min="09:00" max="18:00">

21.type=“url”

type="url" 用于创建一个 URL 输入框，浏览器会自动验证输入的内容是否符合 URL 格式。

• 提交表单时，若输入的内容不符合 URL 格式，浏览器会提示用户。

• 可以通过 placeholder 属性提供输入提示信息。

• pattern：自定义 URL 的验证规则。

• placeholder：提供输入提示信息。

<input type="url" name="website" placeholder="请输入网站 URL" required>

22.type=“week”

type="week" 用于创建一个周选择器，用户可以选择具体的年份和周数。

• 不同浏览器的周选择器外观可能不同。

• 可以通过 min 和 max 属性限制可选择的年份和周数范围。

• min：设置可选择的最小年份和周数，格式为 YYYY-Www。

• max：设置可选择的最大年份和周数，格式为 YYYY-Www。

• value：设置默认选中的年份和周数，格式为 YYYY-Www。

<input type="week" name="reportWeek" min="2024-W01" max="2024-W52">