HTML5 表单新增的属性

HTML5 表单新增的属性

<form></form>标记新增属性

required 规定必需在提交之前填写输入字段。

<form name="frm">
姓名:<input type="text" name="username" required="required"></br>
<input type="submit" name="submit" value="提交">
</form>

placeholder 默认显示内容

实例:带有 placeholder 文本的搜索字段:

<form action="demo_form.asp" method="get">
    <input type="search" name="user_search" placeholder="请输入默认值" />
    <input type="submit" />
</form>

autocomplete 用来设置input组件是否使用自动完成功能,HTML5新增的属性值有on(使用)或off(不使用)两种。

input的属性autocomplete默认为on,其含义代表是否让浏览器自动记录之前输入的值,很多时候,

需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到,可以在input中加入autocomplete="off" 来关闭记录

系统需要保密的情况下可以使用此参数,该属性也可作用于表单元素

实例:

<form action="demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

novalidate 用来设置是否在发送表单时验证表单,如需要验证则填入novalidate即可。

novalidate也是HTML5新增的属性,IE并不支持novalidate属性

HTML5新的input类型(目前IE都不支持,Opera和Chrome对新的输入类型的支持最好,即使不被支持,仍然可以显示为常规的文本域。)

input类型 - email

email类型用于应该包含 e-mail 地址的输入域。

在提交表单时,会自动验证 email 域的值。

E-mail: <input type="email" name="user_email" />

input类型 - url

url类型用于应该包含 URL 地址的输入域。

在提交表单时,会自动验证 url 域的值。

Homepage: <input type="url" name="user_url" />

input类型 - number

number类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定:

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value number 规定默认值

Points: <input type="number" name="points" min="1" max="10" />

input类型 - range

range类型用于应该包含一定范围内数字值的输入域。

range类型显示为滑动条。

您还能够设定对所接受的数字的限定:

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value number 规定默认值

<input type="range" name="points" min="1" max="10" />

input类型 - Date Pickers(日期选择器)

HTML5拥有多个可供选取日期和时间的新输入类型:

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

Date: <input type="date" name="user_date" />

input类型 - search

search类型用于搜索域,比如站点搜索或 Google 搜索。

search域显示为常规的文本域。

Search: <input type="search" name="user_color" />

input类型 - color

color输入类型用于规定颜色。

该输入类型允许您从拾色器中选取颜色:

Color: <input type="color" name="user_color" />

HTML5的新的表单元素:(目前IE都不支持)

datalist元素

datalist元素规定输入域的选项列表,功能类似于自造词列表。

列表是通过datalist内的option元素创建的。

如需把datalist绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

实例1:

<input list="browsers"/>
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>

实例2:

Webpage: <input type="url" list="url_list" name="link" /> <!--对输入框进行限制-->
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

提示:option元素永远都要设置 value 属性。

keygen元素

keygen元素的作用是提供一种验证用户的可靠方法。

keygen元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。

私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

实例

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output元素

output元素用于不同类型的输出,比如计算或脚本输出:

实例

<output id="result" onforminput="resCalc()"></output>

表单元素新增的属性值

文本框text

autofocus属性 自动获得焦点,也就是指加载网页之后,自动将光标(插入点)移到此文本框内。

多行文本框textarea

warp属性在HTML5属性值有:

soft 当在表单中提交时,textarea 中的文本不换行。默认值。

hard 当在表单中提交时,textarea 中的文本换行(包含换行符)。当使用 "hard" 时,必须规定 cols 属性。

wrap属性在HTML4属性值有:

off(也可写成wrap):不换行,当输入的内容超出文本区域右边界时,文本将向左滚动,并显示滚动条。

如果希望换行,必须手动输入回车键才能将插入点移到下一行;

virtual:文本能够自动换行,当数据提交到服务器被处理时,换行符不会随输入文本一同提交到服务器;(默认值)

physical:文本能够自动换行,当数据提交到服务器被处理时,换行符将会随输入的文本一同被提交到服务器进行处理;

表单分组fieldset

fieldset元素可将表单内的相关元素分组。

HTML5新增的属性

disabled disabled 规定应该禁用fieldset。

form form_id 规定fieldset所属的一个或多个表单。

name value 规定fieldset的名称。

实例

组合表单中的相关元素:

<form>
<fieldset disabled="disabled" form="formid" name="person">
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>

legend元素为fieldset元素定义标题(caption)。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

车载摄像头视频防抖处理解决方案,全新的稳定视觉体验

面对复杂多变的道路环境和车辆运动状态&#xff0c;如何确保车载摄像头拍摄的视频稳定清晰&#xff0c;一直是行业面临的重要挑战。美摄科技&#xff0c;作为视频防抖技术的领军企业&#xff0c;以其领先的车载摄像头视频防抖处理解决方案&#xff0c;为企业提供了全新的稳定视…

C++ - 文件流fstream

C 文件流是指在C编程中使用的用于文件输入输出操作的机制。这种机制允许程序员以类似于流的方式读取和写入文件数据。在C中&#xff0c;文件流通常使用<fstream>头文件提供的类来实现。 常用的文件流类包括&#xff1a; 1. std::ofstream&#xff1a;用于向文件中写入数…

筑牢个人信息安全防线,海云安受邀参加武汉“名家论坛”国家安全教育日专题讲座

近日&#xff0c;武汉“名家论坛”国家安全教育日专题讲座活动《“刷脸”有风险&#xff0c;如何保护我们的个人信息安全&#xff1f;》在武汉图书馆报告厅举办&#xff0c;海云安副总工程师李博士受邀参加本次活动。 活动以线下讲座、线上直播的形式&#xff0c;结合“普法讲座…

rk3588 安卓调试

rknn装上了android系统&#xff0c;用type-c usb连接上电脑&#xff0c;设备管理器发现了rk3588&#xff0c;但是Android Studio没有发现设备 后来怀疑是驱动没有安装&#xff0c;我用的驱动下载地址&#xff1a; 瑞芯微Rockchip驱动安装助手(适用于RK3308 RK3399等) Mcuzone…

H2O-3机器学习平台源码编译的各种坑

H2O-3机器学习平台是一个非常适合非专业人士学习机器学习的平台&#xff0c;自带WebUI&#xff0c;效果还是蛮不错的&#xff0c;官方也提供了jar包&#xff0c;一条命令就能直接运行&#xff0c;非常方便&#xff0c;但最近有源码编译的需求&#xff0c;实际操作过程中&#x…

error: failed to push some refs to ‘https://gitee.com/zhao-zhimin12/gk.git‘

git push origin master发现以下报错: 解决办法: 一、强制推送 git push origin master -f &#xff08;加上 -f 就是强制&#xff09; 二、 先拉取最新代码&#xff0c;再推送 1.git pull origin master 2.git push origin master

OpenHarmony实战开发-如何使用ArkUIstack 组件实现多层级轮播图。

介绍 本示例介绍使用ArkUIstack 组件实现多层级轮播图。该场景多用于购物、资讯类应用。 效果图预览 使用说明 1.加载完成后显示轮播图可以左右滑动。 实现思路 1.通过stack和offsetx实现多层级堆叠。 Stack() {LazyForEach(this.swiperDataSource, (item: SwiperData, i…

基于51单片机的心形流水灯设计

基于51单片机的心形流水灯 &#xff08;仿真&#xff0b;程序&#xff0b;原理图&#xff0b;设计报告&#xff09; 功能介绍 具体功能&#xff1a; 1.采用51单片机做为主控制器&#xff1b; 2.32个彩色&#xff2c;&#xff25;&#xff24;接在单片机的32个双向&#xff29…

机器人码垛机的技术特点与应用

随着科技的飞速发展&#xff0c;机器人技术正逐渐渗透到各个行业领域&#xff0c;其中&#xff0c;机器人码垛机在物流行业的应用尤为引人瞩目。它不仅提高了物流效率&#xff0c;降低了成本&#xff0c;更在改变传统物流模式的同时&#xff0c;为行业发展带来了重大的变革。 一…

通过钉钉发送消息

1、通过钉钉群添加一个机器人 2、代码实现 /*** 发钉钉审核.** param*/private void sendDingDing(PoMaster poMaster){if(poMaster.getTotalPrice().doubleValue() > 500){String url "https://oapi.dingtalk.com/robot/send?access_tokene11bbb694ad4425bf687d2e…

冯喜运:4.17昨日黄金完美区间多空通杀,今日黄金原油分析

【黄金走势分析 】&#xff1a;黄金昨日整体过山车&#xff0c;早盘黄金冲高2392一线后回落&#xff0c;价格在2379-2389区间震荡&#xff0c;午后区间下移&#xff0c;价格在2362-2380继续震荡&#xff0c;晚间价格再次触及2363支撑反弹&#xff0c;连阳上升突破早间高点&…

数据结构速成--栈

由于是速成专题&#xff0c;因此内容不会十分全面&#xff0c;只会涵盖考试重点&#xff0c;各学校课程要求不同 &#xff0c;大家可以按照考纲复习&#xff0c;不全面的内容&#xff0c;可以看一下小编主页数据结构初阶的内容&#xff0c;找到对应专题详细学习一下。 目录 一…

信号量理论

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 理论 信号量是对公共资源的一种预定机制&#xff0c;资源不一定非要持有才算自己的&#xff0c;预定了也算&#xff0c;在未来任意时刻&#xff0c;仍然可以使用。 像我们申请有一块共享内存&#xff0c;如果一个进程正在使…

HTML5 <video> 标签属性、API 方法、事件、自定义样式详解与实用示例

HTML5 <video> 标签为网页内嵌视频提供了强大且便捷的功能。以下是对 <video> 标签的主要属性、API 方法、事件、自定义样式及其使用示例的详细介绍&#xff1a; 一、属性 1. src 定义&#xff1a;指定视频文件的 URL。示例&#xff1a;<video src"my_v…

树莓派驱动开发--iic篇(JY901S陀螺仪的三轴角度简单读取)

前言&#xff1a;既然大家都到了这步&#xff0c;想必对驱动开发有着一定的理解啦吧&#xff01;&#xff01;那我在前面说一下流程&#xff1a; 修改编译设备树》》》编写编译驱动文件》》》编写编译app文件》》》ftp挂载将前面3复制到树莓派的对应位置》》》加载驱动模块》》…

代码随想录训练营Day 24|Python|Leetcode|93.复原IP地址, 78.子集,90.子集II

93.复原IP地址 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 "192.168.1.1" 是 有效 IP 地址&#xff0c;但是 &q…

✌粤嵌—2024/4/3—合并K个升序链表✌

代码实现&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* merge(struct ListNode *l1, struct ListNode *l2) {if (l1 NULL) {return l2;}if (l2 NULL) {return l1;}struct Lis…

【Android GUI】从总体上了解Android的GUI体系

文章目录 概览Android硬件接口HALGralloc与Framebuffer Gralloc模块的加载Gralloc提供的接口Android原生的Gralloc实现打开framebuffer设备打开gralloc设备 参考 概览 Linux内核提供了统一的framebuffer显示驱动。设备节点/dev/graphics/fb*或者/dev/fb*&#xff0c;其中fb0表示…

MySQL-变量、流程控制与游标:变量、定义条件与处理程序、流程控制

变量、流程控制与游标 变量、流程控制与游标1. 变量1.1 系统变量1.1.1 系统变量分类1.1.2 查看系统变量 1.2 用户变量1.2.1 用户变量分类1.2.2 会话用户变量1.2.3 局部变量1.2.4 对比会话用户变量与局部变量 2. 定义条件与处理程序2.1 案例分析2.2 定义条件2.3 定义处理程序2.4…

go限流、计数器固定窗口算法/计数器滑动窗口算法

go限流、计数器固定窗口算法/计数器滑动窗口算法 一、问题 问题1&#xff1a;后端接口只能支撑每10秒1w个请求&#xff0c;要怎么来保护它呢&#xff1f; 问题2&#xff1a;发短信的接口&#xff0c;不超过100次/时&#xff0c;1000次/24小时&#xff0c;要怎么实现&#xff…
最新文章