HTML5新增的input元素属性:placeholder、required、autofocus、min、max等
HTML5 大幅度地增加与改良了 input 元素的属性,可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。
下面将详细介绍这些新增的 input 元素的属性。
| 属性 | 说明 | 属性 | 说明 |
|---|---|---|---|
| placeholder | 在输入框显示描述性或提示性文本 | autocomplete | 是否保存输入值以备将来使用 |
| required | 表示此项为必填项 | list | 为文本框添加选择列表 |
| pattern | 设置的格式规则校验 | min、max | 输入的数值是否在min~max范围 |
| autofocus | 设置自动获取焦点 | step | 输入型控件递增/减的梯度 |
HTML5新增的input元素类型和属性
《HTML5新增的input元素类型:number、range、email、color、date等》
《HTML5新增的input元素属性:placeholder、required、autofocus、min、max等》
1、placeholder 属性
当用户没有输入值时,输入型控件可以通过 placeholder 属性向用户显示描述说明或者提示信息。使用 placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框,email、number、url 等其他类型的输入框也都支持 placeholder 属性。
属性用法如下:
<form>账号:<input type="text" placeholder="请输入账号"/></br>密码:<input type="text" placeholder="请输入密码"/></br><input type="submit" value="提交"/>
</form>
执行结果:

2、required 属性
required 属性的主要目的是确保表单控件中的值已填写,一旦为某个输入型控件设置了 required 属性,就必须填写此项,否则无法提交表单。
属性用法如下:
<form>电子邮箱:<input type="email" required /></br><input type="submit" value="提交"/>
</form>
执行结果:

3、pattern 属性
pattern 属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。通过在 input 元素中使用 pattern 属性,并将属性值设为某个格式的正则表达式,该属性实现在提交表单时会检查其内容是否符合给定格式。
属性用法如下:
<form>请输入内容:<input type="text" pattern="[0-9][A-Z]{3}" placeholder="一个数字和三个大写字母"/><input type="submit" value="提交"/>
</form>
执行结果:

4、autofocus 属性
给文本框、选择框或按钮控件加上 autofocus 属性,当页面打开时,该控件将会自动获得光标焦点。
属性用法如下:
用户名称:<input type="type" autofocus />
5、autocomplete 属性
浏览器通过 autocomplete 属性能够知晓是否应该保存输入值以备将来使用。autocomplete 属性应该用来保护敏感用户数据,避免本地浏览器对它们进行不安全的存储。对于 autocomplete 属性,可以指定“on”、“off”、“”(不指定)这3种值。
属性用法如下:
<input type="text" autocomplete="on" />
6、list 属性
该元素类似于选择框(select),但是当用户想要设置的值不在选择列表之内时,允许其自行输入,该属性本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。
属性用法如下:
<fieldset><legend>请输入搜索关键字:</legend><input type="search" list="myList"/><datalist id="myList"><option value="HTML5">HTML5</option><option value="CSS3">CSS3</option><option value="JavaScript">JavaScript</option></datalist><input type="submit" value="搜索"/>
</fieldset>
执行结果:

7、min、max 和 step 属性
通过设置 min 和 max 属性,可以将输入控件的数值输入范围限定在最低值和最高值之间。设置其 step 属性能够制定输入值递增或递减的梯度。
属性用法如下:
数值1:<input type="number" value="25" min="10" max="100" step="5"/></br>
数值2:<input type="range" value="45" min="0" max="100" step="5"/>
执行结果:

相关文章:
HTML5新增的input元素属性:placeholder、required、autofocus、min、max等
HTML5 大幅度地增加与改良了 input 元素的属性,可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 下面将详细介绍这些新增的 input 元素的属性。 属性说明属性说明placeholder在输入框显示描述性或提示性文本autocomplete是否保…...
Cornerstone3D导致浏览器崩溃的踩坑记录
WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost ⛳️ 问题描述 在使用vue3vite重构Cornerstone相关项目后,在Mac本地运行良好,但是部署测试环境后,在window系统的Chrome浏览器中切换页面会导致页面崩溃。查看Chrome的任务管理器&am…...
【鸿蒙学习笔记】Stage模型
官方文档:Stage模型开发概述 目录标题 Stage模型好处Stage模型概念图ContextAbilityStageUIAbility组件和ExtensionAbility组件WindowStage Stage模型-组件模型Stage模型-进程模型Stage模型-ArkTS线程模型和任务模型关于任务模型,我们先来了解一下什么是…...
Docker进入MongoDB
先是命令行开启docker镜像,然后进入docker镜像,这是两步 进入之后,开头会变成root,我的理解是进入了另一个linux系统了,直接执行相应的软件 这里直接use databse就是进入了,据说MongoDB是慢启动,…...
APP与API:魔法世界的咒语与念咒者
1. 什么是API? API,即应用程序编程接口(Application Programming Interface),就像是魔法世界中的咒语。API是两个独立软件系统之间进行通信和数据交换的桥梁。通过API,一个软件系统可以调用另一个软件系统中…...
云计算安全需求分析与安全保护工程
云计算基本概念 云计算(Cloud Computing)是一种通过互联网提供计算资源和服务的技术。它允许用户按需访问和使用计算资源,如服务器、存储、数据库、网络、安全、分析和软件应用等,而无需管理底层基础设施。以下是云计算的基本概念…...
七天.NET 8操作SQLite入门到实战 - 第二天 在 Windows 上配置 SQLite环境
前言 SQLite的一个重要的特性是零配置的、无需服务器,这意味着不需要复杂的安装或管理。它跟微软的Access差不多,只是一个.db格式的文件。但是与Access不同的是,它不需要安装任何软件,非常轻巧。 七天.NET 8操作SQLite入门到实战…...
操作系统——进程的状态与转换
...
80. UE5 RPG 实现UI显示技能冷却进度功能
在上一篇文章里,我们实现了通过GE给技能增加资源消耗和技能冷却功能。UI也能够显示角色能够使用的技能的UI,现在还有一个问题,我们希望在技能释放进去冷却时,技能变成灰色,并在技能冷却完成,技能可以再次使…...
Vue2-集成路由Vue Router介绍与使用
文章目录 路由(Vue2)1. SPA 与前端路由2. vue-router基本使用创建路由组件声明路由链接和占位标签创建路由模块挂载路由模块 3. vue-router进阶路由重定向嵌套路由动态路由编程式导航导航守卫 本篇小结 更多相关内容可查看 路由(Vue2…...
TemuAPI接口:获取商品详情功能
temu作为拼多多海外的跨境电商平台,已经在海外电商领域崭露头角,越来越多的外贸人选择temu作为发展平台。今天的接口可以用于获取temu平台的商品详情,包括价格、商品图片、规格、评论等内容,如有需要,请点击文末链接或…...
deepstream读取mp4文件及不同类型视频输入bug解决
在deepstream中使用mp4文件,与rtsp类似,使用uridecodebin即可,(可见官方test.py文件) def create_source_bin(index, uri):print("Creating source bin")# Create a source GstBin to abstract this bins c…...
Redis服务器统计和配置信息简介
Redis服务器统计和配置信息简介 首先使用INFO命令在Redis中用于获取Redis服务器的各种统计和配置信息;执行上述命令后,返回的信息分为多个部分,包括服务器信息、客户端信息、内存信息、持久化信息、统计信息、复制信息、CPU信息和键空间信息;…...
Linux Mac 安装Higress 平替 Spring Cloud Gateway
Linux Mac 安装Higress 平替 Spring Cloud Gateway Higress是什么?传统网关分类Higress定位下载安装包执行安装命令执行脚本 安装成功打开管理界面使用方法configure.shreset.shstartup.shshutdown.shstatus.shlogs.sh Higress官网 Higress是什么? Higress是基于阿里内部的…...
基于重叠群稀疏的总变分信号降噪及在旋转机械故障诊断中的应用(MATLAB)
基于振动分析的故障诊断方法基本流程主要由以下五个步骤组成,分别是信号采集、信号处理、特征提取、状态识别与诊断结果。这五个步骤中信号采集与特征提取是故障诊断中最为重要的步骤,而故障微弱特征信息又是其中最难解决的问题。“故障微弱特征信息”站…...
【YOLOv8】 用YOLOv8实现数字式工业仪表智能读数(一)
上一篇圆形表盘指针式仪表的项目受到很多人的关注,咱们一鼓作气,把数字式工业仪表的智能读数也研究一下。本篇主要讲如何用YOLOV8实现数字式工业仪表的自动读数,并将读数结果进行输出,若需要完整数据集和源代码可以私信。 目录 &…...
微信小程序---npm 支持
一、构建 npm 目前小程序已经支持使用 npm 安装第三方包,但是这些 npm 包在小程序中不能够直接使用,必须得使用小程序开发者工具进行构建后才可以使用。 为什么得使用小程序开发者工具需要构建呢❓ 因为 node_modules 目录下的包,不会参与…...
02MFC画笔/画刷/画椭圆/圆/(延时)文字
文章目录 画实心矩形自定义画布设计及使用连续画线及自定义定义变量扇形画椭圆/圆输出颜色文本定时器与定时事件 画实心矩形 自定义画布设计及使用 连续画线及自定义定义变量 扇形 画椭圆/圆 输出颜色文本 定时器与定时事件...
JavaWeb(四:Ajax与Json)
一、Ajax 1.定义 Ajax(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML AJAX 不是新的编程语言,指的是⼀种交互方式:异步加载。 客户端和服务器的数据交互更新在局部页面的技术,不需要刷新…...
Spring源码中的模板方法模式
1. 什么是模板方法模式 模板方法模式(Template Method Pattern)是一种行为设计模式,它在操作中定义算法的框架,将一些步骤推迟到子类中。模板方法让子类在不改变算法结构的情况下重新定义算法的某些步骤。 模板方法模式的定义&…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error
在前端开发中,JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作(如 Promise、async/await 等),开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝(r…...
破解路内监管盲区:免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题,导致车牌识别率低、逃费率高,传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法,正成为破局关键。该设备安装于车位侧方0.5-0.7米高度,直接规避树枝遮…...
Python常用模块:time、os、shutil与flask初探
一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...
