关于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)

  • 最新在前
  • 最佳在前

Joomla! 除错面板

会话

方案信息

内存使用量

数据库查询