HTML的笔记及展示（2）（表单元素、input元素、label、button以及HTML5新增的一些元素）

<form action="http://39.106.170.146/html/summary/summary01.html" 
method="post"></form>

  单行文本框：<input id="username" name="username" type="text"/><br/>
  不能编辑的文本框：<input id="usename" name="usename" type="text" 
          readonly="readonly"/>
  密码框：<input id="password" name="password" type="password" />
  隐藏域：<input id="hidden" name="hidden" type="hidden"/></br>
  第一组单选框：<br/>
  红：<input id="color" name="color" type="radio" value="red"/>
  绿：<input id="color2" name="color" type="radio" value="green"/>
  蓝：<input id="color3" name="color" type="radio" value="blue"/><br/>
  第二组单选框：<br/>
  男性：<input id="gender" name="gender" type="radio" value="male"/>
  女性：<input id="gender2" name="gender" type="radio"
       value="female"/><br/>
  两个复选框：<br/>
  <input id="website" name="website" type="checkbox"
    value="leegang.org"/>
  <input id="website2" name="website" type="checkbox"
    value="crazy.org"/><br/>
  文件上传域：<input id="file" name="file" type="file"/><br/>
  图像域：<input type="image" src="../2018.12.17/denglu/weichat_0.jpg"
      alt="登录背景图" width="340" height="210"/><br/>
  下面是四个按钮：<br/>
  <input id="ok" name="ok" type="submit" value="提交"/>
  <input id="dis" name="dis" type="submit" value="提交" disabled />
  <input id="cancel" name="cancel" type="reset" value="重填"/>
  <input id="no" name="no" type="button" value="无动作"/>
  <button type="button">提交</button><br/>
  <button type="submit"><img src="../2018.12.17/denglu/weichat_0.jpg"
   width="340" height="210" alt="登录背景图"/>

  隐式使用for属性：<label for="username">单行文本框：</label>
  <input id="username" name="username" type="text"/><br/>
  显式关联：<label>密码框：<input id="password" name="password" 
      type="password" /></label>

下面是简单下拉菜单：<br/>
    <select id="skills" name="skills">
      <option value="java">java语言</option>
      <option value="c">C语言</option>
      <option value="ruby">ruby语言</option>
    </select><br/><br/><br/>
    下面是允许多选的列表框：<br/>
    <select id="books" name="books"
      multiple="multiple" size="4">
      <option value="java">疯狂java讲义</option>
      <option value="android">疯狂Android讲义</option>
      <option value="ee">轻量级java ee企业应用实战</option>
    </select><br/>

用户名:<input type="text" name="name" autofocus placeholder="请输入用户姓名" /><p>
密码:<input type="password" name="name" placeholder="请输入密码"/><p>`

<datalist id="books">
    <option value="java">疯狂Java讲义</option>
    <option value="ee">轻量级 Java EE</option>
    <option value="android">Android</option>
</datalist>

type="color"的文本框：<br/><input name="color" type="color"/><p>
type="date"的文本框：<br/><input name="date" type="date"/><p>
type="time"的文本框：<br/><input name="time" type="time"/><p>
type="datetime-local"的文本框：<br/><input name="datetime-local" 
                type="datetime-local"/><p>
type="month"的文本框：<br/><input name="month" type="month"/><p>
type="week"的文本框：<br/><input name="week" type="week"/><p>
type="email"的文本框：<br/><input name="email" type="email" multiple/><p>
type="tel"的文本框：<br/><input name="tel" type="tel"/><p>
      <!--pc浏览器不会不通过-->
type="url"的文本框：<br/><input name="url" type="url"/><p>
type="number"的文本框：<br/><input name="number" type="number" min="0"
           max="100" step="5"/><p>
type="range"的文本框：<br/><input name="range" type="range" min="0" 
          max="100" step="5"/><p>
type="search"的文本框：<br/><input name="search" type="search"/><p>  

图书名：<input name="name" type="text" required/><br/>
    图书ISBN：<input name="isbn" type="text"
      required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
    图书价格：<input name="price" type="number"
      min="20" max="150" step="5"/><br/>
    <input value="提交" type="submit"/> 

<form action="add" method="post">
    生日：<input id="birth" name="birth" type="date"/><p>
    邮件地址：<input id="email" name="email" type="email"/><p>
    <input type="submit" value="提交" onclick="return check();"/> 
</form>
  <script type="text/javascript">
    var check = function()  {
      return commonCheck("birth" , "生日" , "字段必须是有效的日期！")
      && commonCheck("email" , "邮件地址" , "字段必须符合电子邮件格式！");
    }
    var commonCheck = function(field , fieldName , tip){
      var targetEle = document.getElementById(field);
      //如果该字段的值为空
      if (targetEle.value.trim() == "") {
        alert(fieldName + "字段必须填写！");
        return false;
      }
      //调用checkValidity()方法执行输入校验
      else if(!targetEle.checkValidity()){
        alert(fieldName + tip);
        return false;
      }
      return true;
    }
  </script>