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 等新属性，
它们简单到根据名字就可以揣测出用途。下面是效果图。