关于HTML5 form表单新增的一些特性 原
关于HTML5 form表单新增的一些特性
想必大家一看到标题大家可能有疑惑,难道joomla中文网!不传joomla授道解惑也了,开始讲HTML5了?非也!大家都知道,使用HTML5,你可以用任何(几乎是任何)以前熟悉的方式来编写页面。但是技巧的精通依赖于对编码语言的历史、约定和语义(含义)的理解,以及通过深思熟虑形成的编码风格。灵活的运用htnl5的标签更能提高工作的效率,(少些几行代码)。下面是我前几天是用html5写表单的一些笔记,拿出来给大家瞅瞅,相互学习,能给个意见也是相当不错的。
通过深思熟虑形成的编码风格。
<!DOCTYPE HTML> <head> <!-[if lt IE9]> <script src="http://yun.itxdl.cn/js/html5.js"></script> <![endif]-> <meta charset="utf-8"> </head> <html> <body> 这是一段文字<br> <section>zheshiyiduanwenzi</section> <section>zheshiyiduanwenzi</section> <section>zheshiyiduanwenzi</section> <footer>这是一段文字这是一段文字</footer> <footer>这是一段文字这是一段文字</footer> <footer>这是一段文字这是一段文字</footer> <footer>这是一段文字这是一段文字</footer> <p>传统表单 <form action="log.php" method="get"> <input type="text" name="username" value="admin"> <input type="submit" name="dosubmit" value="登录"> </form> <p>HTML5表单,新增加的form属性 <form id="login" action="login.php" method="get"> </form> <input form="login" type="text" name="username" value="admin"> <input form="login" type="submit" name="dosubmit" value="登录"> <form id="login1" action="login.php" method="get"> </form> <input form="login1" type="text" name="username" value="admin"><br> <input form="login1" type="submit" name="dosubmit" value="登录"> <p>HTML5表单,新增加的formaction和formmethod属性 <p>解释:formaction 当点击“value”的时候所提交到formaction,可随意提交到某个文件,如下 <p>formmethod,针对不同的一个按钮所提交的一个方法是不同的,不是“post”就是“get”,如下 <form id="formaction_1" action="formaction_1" method="get"></form> <input form="formaction_1" type="text" name="username" value="admin"><br> <input form="formaction_1" formaction="one.php"formmethod="get" type="submit" name="" value="登录"> <input form="formaction_1" formaction="two.php"formmethod="post"type="submit" name="" value="删除"> <input form="formaction_1" formaction="three.php" formmethod="post"type="submit" name="" value="取消"> <p> >HTML5表单,新增加的placeholder属性(必须没有“value”值,不然会不显示,这一属性可代替js的获取鼠标焦点事件一点) <form id="formaction_1" action="formaction_1" method="get"></form> <input form="formaction_1"placeholder="请输入名称"type="text" name="username" value=""><br> <input form="formaction_1" formaction="one.php"formmethod="get" type="submit" name="" value="登录"> <input form="formaction_1" formaction="two.php"formmethod="post"type="submit" name="" value="删除"> <input form="formaction_1" formaction="three.php" formmethod="post"type="submit" name="" value="取消"> <p>HTML5表单,新增加的autofocus属性(当页面一打开,文本框、选择框或者按钮可以自动获得光标的焦点,不过一个页面只能有一个控件使用该属性.所填写的一个值可以为“空”/"true"/"autofocus"这三个值都可以出现光标) <form id="formaction_1" action="formaction_1" method="get"></form> <input form="formaction_1"placeholder="请输入名称"autofocus=""type="text" name="username" value=""><br> <input form="formaction_1" formaction="one.php"formmethod="get" type="submit" name="" value="登录"> <input form="formaction_1" formaction="two.php"formmethod="post"type="submit" name="" value="删除"> <p>HTML5表单,新增加的autocomplete属性(当我们填写用户名的时候通常会出现一个下拉列表,我们曾经填写过的词,那么用autocomplete属性清除,它的一个值有“off”关闭,"on""空"打开)<br> <p>说明一下,因为上文的表单也加了autofocus属性,同一页面中光标获取焦点控件只能获取一个,所以,下面的光标没有显示, <form id="formaction_1" action="formaction_1" method="get"></form> <input form="formaction_1"autofocus autocomplete="off" placeholder="请输入名称"type="text" name="username" value=""><br> <input form="formaction_1" formaction="one.php"formmethod="get" type="submit" name="" value="登录"> <p>给用户一个固定的值,或者说提示的值而不是输入过的值 <datalist id="listtest"> <option>这是1</option> <option>这是2</option> <option>这是3</option> </datalist> <p>HTML5 新增加的list属性 <form id="formaction_1" action="formaction_1" method="get"></form> <input form="formaction_1"list="listtest" autofocus autocomplete="off" placeholder="请输入名称"type="text" name="username" value=""><br> <input form="formaction_1" formaction="one.php"formmethod="get" type="submit" name="" value="登录"> </body> </html>
版权声明:本站内容源自互联网,如有内容侵犯了你的权益,请联系删除相关内容。