前端必知必会-html中input的type设置

news2024/12/24 8:47:38

文章目录

  • HTML type的设置
  • 输入类型文本
  • 输入类型密码
  • 输入类型提交
  • 输入类型重置
  • 输入类型单选按钮
  • 输入类型复选框
  • 输入类型按钮
  • 输入类型颜色
  • 输入类型日期
  • 输入类型 Datetime-local
  • 输入类型电子邮件
  • 输入类型图像
  • 输入类型 文件
  • 输入类型 隐藏
  • 输入类型 月份
  • 输入类型 数字
  • 输入类型范围
  • 输入类型搜索
  • 输入类型 Tel
  • 输入类型 Time
  • 输入类型 Url
  • 输入类型 Week
  • 总结

HTML type的设置

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

提示：type 属性的默认值为“text”。

输入类型文本

<input type="text"> 定义单行文本输入字段：

示例

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

在这里插入图片描述

输入类型密码

<input type="password"> 定义密码字段：

示例

<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

密码字段中的字符被屏蔽（显示为星号或圆圈）。

在这里插入图片描述

输入类型提交

<input type="submit"> 定义用于将表单数据提交给表单处理程序的按钮。

表单处理程序通常是一个带有用于处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

示例

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

如果省略提交按钮的 value 属性，按钮将获得默认文本：

示例

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓氏：</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>

在这里插入图片描述

输入类型重置

<input type="reset">定义一个重置按钮，该按钮将重置所有表单值，使其恢复为默认值：

示例

<form action="/action_page.php">
<label for="fname">名字：</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓氏：</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

如果您更改输入值，然后单击“重置”按钮，表单数据将重置为默认值。

在这里插入图片描述

输入类型单选按钮

<input type="radio"> 定义单选按钮。

单选按钮让用户只能从有限数量的选项中选择一个：

示例

<p>选择您最喜欢的 Web 语言：</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

在这里插入图片描述

输入类型复选框

<input type="checkbox">定义复选框。

复选框让用户可以从有限数量的选项中选择零个或多个选项。

示例

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> 我有一辆自行车</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> 我有一辆汽车</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> 我有一艘船</label>
</form>

在这里插入图片描述

输入类型按钮

<input type="button"> 定义一个按钮：

示例

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

上面的 HTML 代码将在浏览器中显示如下浏览器：

输入类型颜色

<input type="color"> 用于应包含颜色的输入字段。

根据浏览器支持，颜色选择器可以显示在输入字段中。

示例

<form>
<label for="favcolor">选择您喜欢的颜色：</label>
<input type="color" id="favcolor" name="favcolor">
</form>

输入类型日期

<input type="date"> 用于应包含日期的输入字段。

根据浏览器支持，日期选择器可以显示在输入字段中。

示例

<form>
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday">
</form>

您还可以使用 min 和 max 属性为日期添加限制：

示例

<form>
<label for="datemax">输入 1980-01-01 之前的日期：</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">输入 2000-01-01 之后的日期：</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

输入类型 Datetime-local

<input type="datetime-local">指定日期和时间输入字段，不带时区。

根据浏览器支持情况，日期选择器可以显示在输入字段中。

示例

<form>
<label for="birthdaytime">生日（日期和时间）：</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

输入类型电子邮件

<input type="email">用于应包含电子邮件地址的输入字段。

根据浏览器支持情况，电子邮件地址可以在提交时自动验证。

某些智能手机可以识别电子邮件类型，并在键盘上添加“.com”以匹配电子邮件输入。

示例

<form>
<label for="email">输入您的电子邮件：</label>
<input type="email" id="email" name="email">
</form>

输入类型图像

<input type="image">将图像定义为提交按钮。

图像的路径在 src 属性中指定。

示例

<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

输入类型 文件

<input type="file"> 定义文件选择字段和文件上传的“浏览”按钮。

示例

<form>
<label for="myfile"> 选择文件：</label>
<input type="file" id="myfile" name="myfile">
</form>

输入类型 隐藏

<input type="hidden"> 定义隐藏输入字段（用户不可见）。

隐藏字段允许 Web 开发人员在提交表单时包含用户无法看到或修改的数据。

隐藏字段通常存储在提交表单时需要更新的数据库记录。

注意：虽然该值不会在页面内容中显示给用户，但可以使用任何浏览器的开发人员工具或“查看源代码”功能看到（并可以编辑）。不要使用隐藏输入作为安全措施！

示例

<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

输入类型 月份

<input type="month">允许用户选择月份和年份。

根据浏览器支持，日期选择器可以显示在输入字段中。

示例

<form>
<label for="bdaymonth">生日（月份和年份）：</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>

输入类型 数字

<input type="number">定义数字输入字段。

您还可以设置对可接受数字的限制。

以下示例显示一个数字输入字段，您可以在其中输入 1 到 5 之间的值：

示例

<form>
<label for="quantity">数量（介于 1 和 5 之间）：</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

输入限制
以下是一些常见输入限制的列表：

属性描述
checked指定在页面加载时应预先选择输入字段（对于 type=“checkbox” 或 type=“radio”）
disabled指定应禁用输入字段
max指定输入字段的最大值
maxlength指定输入字段的最大字符数
min指定输入字段的最小值
pattern指定用于检查输入值的正则表达式
readonly指定输入字段是只读的（不能更改）
required指定输入字段是必填的（必须填写）
size指定输入的宽度（以字符为单位） field
step指定输入字段的合法数字间隔
value指定输入字段的默认值

以下示例显示一个数字输入字段，您可以在其中输入从 0 到 100 的值，步长为 10。默认值为 30:

示例

<form>
<label for="quantity">数量：</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

输入类型范围

<input type="range"> 定义用于输入其确切值不重要的数字的控件（如滑块控件）。默认范围是 0 到 100。但是，您可以使用 min、max 和 step 属性设置接受数字的限制：

示例

<form>
<label for="vol">成交量（介于 0 和 50 之间）：</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

输入类型搜索

<input type="search"> 用于搜索字段（搜索字段的行为类似于常规文本字段）。

示例

<form>
<label for="gsearch">搜索 Google：</label>
<input type="search" id="gsearch" name="gsearch">
</form>

输入类型 Tel

<input type="tel">用于应包含电话号码的输入字段。

示例

<form>
<label for="phone">输入您的电话号码：</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

输入类型 Time

<input type="time">允许用户选择时间（无时区）。

根据浏览器支持，时间选择器可以显示在输入字段中。

示例

<form>
<label for="appt">选择时间：</label>
<input type="time" id="appt" name="appt">
</form>

输入类型 Url

<input type="url">用于应包含 URL 地址的输入字段。

根据浏览器支持，url 字段可以在提交时自动验证。

某些智能手机可以识别 url 类型，并在键盘上添加“.com”以匹配 url 输入。

示例

<form>
<label for="homepage">添加您的主页：</label>
<input type="url" id="homepage" name="homepage">
</form>

输入类型 Week

<input type="week">允许用户选择周和年。

根据浏览器支持，日期选择器可以显示在输入字段中。

示例

<form>
<label for="week">选择一周：</label>
<input type="week" id="week" name="week">
</form>

总结

本文介绍了的html中input的type设置，如有问题欢迎私信和评论

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1970258.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

更换收银系统时如何迁移会员数据

更换收银系统时如何迁移会员数据

系统介绍 专门为零售行业的连锁店量身打造的收银系统&#xff0c;适用于常规超市、生鲜超市、水果店、便利店、零食专卖店、服装店、母婴用品、农贸市场等类型的门店使用。同时线上线下数据打通&#xff0c;线下收银的数据与小程序私域商城中的数据完全同步&#xff0c;如商品…
阅读更多...
js 实现数组转树形数据（2024-08-01）

js 实现数组转树形数据（2024-08-01）

要将数组转换为树形结构&#xff0c;通常需要一个数组&#xff0c;其中每个元素都包含一个父节点的引用。以下是一个使用JavaScript实现的函数&#xff0c;假设每个元素都有一个唯一的 【id 】和一个指向其父元素的【pId】 /*** 数组转树形结构* param {array} list 被转换的数…
阅读更多...
【编程刷级之路】大学新生的最佳入门攻略

【编程刷级之路】大学新生的最佳入门攻略

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《热点时事》 期待您的关注 目录 引言 方向一&#xff1a;编程语言选择 方向二&#xff1a;学习资源推荐 方向三&#xff1a;学…
阅读更多...
django体育器材后台管理系统-毕业设计源码45411

django体育器材后台管理系统-毕业设计源码45411

django体育器材后台管理系统 摘 要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学…
阅读更多...
对抗搜索Adversary Search与Minmax算法(含python代码)

对抗搜索Adversary Search与Minmax算法(含python代码)

Adversary Search&#xff0c;也称为对抗搜索&#xff0c;是人工智能中的一种算法策略&#xff0c;主要用于解决那些需要两个或多个对手在完全或部分信息的环境下对抗的问题。这种类型的搜索算法广泛应用于各种策略游戏&#xff0c;如国际象棋、围棋、和井字游戏&#xff0c;其…
阅读更多...
张宇1000题/660/880/武忠祥严选题，哪本优先级高？最接近真题？

张宇1000题/660/880/武忠祥严选题，哪本优先级高？最接近真题？

使用资料&#xff1a; 武老师强化班视频高数辅导讲义严选题 具体操作&#xff1a; 预习讲义10页听课做严选题 情况一&#xff1a;基础阶段跟着武老师并且完成660的同学。 这些同学在强化阶段可以在使用上述资料的基础上&#xff0c;再加一本李林老师的880题。可能有同学不…
阅读更多...
论文解读(14)-GeoCLIP

论文解读(14)-GeoCLIP

加油&#xff0c;加油&#xff01; 原文&#xff1a; GeoCLIP: Clip-Inspired Alignment between Locations and Images for Effective Worldwide Geo-localization &#xff08;2309.16020 (arxiv.org)&#xff09; 这一篇的重点在于范围放宽到全球了 摘要 首先指出了目前…
阅读更多...
opencascade AIS_Triangulation源码学习 每个三角形顶点关联颜色

opencascade AIS_Triangulation源码学习 每个三角形顶点关联颜色

opencascade AIS_Triangulation 每个三角形顶点关联颜色 前言 交互对象&#xff0c;从 Poly_Triangulation 绘制数据&#xff0c;可选择性地带有与每个三角形顶点关联的颜色。 为了最大效率&#xff0c;颜色以32位整数表示&#xff0c;而不是传统的 Quantity_Color 值。 目前尚…
阅读更多...
Swift中@escaping的理解与使用

Swift中@escaping的理解与使用

当我们在一个方法中将一个闭包当做参数的时候&#xff0c;那么就有很大概率用到这个escaping关键字了&#xff0c;试想一般什么时候会将闭包当做参数传进来呢&#xff1f;很多时候比如方法里面有异步操作&#xff0c;需要方法先return&#xff0c;最后再调用闭包返回结果&#…
阅读更多...
论数据驱动的优雅：构建轻量高效的数据中台-亿发

论数据驱动的优雅：构建轻量高效的数据中台-亿发

随着数据处理需求的不断增长&#xff0c;各类企业都在探索如何更高效地管理和利用数据。特别是在大规模数据应用的背景下&#xff0c;数据中台成为了众多企业优化数据管理的关键解决方案。从数据中台的建设需求到其实际应用&#xff0c;本文将详细解析数据中台的发展历程、建设…
阅读更多...
.NET 一款反序列化打入冰蝎内存马的工具

.NET 一款反序列化打入冰蝎内存马的工具

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…
阅读更多...
用Python编写你的网络监控系统详解

用Python编写你的网络监控系统详解

概要 在现代网络管理中，实时监控网络流量和状态是保证网络正常运行的关键。使用Python编写网络监控工具可以帮助管理员及时发现和解决网络问题。本文将详细介绍如何使用Python编写网络监控工具，包括基本概念、常用库及其应用场景，并提供相应的示例代码。 网络监控的基本概念…
阅读更多...
nginx反向代理严重错误[crit] (13: Permission denied) while reading upstream问题

nginx反向代理严重错误[crit] (13: Permission denied) while reading upstream问题

nginx作为使用最广泛的一款反向代理软件&#xff0c;其性能也是非常优秀的&#xff0c;一般情况下&#xff0c;直接配置就可以使用&#xff0c;而且也都是稳定高效的&#xff0c;但是在实际应用中&#xff0c;对于不同的应用场景&#xff0c;总是会出现各种各样的问题&#xff…
阅读更多...
nanopc-t4线刷Android10编译源码

nanopc-t4线刷Android10编译源码

文章目录 windows线刷Linux编译一撸到底核心编译命令最终Image目录源码和刷机工具放一个目录下线刷走一波，不能有任何报错windows线刷 https://www.myteamcloud.top/?p=266 Linux编译一撸到底 https://blog.csdn.net/wb4916/article/details/134911430 核心编译命令 ./b…
阅读更多...
全网首创！基于GaitSet的一种多人步态识别方法公示

全网首创！基于GaitSet的一种多人步态识别方法公示

有源代码V细聊&#xff0c;可商用/私用/毕设等&#xff1a;NzqDssm16 &#x1f349;1 绪论 经过相关研究确认&#xff0c;步态识别是足以达到应用级别的生物识别技术&#xff0c;在现代社会中自始至终都存在着广泛的应用前景。之所以迟迟没有普及&#xff0c;主要是实…
阅读更多...
docker配置阿里镜像加速器

docker配置阿里镜像加速器

‌阿里云镜像加速的核心功能是通过提供官方的镜像站点&#xff0c;加速官方镜像的下载。使用容器时&#xff0c;由于网络原因&#xff0c;下载‌Docker官方镜像可能会需要很长时间&#xff0c;甚至下载失败。阿里云容器镜像服务‌ACR&#xff08;阿里云容器仓库&#xff09;为此…
阅读更多...
智慧大楼信息化一体化管理整体建设设计方案（可编辑80页PPT）

智慧大楼信息化一体化管理整体建设设计方案（可编辑80页PPT）

随着信息技术的飞速发展&#xff0c;智慧大楼已成为现代城市建设的重要趋势。本项目旨在通过信息化一体化管理整体建设设计方案&#xff0c;将大楼内的各个系统进行有机整合&#xff0c;实现智能化、高效化的管理与服务。通过该方案&#xff0c;我们期望提升大楼的运营效率、安…
阅读更多...
【网络基础】初识网络 {计算机网络背景；网络协议初识；网络传输基本流程；网络中的地址管理；网络设备简单介绍}

【网络基础】初识网络 {计算机网络背景；网络协议初识；网络传输基本流程；网络中的地址管理；网络设备简单介绍}

一、计算机网络背景 1.1 网络发展 计算机网络的发展可以追溯到20世纪60年代&#xff0c;那时候最初的计算机网络只是为了让科学家们能够共享计算机资源和数据。但是在20世纪80年代&#xff0c;互联网的出现彻底改变了计算机网络的面貌&#xff0c;使得人们可以随时随地通过互…
阅读更多...
昇思25天学习打卡营第XX天|Vision Transformer图像分类

昇思25天学习打卡营第XX天|Vision Transformer图像分类

好了&#x1f44c;到我最熟悉的模型了&#xff0c;苦苦缠斗几个月呜呜呜 CLIP预训练数据集薄纱了&#xff0c;这个对齐的思路很好&#xff0c;但是对文本图像长度限制更高&#xff0c;作者很可惜
阅读更多...
详细分析nohup后台运行命令

详细分析nohup后台运行命令

目录 1. 基本知识2. Demo 1. 基本知识 Unix/Linux 命令&#xff0c;用于在后台运行程序&#xff0c;并确保它在用户退出或注销后继续运行 nohup 的主要作用是使程序在终端会话结束后继续运行&#xff0c;这对需要长时间执行的任务特别有用 基本的用法如下&#xff1a; nohu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023