请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

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

2023-07-13

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

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

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

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

目录

文章内容如下

✏️前言

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

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


✏️Eleven、submit

🌼用于提交表单。

<input type="submit">

✏️Twelve、button

🌼用于创建自定义按钮。

<input type="button">

✏️总结

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

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部