关于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>
记录本站的成长经历
评论 (0)