HTML5新增属性学习笔记

1、form属性

表单内的从属元素,可以写在表单外部。可以通过指定元素的form属性来声明元素所属表单。form的属性值为表单的id。

1 <form id="testForm">
2     <input type="text">
3 </form>
4 <textarea form="testForm"></textarea>

 详细学习内容可参看:HTML5新增的form属性简介

 

2、formaction属性

给所有的提交按钮增加formaction属性,可以通过不同的按钮将表单提交到不同的页面。

1 <form id="testForm" action="serve.jsp">
2     <input type="submit" name="s1" value="v1" formaciton="s1.jsp">提交到s1
3     <input type="submit" name="s2" value="v2" formaciton="s2.jsp">提交到s2
4     <input type="submit">
5 </form>

浏览器支持:Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formaction 属性。

 

3、formmethod属性

formmethod 属性定义发送表单数据到 action URL 的 HTTP 方法。

<form id="testForm" action="serve.jsp"><input type="submit" name="s1" value="v1" formaciton="s1.jsp" formmethod="post">提交到s1<input type="submit" name="s2" value="v2" formaciton="s2.jsp" formmethod="get">提交到s2
</form>

 

4、placeholder属性

用于未输入文本框显示输入提示。

1 <input type="text" placeholder="请输入用户名">

 

5、autofocus属性

给文本框、选择框或者按钮添加autofocus属性,可在页面打开时自动获得光标焦点。一个页面上只能有一个具有autofocus属性的控件。

1 <input type="text" autoforcus>

浏览器支持:Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 autofocus 属性。

 

6、list属性

为单行文本框特有属性,配合datalist标签使用。属性值为datalist标签的id。

1 text:<input type="text" list="testList">
2 <datalist id="testList" style="display:none;">
3     <option value="Good Morning">Good Morning</option>
4     <option value="Hello">Hello</option>
5     <option value="Good Afternoon">Good Afternoon</option>
6 </datalist>

浏览器支持:Internet Explorer 10、Firefox、Opera 和 Chrome 支持 list 属性。

 

7、autocomplete属性

规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。

text:<input type="text" name="textInput" list="testList" placeholder="输入一句英文问候语" autocomplete="on">
<datalist id="testList" style="display:none;"><option value="Good Morning">Good Morning</option><option value="Hello">Hello</option><option value="Good Afternoon">Good Afternoon</option>
</datalist>

详细学习内容可参看:HTML5 autocomplete属性、表单自动完成

 

8、input的新增type属性种类

描述
url定义用于输入 URL 的字段。
time定义用于输入时间的控件(不带时区)。
search定义用于输入搜索字符串的文本字段。
number定义用于输入数字的字段。
email定义用于 e-mail 地址的字段。
date定义 date 控件(包括年、月、日,不包括时间)。
datetime定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
datetime-local定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
month定义 month 和 year 控件(不带时区)。
week定义 week 和 year 控件(不带时区)。
range定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
tel定义用于输入电话号码的字段。
color定义拾色器。

 

 

 

 

 

 

 

 

 

 

 

 

 

详细学习内容可参看:HTML <input> type 属性


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

Unity3D笔记十七 Unity3D生命周期

一个游戏组件的脚本有一个生命周期——一开始实例化&#xff0c;直到结束实例被销毁。在这期间&#xff0c;他们有时候处于激活状态&#xff0c;有时候处于非激活状态&#xff1b;对于活动&#xff0c;对用户有时候可见&#xff0c;有时候不可见 本文主要讨论常见脚本的的生命周…

自适应堆大小

在改进我们的测试平台以改进Plumbr GC问题检测器的同时 &#xff0c;我最终编写了一个小型测试用例&#xff0c;我认为这对于更广泛的读者来说可能很有趣。 我追求的目标是测试JVM在eden&#xff0c;survivor和Tenured空间之间如何分割堆方面的自适应性。 测试本身正在成批生成…

.Net对SQL数据库的web备份

基于B/S模式下的&#xff0c;数据库远程备份&#xff0c;备份成功后可下载到本地 1 protected void ButtonDataBackup_Click(object sender, EventArgs e) 2 { 3 string newname "数据库名" DateTime.Now.Year.ToString() DateTime.Now.Month.ToStri…

ajax向后台传递数组

$.ajax({traditional: true//这个设置为true&#xff0c;data:{"steps":["qwe","asd","zxc"]}会转换成stepsqwe&stepsasd&... }); 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

错误笔记

1、user_name a and password b时&#xff0c;无法打印到这个节点&#xff0c;原因是 a "yajuan" b 123456时 a 为字符串类型&#xff0c;b为数字类型&#xff0c;类型不同“且”的关系不成立。导致if 节点失败 转载于:https://www.cnblogs.com/wangyajuanjuan…

第一次Java 8体验

像世界其他地方一样&#xff0c;我深深地爱上了Slack。 为什么&#xff1f; 原因很多&#xff0c;但主要的原因是它提供了一种围绕通讯而非工具真正构建SDLC流程的新方法。 您认为这些天哪个更常见&#xff0c;杂乱无章的机智团队在荒野中四处徘徊&#xff0c;尽管他们有出色的…

七个重要习惯——读《高效能人士的七个习惯》整理

个人的成功习惯一&#xff1a;积极主动习惯二&#xff1a;以始为终习惯三&#xff1a;要事第一 公众的成功习惯四&#xff1a;双赢思维习惯五&#xff1a;知彼解己习惯六&#xff1a;综合综效 习惯七&#xff1a;不断更新 附图&#xff1a; 转载于:https://www.cnblogs.com/ziq…

浏览器兼容问题笔记

Safari浏览器&#xff1a; 1.safari执行history.go(-1);需要添加return false; Chrome浏览器 1.Chrome浏览器要预读图片&#xff0c;需要通过对图片的预加载。注&#xff1a;预加载前一定要将<img>加入<body> 1 /* 预加载图片 node-<img> func-回调函数 *…

http://www.tldp.org/LDP/abs/abs-guide.txt.gz

http://www.tldp.org/LDP/abs/abs-guide.txt.gz转载于:https://www.cnblogs.com/itzxy/p/11294815.html

POJ2941 SDUT2371Homogeneous squares

View Code 1 #include<stdio.h> 2 #include<string.h> 3 int main() 4 { 5 long i,j,n,g,s,t,a[1001],b[1001]; 6 char str[8001];//这里数组开大一点 第一次RT了 数比较大 7 while(scanf("%ld", &n)&&n) 8 { 9 s …

不变性如何提供帮助

在最近的几篇文章中&#xff0c;包括“ Getters / Setters。 邪恶。 期。” &#xff0c; “对象应该是不可变的”和“依赖注入容器是代码污染者” &#xff0c;我普遍将所有可变对象标记为“ setter”&#xff08;以set开头的对象方法&#xff09;。 我的论证主要基于隐喻和抽…

JS排序之冒泡排序

冒泡排序的两种策略&#xff1a; <script>// 第一种思路&#xff1a;// 一个数组中的数据&#xff0c;拿第一个和剩下的依次进行对比&#xff0c;数值小的赋值给第一个&#xff0c;一轮比较过后&#xff0c;则数值小的放在最前边。// 第二轮比较&#xff0c;则最前边的不…

浅谈.Net版(C#)的CMP模式

商城上线快2、3个月了&#xff0c;一直都懒得写点东西&#xff0c;在加上杂七杂八的事情也比较忙&#xff0c;所以都没有把这个系统当时做的整个架构思绪整理清&#xff0c;昨天才从深圳完了两天回来&#xff0c;怎感觉是要做的事来着.刚开始接触CMP模式的时候也是看了它几天,到…

Java Servlet教程– ULTIMATE指南(PDF下载)

Java Servlets是一种基于Java的Web技术。 Java Servlet技术为Web开发人员提供了一种简单&#xff0c;一致的机制&#xff0c;以扩展Web服务器的功能并访问现有的业务系统。 几乎可以将Servlet看作是在服务器端运行的applet&#xff0c;它没有任何表情。 Java servlet使许多Web…

Mvc 上传图片

VIEW 代码 using (Html.BeginForm("Upload", "UploadFile", FormMethod.Post, new { enctype "multipart/form-data" })) { <input type"file" name"file" /> <input type"submit" value"OK…

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼&#xff0c;针对兼容问题&#xff0c;其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> <html xmlnshttp://www.w3.org/1999/xhtml xmlns:bdhttp://www.ba…

使用WSO2开发

几个月以来&#xff0c;我又开始使用WSO2产品。 在接下来的文章中&#xff0c;我描述了我遇到的一些&#xff08;小&#xff09;问题以及如何解决它们。 设置开发环境时&#xff0c;我要做的第一件事是在Mac上下载Developer Studi o&#xff08;64位版本&#xff09;。 解压缩…

1G超爽网络硬盘

刚注册用户可用空间:1G通过你的推荐而注册达5个则空间增为5G该站的cssajax发挥得淋漓尽致了可以上传多个文件并且其间的Java Applet让上传变得超级方便&#xff0c;只需拖动即可有兴趣的朋友可以通过下面的链接注册也算是支持我一下了http://www.box.net/signup/invitation/gao…

CSS揭秘(二)背景与边框

Chapter2 背景与边框 1. 半透明边框 基础&#xff1a;了解 RGBA & HSLA 颜色&#xff08;色调 0~360、饱和度、亮度 &#xff08;0%黑色~100%白色&#xff09;、透明度&#xff09; 默认情况下&#xff0c;背景在边框的下层&#xff0c;容器的背景从半透明的边框透上来并…

Hibernate 拦截器 Hibernate 监听器

Hibernate拦截器(Interceptor)与事件监听器(Listener) 拦截器&#xff08;Intercept&#xff09;&#xff1a;与Struts2的拦截器机制基本一样&#xff0c;都是一个操作穿过一层层拦截器&#xff0c;每穿过一个拦截器就会触发相应拦截器的事件做预处理或善后处理。  监听器&am…