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

HTML5新增属性学习笔记相关推荐

HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html><head>< ...
html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
HTML5与CSS3学习笔记
HTML与CSS学习笔记 HTML5 1.标签简单的网页的基本结构 <html><head><title>我的网页<title/></head& ...
html5 新增属性了解
2019独角兽企业重金招聘Python工程师标准>>> autofocus 获取焦点 <input type="text" name="fna ...
html5猜颜色游戏,好看漂亮的html5网页特效学习笔记(3)_猜猜下一个颜色是什么？...
效果: 根据给出的两个连续颜色,玩家需要猜出下一个是什么颜色随机关卡使用vw,vh,vmin,vmax来屏幕自适应很难玩 html+css+javascript,但js很短并不难,上手难度:简单 ...
HTML5新增属性nofollow标签的应用场景
nofollow标签是HTML5新增的一个属性,用于告诉搜索引擎不要追踪特定的网页链接.减少垃圾对搜索引擎的排名影响.网站SEO优化nofollow标签的应用起到一定的作用. 网站Nofollow标签 ...
HTML中的form表单的标签、属性、属性值； CSS以及HTML5新增属性、属性值
form表单HTML5.CSS3标签及属性.属性值 form表单HTML标签.属性.属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) ...
h5(html5),css3入门学习笔记
萌新入门,做听课笔记,学的是黑马程序员pink老师的视频,可以去b站搜目录 HTML 一.语法规范二.基本结构标签(骨架标签) 三.vscode工具生成骨架标签新增代码(一定要写): 四.常用标签 ...

HTML5新增属性学习笔记

HTML5新增属性学习笔记相关推荐

最新文章

热门文章