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 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

基础篇章:关于 React Native 之 Touchable 系列组件的讲解

? 提示:前天文章,重发,不想看的请略过,上次失误忘了加效果图 (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经...

2069
来自专栏听雨堂

对asp.net响应事件的试验

1、可否把bind独立出来,在page_load中只是初次时bind,以后都在具体事件的处理中bind    实验:        page_load中,只作d...

2008
来自专栏WebHub

可视化讲解 DOM 的构建过程

最近在看 Secrets of the JavaScript Ninja, 书中第二章讲到 DOM 的构建流程.

662
来自专栏大数据钻研

能用HTML/CSS解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例...

3314
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种新增控件(2)

本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout、MenuFlyout、SettingsFlyout、Hub 和 Hyperlink。...

34510
来自专栏前端知识分享

第144天:PS切图方法总结

    PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从Pho...

1132
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu

C1Wijmo 全部的控件是完全可定制的,并且可以根据你自己的需求定制他们的界面外观。 我准备使用C1Menu演示这一点。 让我们从向控件应用自定义主题开始。 ...

1705
来自专栏守候书阁

css写作建议和性能优化小结

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

752
来自专栏非著名程序员

基础篇章:关于 React Native 之 Touchable 系列组件的讲解

【回复“1024”,送你一个特别推送】 ? (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) ...

1989
来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

703

扫码关注云+社区