HTML5 form标签与属性的使用

<style>
  form{
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
    font-family: "Microsoft Yahei";
    font-size: 20px;
  }
  input{
    display: block;
    width: 100%;
    height: 30px;
    margin: 10px 0;
  }
</style>

<form action="">
    <fieldset>

      <!-- 表单标题 -->
      <legend>表单元素</legend>

      <!-- 用户名 -->
      <label for="username">
        用户名: <input type="text" name="username" id="username">
      </label>

      <!-- 密码 -->
      <label for="pwd">
        密码: <input type="password" name="pwd" id="pwd">
      </label>

      <!-- 性别 -->
      <label for="sex">
        性别: <input type="text" name="sex" list="sexData" id="sex">
      </label>

      <!-- 性别数据列表 -->
      <datalist id="sexData">
        <option>男</option>
        <option>女</option>
        <option>未知</option>
      </datalist>

      <!-- 推荐人 -->
      <label for="">
        <!-- output 标签不会当做数据提交，表示只是向外展示一个数据 -->
        推荐人: <output>春哥</output>
      </label>

      <!-- 度量器 -->
      <br />
      <label for="">
        <!-- value：当前值  max：最高值 min：最小值 low：不能低于这个值，低于黄色警告 high：不能告诉这个值，高于黄色警告-->
        度量器: <meter value="20" max="100" min="0" low="30" high="80"></meter>
      </label>

      <!-- 进度条 -->
      <br />
      <label for="">
        进度条: <progress value="40" max="100" min="0"></progress>
      </label>

      <input type="submit" value="提交">

    </fieldset>
</form>