关于HTML5 form表单新增的一些特性原

redmaomail 2024-07-25 10:35 阅读数 76 #Joomla

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

分享到：

上一篇：Javascript的调试方法原下一篇：Joomla云服务器提示发现漏洞的解决方案原

关于HTML5 form表单新增的一些特性 原

关于HTML5 form表单新增的一些特性原