大伟的博客 » html5 http://www.oneflash.net www.oneflash.net Tue, 06 Dec 2011 05:23:15 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 HTML5的表单验证 http://www.oneflash.net/2010/04/html5-form-valid/ http://www.oneflash.net/2010/04/html5-form-valid/#comments Mon, 05 Apr 2010 10:47:25 +0000 David http://www.oneflash.net/?p=333

  • 输入框自动获取焦点

    在网页加载完成是，光标自动聚焦在用户需要输入的地方，比如邮箱登陆页面的输入用户名，之前我们需要在网页onload的时候来用javascript代码指定某个输入框获取焦点的做法，现在html 5直接支持在输入框中加入autofocus属性。

    <input type="text" id="username" name="username" autofocus />

  • 文本框的输入提示

    之前我们需要用javascript的onblur、onfocus来实现一个输入框的提示信息，现在只需要增加一个placeholder属性。

    <input type="email" id="uemail" name="uemail" placeholder="example@domain.com" required />

  • 强大的表单验证功能

    判断必填项

    判断数据格式

  • 有趣的input type=”range”

    可以直接拖动，可以设置最小值、最大值、以及每拖动一格的步长。

    <input type="range" min="1" max="100" step="10" name="s" />

  • input type=”number”

    可以通过点击右侧的上下箭头，直接进行加减操作。

  • 输入框下拉提示

    可以用作现在很流行的ajax输入提示，也可以当作是一个可编辑的下拉菜单。即可自行输入，也可以直接下拉选择。

    <input id="search" type="url" list="searchlist" required />
<datalist id="searchlist">
	<option value="http://www.google.com" label="Google" />
	<option value="http://www.yahoo.com" label="Yahoo" />
	<option value="http://www.bing.com" label="Bing" />
	<option value="http://www.baidu.com" label="Baidu" />
</datalist>

  • 还有默认的日期选择

    <input type="date" name="birthday" />

    • 完整的DEMO:http://www.oneflash.net/demo/html5-form-demo.html，请使用最新版本的Chrome+Oprea一起浏览，才能看到全部效果……

    ]]>     http://www.oneflash.net/2010/04/html5-form-valid/feed/ 6     HTML5的写法 http://www.oneflash.net/2010/04/html5-format/ http://www.oneflash.net/2010/04/html5-format/#comments Mon, 05 Apr 2010 05:19:28 +0000 David http://www.oneflash.net/?p=329 对比一下XHTML 1.0 Transitional的规范，html5基本上没有XHTML 1.0 Transitional严格的要求，并且简化了很多东西。

    • 文档声明更简单了。

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--在HTML5中，这样写：-->
<!DOCTYPE html>

    • html标签上不需要声明命名空间。

      <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<!--在HTML5中，这样写：-->
<html  lang="zh-CN">

    • 字符集编码声明也简单了

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--在HTML5中，这样写：-->
<meta charset="UTF-8" />

    • 可以不用给css及javascript代码写type属性了

      <script type="text/javascript"></script>
<style type="text/css"></style>
<!--在HTML5中，可以直接写：-->
<script></script>
<style></style>

    • 没有XHTML代码规范的要求

      所有的标记都必须要有一个相应的结束标记；
      所有标签的元素和属性的名字都必须使用小写；
      所有的XML标记都必须合理嵌套；
      所有的属性必须用引号”"括起来；

      <div class=test></div>
<br>
<INPUT TYPE="TEXT" />
<!--这些都不做严格要求-->
    ]]>     http://www.oneflash.net/2010/04/html5-format/feed/ 6