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 | 定义用于输入数字的字段。 |
定义用于 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学习笔记简明版(6):新增属性(1)
- HTML5学习笔记简明版(8):新增的全局属性
- HTML5 学习笔记5-表单新增元素和属性(续写)
- HTML5学习笔记简明版(8):新增的全局属性
- HTML5学习笔记简明版(6):新增属性(1)
- <学习html>第八天笔记-HTML5文档类型和字符集、HTML5新标签与特性(常用新标签、新增input type属性值、常用新属性、多媒体标签)
- HTML5学习笔记简明版(8):新增的全局属性
- HTML5学习笔记简明版(8):新增的全局属性
- HTML5 学习笔记4-表单新增的元素和属性
- HTML5学习笔记简明版(7):新增属性(2)
- html5学习笔记3-新增表单元素
- HTML5学习笔记简明版(11):新增的API
- 【HTML5学习笔记】14:全局属性和其它
- HTML5 学习笔记1-全局属性
- Web前端学习笔记(3)-html5新增表单元素
- HTML学习笔记(五)_HTML5表单相关元素和属性
- 前端学习【01】HTML5新增标签与属性
- HTML5_Canvas_属性、定义及方法(学习笔记)
- HTML5学习笔记简明版(9):变化的元素和属性
- HTML5学习笔记三 HTML元素、属性、标题、段落简介