html之美（2）

猫性男孩

　　3、简单之美
　　大道至简，化繁为简是许多标准、规范、框架的终极目标。HTML5很好的诠释了这一点，例如以浏览器原生能力支持和代替复杂的Javascript代码、提供简单而强大的新API。
　　HTML5自身即跨浏览器的JS库，使得开发者的工作更容易：例如新的表单标签和属性、内置拖拽事件使得完全不需要Javascript的支持就能实现许多常用的功能。
　　我们再来看HTML5表单，它实现了许多简单易用的原生属性和控件，可以轻松的构建强大的表单，帮我们节约大量的Javascript代码。下面是一个HTML5表单的示例：
<form>      <p>                <label for="email">电子邮箱：</label>                <input type="email" required autofocus name="email" id="email" placeholder="您的电子邮箱">      </p>      <p>                <label for="username">用户名：</label>                <input type="text" pattern="^/w{6,12}$" required name="username" placeholder="6到12位的英文字符">                <input type="search" placeholder="用户名搜索" autosave="www.yujie.com" results="5" name="username-search" id="username-search">      </p>      <p>                <label for="username-search">生日：</label>                <input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10">      </p>      <p>                <label for="blog">博客地址：</label>                <input type="url" name="blog" placeholder="您的博客地址" id="blog">      </p>      <p>                <label for="mobile">手机：</label>                <input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手机号">      </p>      <p>                <label id="label-working-year" for="working-year">工作年限：</label>                <input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3">      </p>      <p>                <label for="age">年龄：</label>                <input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年龄">      </p>      <p>                <label for="avatar">头像：</label>                <input type="image" src="user.png" mce_src="user.png" name="avatar" id="avatar" placeholder="点击选择头像">      </p>  </form>  
　　示例中包含了email、search、date、url、range、number、image类型的输入框和required、autofocus、placeholder、pattern、autosave、results、min、max、step、autocomplete等新属性，它们简单到根据名字就可以揣测出用途。下面是效果图。

　　HTML5表单在各浏览器里的支持程度和表现并不一致，例如Search输入框目前只被Webkit内核浏览器支持，而日期弹出框和拖动条刻度仅被Opera支持。以上的标签类型和属性目前没有一个浏览器完美支持。