HTML的Input(type)的属性都有哪些

作者介绍：一个有梦想、有理想、有目标的，且渴望能够学有所成的追梦人。

学习格言：不读书的人,思想就会停止。——狄德罗

⛪️个人主页：进入博主主页

欢迎小伙伴们访问到博主的文章内容，在浏览阅读过程发现需要纠正的地方，烦请指出，愿能与诸君一同成长！

目录

文章内容如下

✏️前言

✏️One、text

✏️Two、password

✏️Three、number

✏️Four、email

✏️Five、url

✏️Three、checkbox

✏️Six、radio

✏️Seven、file

✏️Eight、date

✏️Nine、time

✏️Ten、color

✏️Eleven、submit

✏️Twelve、button

✏️总结

---

文章内容如下

---

✏️前言

HTML的input元素是用于在表单中接收和处理用户输入的元素。input元素可以使用type属性来指定不同的输入类型。

---

✏️One、text

用于输入单行文本。

---

✏️Two、password

用于输入密码，并将输入内容隐藏为星号或圆点。

---

✏️Three、number

用于输入数值，可以使用min和max属性限制输入的范围。

---

✏️Four、email

用于输入电子邮件地址，浏览器会自动检查输入的格式是否正确。

---

✏️Five、url

用于输入网址，浏览器会自动检查输入的格式是否正确。

在 

 元素内部，使用  元素来创建一个输入框，并将 type 属性设置为 "url"，以指定它是一个 URL 输入框。

可选：你可以添加一个提交按钮，以便用户提交表单。

---

✏️Three、checkbox

用于选择多个选项中的一个或多个。

写代码
看博客
看新闻 

---

✏️Six、radio

用于选择多个选项中的一个。

男
女

---

✏️Seven、file

用于上传文件。

在上述代码中， 标签用于创建一个文件上传的输入框，name="file" 用于指定后端接收文件的参数名。

 标签中的 action 属性指定了文件上传的目标URL，method="post" 表示使用POST方法提交表单数据，enctype="multipart/form-data" 表示以二进制形式上传文件。

需要注意的是， 标签的实现和样式可能因浏览器而异，所以在实际使用时可能需要进行一些兼容性处理。

---

✏️Eight、date

用于输入日期

---

✏️Nine、time

用于输入时间

---

✏️Ten、color

用于选择颜色。

表单元素，用于选择颜色。它创建一个颜色选择器，允您可以使用  标签来创建一个颜色选择器输入框，并将选中的颜色应用到其他元素中。

例如递给后台服务器进行处理或者用于前端样式的设置。，您可以创建两个颜色选择器输入框，并使用 JavaScript 来获取选中的颜色，并将其应用到其他元素的样式中。

HTML 代码示例：

var color1Input = document.getElementById("color1");
var color2Input = document.getElementById("color2");

color1Input.addEventListener("input", function() {
  var selectedColor = color1Input.value;
  document.body.style.backgroundColor = selectedColor;
});

color2Input.addEventListener("input", function() {
  var selectedColor = color2Input.value;
  // 应用到其他元素的样式中
});

这样，当您选择颜色时，第一个颜色选择器会将选中的颜色应用到页面背景颜色中，您可以根据需要修改 JavaScript 部分，将选中的颜色应用到其他元素。

---

✏️Eleven、submit

用于提交表单。

---

✏️Twelve、button

用于创建自定义按钮。

---

✏️总结

这只是一部分常用的type属性，还有其他一些类型可以根据需要使用。不同的type属性会影响浏览器对输入的验证和展示方式，以提供更好的用户体验。