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 属性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript获得对象属性个数的方法

    //扩展对象的count方法 Object.prototype.count = ( Object.prototype.hasOwnProperty(‘_...

    就只是小茗
  • 自定义类型的创建

     以上方法,对于有其他OO语言经验的开发人员去看,比较容易理解,但是性能上并不推荐。因为每次创建新的实例都需要进行一次判断,哪怕这次的性能损耗是极小的,但毕竟也...

    就只是小茗
  • CSS深入理解学习笔记之line-height

    1、line-height的定义   定义:两行文字基线之间的距离。   注:不同字体之间的基线是不同的。 2、line-height与行内框盒子模型   行内...

    就只是小茗
  • Android查缺补漏(View篇)--事件分发机制

    事件分发机制是Android中非常重要的一个知识点,同时也是难点,相信到目前为止很多Android开发者对事件分发机制并没有一个非常系统的认识,当然也包括博主个...

    codingblock
  • 从源码梳理Retrofit网络请求过程

    coderZhen
  • ceph luminous 新功能之磁盘智能分组

    本篇是luminous一个新功能介绍,关于磁盘智能分组的,这个在ceph里面叫crush class,这个我自己起名叫磁盘智能分组,因为这个实现的功能就是根据磁...

    用户2772802
  • LXC 容器集chroot使用说明

    1.1 LXC是什么? 1.1.1 关于LXC LXC,其名称来自Linux软件容器(Linux Containers)的缩写,一种操作系统层虚拟化(Opera...

    惨绿少年
  • Composer安装及更新YII2框架遇到问题梳理

    我们在使用YII2框架的过程中,对于框架有两种安装方式,一种是使用官网归档文件,一种是使用Compoer包管理工具。本文讨论的问题集中在使用Compoer安装Y...

    needrunning
  • 40万人规模全球科技盛会SXSW 34年来首次取消!疫情致全球峰会损失超10亿美元

    冠状病毒全球蔓延,其导致的损害后果仍在继续。世界卫生组织周四向各国发出呼吁“停止一切活动”,进行大量人口检测,积极控制疫情爆发。据约翰·霍普金斯大学统计,美国目...

    新智元
  • 技术走向管理一些深度思考

    性格特质和自我管理 1,管理需具备的性格特质 欣赏他人:以一种不以自我为中心的合作的方式和他人相处,能平静和客观地接受不同的人,放下自己的性格、喜好,去欣赏不同...

    用户1410343

扫码关注云+社区

领取腾讯云代金券