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

news2024/9/21 14:51:15

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

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

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

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

文章内容如下

✏️前言

✏️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

🌼用于输入单行文本。

<input type="text">

✏️Two、password

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

<input type="password">

✏️Three、number

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

<input type="number" max="10">
<input type="number" min="10">

✏️Four、email

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

<input type="email">

✏️Five、url

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

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

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

<form method="post">
<input type="url" name="urlInput">
<input type="submit" value="提交">
</form>

✏️Three、checkbox

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

<input type="checkbox" name = "hobbyOne">写代码
<input type="checkbox" name = "hobbyTwo">看博客
<input type="checkbox" name = "hobbyThree">看新闻

✏️Six、radio

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

<input type="radio" value = "男" checked>男
<input type="radio" value = "女">女

✏️Seven、file

🌼用于上传文件。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="上传文件">
</form>

😇在上述代码中，<input type="file"> 标签用于创建一个文件上传的输入框，name="file" 用于指定后端接收文件的参数名。<form> 标签中的 action 属性指定了文件上传的目标URL，method="post" 表示使用POST方法提交表单数据，enctype="multipart/form-data" 表示以二进制形式上传文件。

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

✏️Eight、date

🌼用于输入日期

<input type="date">

✏️Nine、time

🌼用于输入时间

<input type="time">

✏️Ten、color

🌼用于选择颜色。

😇表单元素，用于选择颜色。它创建一个颜色选择器，允您可以使用 <input type="color许用户通过点击颜色选择器来选择颜色，然后将所选颜色的值传"> 标签来创建一个颜色选择器输入框，并将选中的颜色应用到其他元素中。

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

HTML 代码示例：

<input type="color" id="color1">
<input type="color" id="color2">

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;
  // 应用到其他元素的样式中
});