1、form属性

表单内的从属元素,可以写在表单外部。可以通过指定元素的form属性来声明元素所属表单。form的属性值为表单的id。

 <form id="testForm">
<input type="text">
</form>
<textarea form="testForm"></textarea>

详细学习内容可参看:HTML5新增的form属性简介

2、formaction属性

给所有的提交按钮增加formaction属性,可以通过不同的按钮将表单提交到不同的页面。

 <form id="testForm" action="serve.jsp">
<input type="submit" name="s1" value="v1" formaciton="s1.jsp">提交到s1
<input type="submit" name="s2" value="v2" formaciton="s2.jsp">提交到s2
<input type="submit">
</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属性

用于未输入文本框显示输入提示。

 <input type="text" placeholder="请输入用户名">

5、autofocus属性

给文本框、选择框或者按钮添加autofocus属性,可在页面打开时自动获得光标焦点。一个页面上只能有一个具有autofocus属性的控件。

 <input type="text" autoforcus>

浏览器支持:Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 autofocus 属性。

6、list属性

为单行文本框特有属性,配合datalist标签使用。属性值为datalist标签的id。

 text:<input type="text" list="testList">
<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>

浏览器支持: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 属性

HTML5新增属性学习笔记的更多相关文章

  1. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  2. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  3. HTML5学习总结——HTML5新增属性与表单元素

    一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...

  4. HTML5新增属性

    [sourcecode language="plain"] <!DOCTYPE html> <html manifest="cache.manifest ...

  5. HTML5新增属性data-*和js/jquery之间的交互

    HTML5新增属性data- data-自定义属性,这种方式的自定义属性解决属性混乱无状态管理的现状 书写实例 <div data-role="page" data-last ...

  6. 【html5】html学习笔记1

    html5语法规则 1.标签要小写 2.省略标签 如 <tr> <td> <tr><td> 3.属性不加” 如 <div  id=div1> ...

  7. HTML5表单学习笔记

    表单在网页设计中的作用非常重要,HTML5又增加了表单方面的诸多功能,包括增加input输入类型,input属性,form元素,form属性等,解决了我们以前比较头疼或者繁琐的功能. 新增的输入类型 ...

  8. 【整理】HTML5游戏开发学习笔记(5)- 猜谜游戏

    距上次学习笔记已有一个多月过去了,期间由于新项目赶进度,以致该学习计划给打断,十分惭愧.书本中的第六章的例子相对比较简单.所以很快就完成. 1.预备知识html5中video标签的熟悉 2.实现思路对 ...

  9. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

随机推荐

  1. git 分之合并和冲突解决

    Git 分支管理和冲突解决 创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. 当前检出分支的前面会有星号. git branch newname 在当前检出分支上新建分支 ...

  2. 【BZOJ1453】[WC] Dface双面棋盘(LCT维护联通块个数)

    点此看题面 大致题意: 给你一个\(n*n\)的黑白棋盘,每次将一个格子翻转,分别求黑色连通块和白色连通块的个数. \(LCT\)动态维护图连通性 关于这一部分内容,可以参考这道例题:[BZOJ402 ...

  3. Poj(1125),Floyd,

    题目链接:http://poj.org/problem?id=1125 多源点最短路中的,最长路的,最短路. 看到这里就懵逼了,解释一下,找到一个源点,使得路最短,(遍历源点),路最短怎么求呢? 就是 ...

  4. python对表格的使用

    #!user/bin/env python # coding=utf- import xlrd def readExcelDataByName(filename, sheetName): '''读取E ...

  5. IE问题——列表项图像

    等我们实现列表时,经常会遇到一种情况:需要为列表的每一项的前面添加一个列表项图像. 我们在查阅W3C时会发现,在CSS中已经为我们提供了实现方法——“list-style-type”,我们来看看它的实 ...

  6. Git笔记(pull/push)

    一.从远程服务器上获取分支 git pull <远程主机名> <远程分支>:<本地分支> 例如 git pull origin master:loacal_bran ...

  7. with(){}方法

    <html><head><script type="text/javascript">function validate_email(field ...

  8. 由fastRPC产生的DB服务

    根据整理的RPC模型,在此上,根据最近的项目,发布了DB服务,操作数据库.以RPC模型,发布数据库的操作服务,主要发送SQL语句,在服务端执行:同时引入了流行的数据库连接池:服务端还发布了文件接收服务 ...

  9. 本地预览的vue项目,在githubpage静态展示

    本地项目github静态展示 前提 在本地npm run dev后能够在本地端口正常显示 githubpage为自己的静态页面 上线 config/index.js中设置assetsPublicPat ...

  10. BZOJ3671: [Noi2014]随机数生成器(贪心)

    Time Limit: 50 Sec  Memory Limit: 256 MBSubmit: 2098  Solved: 946[Submit][Status][Discuss] Descripti ...