您的位置:首页 > Web前端 > HTML5

HTML5新增属性学习笔记

2019-10-26 18:12 2256 查看
原文链接:https://www.mk2048.com/blog/blog.php?id=h02jc11i0jaa&title=HTML5%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: