HTML5 新增的input 类型、新增的表单属性

news2024/11/19 2:25:55

新增的input 类型 

属性值

说明

type="emall"    

 限制用户输入必须为Emall类型(邮箱)

type="url"限制用户输入必须为URL类型(网址)
type="dade"限制用户输入必须为日期类型
type="time"限制用户输入必须为时间类型
type="month"限制用户输入必须为月类型
 type="week"限制用户输入必须为周类型
type="number"     限制用户输入必须为数字类型
 type="tel"         手机号码
type="search"搜索框
type="color"      生成一个颜色选择表单

示例

  <form action="">
        <ul>
            <li>邮箱:<input type="email"></li>
            <li>网址:<input type="url"></li>
            <li>日期:<input type="date"></li>
            <li>时间:<input type="time"></li>
            <li>月:<input type="month"></li>
            <li>周:<input type="week"></li>
            <li>数字:<input type="number"></li>
            <li>手机号码:<input type="tel"></li>
            <li>搜素:<input type="search"></li>
            <li>颜色:<input type="color"></li>
            <li><input type="submit" value="提交"></li>
        </ul>
    </form>

       

 新增的表单属性

属性

说明

required

required

表单拥有该属性表示其内容不能为空,必填

placeholder

提示文本

表单的提示信息,存在默认值将不显示

autofocus

autofocus

自动聚焦属性,页面加载完成自动聚焦到指定表单

autocomplete

off/on

当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示在字段中填写的选项 默认已经打开,如autocomplele="on",关闭autocomplele="off" 需要放在表单内,同时加上name属性,同时成功提交

multiple

multiple

可以多选文件提交

示例   

<form action="">
    <input type="search" name="sear" required="required" placeholder="请输入" autofocus="autofocus">
    <input type="file" multiple="multiple">
    <input type="submit" value="提交">
  </form>

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

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

相关文章

2023年,企业数字化转型的大趋势

数字化转型&#xff08;DX&#xff09;一直是IT界的热门词汇&#xff0c;它会在组织规划中发挥更大的作用。因为完成数字化转型的组织&#xff0c;通常工作效率、生产力都会更高&#xff0c;运营成本也会降低。 一、自动化将为规范性指导提供动力 在过去十年里&#xff0c;数…

Redis数据类型-ZSet

一. 概述 SortedSet又叫zset&#xff0c;它是Redis提供的特殊数据类型&#xff0c;是一种特殊的set类型&#xff0c;继承了set不可重复的特点&#xff0c;并在set基础上为每个值添加一个分数&#xff0c;用来实现值的有序排列。 二. 常用指令 明白它的特点后&#xff0c;接下来…

OpenAI-whisper语音识别模型

1、whisper简介 Whisper是一个通用的语音识别模型。它是在不同音频的大型数据集上训练的&#xff0c;也是一个多任务模型&#xff0c;可以执行多语言语音识别、语音翻译和语言识别。 whisper有五种模型尺寸&#xff0c;提供速度和准确性的平衡&#xff0c;其中English-only模型…

使用 VS Code 快速搭建 ESP-IDF 开发环境 (Windows、Linux、MacOS)

ESP-IDF 是乐鑫官方的物联网开发框架&#xff0c;适用于 ESP32、ESP32-S、ESP32-C 和 ESP32-H 系列 SoC。它基于 C/C 语言提供了一个自给自足的 SDK&#xff0c;方便用户在这些平台上开发通用应用程序&#xff0c;并集成了大量的软件组件&#xff0c;包括 RTOS、外设驱动程序、…

Flutter 桌面开发 | 键盘快捷键功能 - Shortcuts 组件

theme: cyanosis 在桌面端的开发中&#xff0c;键盘快捷键是非常常见而必要的&#xff0c;比如 Ctrl F 搜索&#xff0c; Ctrl C 复制等。Flutter 既然可以开发桌面端应用&#xff0c;那必然要提供自定义快捷键&#xff0c;触发事件的功能支持。这就是本节要介绍的 Shortcuts…

【5.19】三、白盒测试方法—程序插桩法

目录 3.2 程序插桩法 3.2.1 目标代码插桩 3.2.2 源代码插桩 小提示&#xff1a;HeisenBugs 黑盒测试和白盒测试的异同 3.2 程序插桩法 程序插桩法是一种被广泛使用的软件测试技术&#xff0c;由J.C.Huang教授提出。简单来说&#xff0c;程序插桩就是往被测试程序中插入测…

合肥工业大学计算机组成原理课设-系统硬件综合设计

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;信息安全本科生课设-系统硬件综合设计报告 &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#…

Varnish代理服务器

一.Varnish概述 1.Varnish 简介 Varnish是一款高性能且开源的反向代理服务器和HTTP加速器&#xff0c;其采用全新的软件体系机构&#xff0c;和现在的硬件体系紧密配合。与传统的squid相比&#xff0c;Varnish具有高性能、速度快、管理更加方便等优点&#xff0c;目前很多大型…

Python:如何基于滑动窗口进行气候因子间的相关系数分析?(逐像元)

目录 01 常规的相关系数简单说明 02 滑动窗口下的相关系数分析 最近处理一些气候因子的统计分析&#xff0c;遇到一些问题&#xff0c;记录一下。 01 常规的相关系数简单说明 在研究滑动窗口前&#xff0c;我们先来研究一下常规的相关系数分析&#xff0c;为了简化问题&…

《The Element of Style》阅读笔记 —— 章节 I Elementary Rules of Usage

前言&#xff1a;本科期间担任科研助理时&#xff0c;有幸从导师那里借来这本书通读&#xff0c;只记得自己当时在本子上做了一些笔记&#xff0c;但是想不起来具体记了什么&#x1f602;前段时间再次从学院的讲座活动中听闻这本书&#xff0c;决定重温一遍&#xff0c;本篇为此…

实验一 结构化分析与设计——数据流图DFD与模块结构图SC

一、实验目的&#xff1a; 掌握传统结构化分析方法中功能建模的基本思想&#xff0c;即数据流分析技术。数据流图DFD是软件系统的逻辑模型&#xff0c;描绘数据在系统中从输入到输出所经历的变换&#xff08;即加工处理&#xff09;。 同时&#xff0c;了解变换型和事务型数据…

Copernicus DEM 30 metre dataset now freely available01 December 2020

欧空局宣布,除2019年发布的哥白尼DEM 90米分辨率外,30米分辨率数据的访问权限现已延长,数据集对任何注册用户开放和免费。 自2019年以来,哥白尼方案配备了全球一致的高分辨率数字高程模型,供所有用户使用,以处理各种应用。 哥白尼DEM结合了平坦的水体、连贯的河流流、编…

外汇客户收支风险管理系统助力外汇业务便利化

外管局2019年开始发文推行跨境投资便利化政策&#xff0c;2023年商务部等17部门又发文支持贸易外汇收支便利化政策&#xff0c;从一个小范围试点政策&#xff0c;到各部委大力推广支持&#xff0c;银行业内重点推广&#xff0c;这3年间外汇业务便利化经历了什么&#xff1f; …

狂飙,ChatGPT 官方 iOS 版本应用上线

ChatGPT正式发布App&#xff0c;可在苹果应用商店下载&#xff0c;安卓版也不远了 在手机上也能玩ChatGPT了&#xff01;当地时间周四&#xff08;5月18日&#xff09;&#xff0c;人工智能研究公司OpenAI在官网宣布&#xff0c;其在美国推出了聊天机器人ChatGPT的iPhone应用&a…

写公开信可别等被喷,才发现其实可以这样

正文共 1022 字&#xff0c;阅读大约需要 4 分钟 公务员必备技巧&#xff0c;您将在4分钟后获得以下超能力&#xff1a; 快速生成公开信 Beezy评级 &#xff1a;B级 *经过简单的寻找&#xff0c; 大部分人能立刻掌握。主要节省时间。 推荐人 | Kim 编辑者 | Linda ●图片由Le…

Unity A* Pathfinding Project

先下载免费版 https://arongranberg.com/astar/download# 教程首页 https://arongranberg.com/astar/docs/getstarted.html 创建一个plane 当地面 创建一个gameobject 添加组件 PathFinder 长这样 调整每个格子大小的 创建两个layer 一个是阻挡物的 一个是地面的 这里填入阻…

Helm方式部署 zookeeper+kafka 集群 ——2023.05

文章目录 一、添加helm仓库二、安装部署集群2.1 在线安装zookeeperkafka集群2.2 离线安装zookeeperkafka集群 三、验证kafka与zookeeper是否绑定四、测试集群附&#xff1a;可改善地方卸载应用 一、添加helm仓库 # 添加bitnami和官方helm仓库&#xff1a; helm repo add bitna…

独立版:云贝O2O-V2-2.6.3 优化区域代理登录刷新问题

独立版&#xff1a;v2云贝O2O平台版本、版本更新至2.6.3&#xff0c;微信小程序在线上传、后端可开源&#xff0c;即刻源码持续维护更新中&#xff0c;最新全插件&#xff08;4个&#xff09;包更新&#xff0c;包修复、这个是源码&#xff0c;独立版&#xff1b; 支持一键更新…

C++——模板(初阶) + string

作者&#xff1a;几冬雪来 时间&#xff1a;2023年5月19日 内容&#xff1a;C模板 string讲解 目录 前言&#xff1a; 1.模板&#xff1a; 1.函数模板的隐/显示实例化&#xff1a; 2.类模板&#xff1a; 2.STL&#xff1a; 1. 什么是STL&#xff1a; 2.STL六大组件…

【Java入门】Java的语言概述

前言 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff0c;喜爱音乐的一位博主。 &#x1f4d7;本文收录于Java入门篇系列&#xff0c;该专栏主要讲解&#xff1a;什么是java、java的数据类型与变…