HTML5的新特性–基础知识(1)

HTML5表单元素:
    input类型:电子邮件类型、搜索类型、URL类型、电话号码类型、数字类型、范围类型、颜色类型、日期类型、周类型、月类型、日期与时间类型、本地日期与时间类型
 在其他版本的HTML中,表单包含的元素非常有限,并且属性也不多,尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码。上述的不足,都已经在HTML5中被克服了。HTML5在以上的基础上增加了新的标签和属性。
 电子邮件类型:
 语法:<input type="email"/>
 自动进行验证,如果不通过则会显示错误提示。
 搜索类型:
 输入关键字操作的文本框,基本上和文本框一样,但是能快速实现文本的删除切换
 语法:<input type="search"/>
 URL类型:
 输入web站点地址的文本框,严格要求输入的网址必须以http:\开头
 语法:<input type="url" />
 例:
  <head>
   <meta charset="utf-8"/>
   <title> HTL5表单元素 </title>
   <style>
     table{border:1px solie black;border-collapse:collapse;}
     th,td{border:1px solid black;padding:5px;}
   </style>
  </head>
   <script>
     function txtRange_change(){
         var value  = document.frm.txtRange.value;
         console.log("RangeValue:"+value);
     }
     function getValue(){
         var frm = document.frm;
         //1、获取txtColor控件的value
         var value = document.frm.txtColor.value;
         console.log("txtColor:" + value);
         //2、获取日期类型控件数据
         var date =frm.txtDate.value;
         var week = frm.txtWeek.value;
         var month = frm.txtMonth.value;
         console.log("Date:"+date);
         console.log("Week:"+week);
         console.log("Month:"+month);
         //3、获取日期与时间(本地)
         var datetime = frm.txtDatetime.value;//日期与时间
         var datetimeLocal = frm.txtDatetimeLocal.value;//本地
         window.alert("Datetime:"+datetime);
         console.log("datetimeLocal:"+datetimeLocal);
         //4、获取 txtNewEmail的值
         console.log("txtNewEmail:"+frm.txtNewEmail.value);
     }
   </script>
  <body>
  <form name="frm">
   <table>
     <tr>
         <th>名称</th>
         <th>控件</th>
         <th>说明</th>
     </tr>
     <tr>
         <td>Email类型</td>
         <td>
             <input type="email" name="txtEamil" id ="txtEmail" />
         </td>
         <td>要求用户输入Email类型数据,提交表单时,会自动验证</td>
     </tr>
     <tr>
         <td>Search类型</td>
         <td>
             <input type="search" name="txtSearch" id ="txSearch" />
         </td>
         <td>搜索文本框,与text相似,特点是数据允许被快速删除</td>
     </tr>
     <tr>
         <td>URL类型</td>
         <td>
             <input type="url" name="txtUrl" id ="txtUrl" />
         </td>
         <td>对用户输入的数据进行URL检测,如果不符合规范,给出提示,阻止表单提交</td>
     </tr>
     <tr>
         <td colspan="3" align="center">
             <input type="submit" value="提交"/>
             <input type="button" value="取值"/>
         </td>
     </tr>
   </table>
   </form>
  </body>
 HTML5是支持移动终端的
 电话号码类型:主要针对电话号码的输入,能够指示浏览器根据不同的设备进行调整。
 <input type="tel" />
 注意:只对移动终端有效,会显示出拨号键盘,通过该键盘接收用户录入的数据。可以在笔记本上架一个服务器,然后用手机访问笔记本上的这个网页
 数字类型:只能接收数字值
 语法:<input type="number"/>
 属性:min:当前域能够接收的最小值
       max:当前域能接收的最大值
       step:决定了域所接收值递增或递减的步长,默认为1
 例:<input type="number" name="txtNumber" id ="txtNumber" max="10" min="3" step="2" />
 范围类型:
 <input type="range" min="" max="" value="">
 value:设定初始值
 例:<td>
        2<input type="range" min="2" max="20" value="2"  name="txtRange" />10
       </td>
 颜色类型:
 预定义的颜色拾取控件:
 语法:<input type="color" />
 例:<input type="color" name="txtColor" />
 自定义调色器:
 通过三个范围选择控件表示R、G、B,并且默认为0,最大为255
 练习1:通过三个滑块选取颜色值,并且显示在div的背景上
 step1:由于获取处理的数值都是0~255,赋值方式rgb(255,255,255)
 div.style.backgroundColoe=rgb(255,255,255)
 step 2 : 让三个滑块执行同一事件 , 事件中,获取三个滑块的值,构建成  rgb(v1,v2,v3)
 css颜色组成:
       1、red
       2、#112233
       3、rgb(0-255,0-255,0-255) 通过rgb来指定颜色
       4、rgba(0-255,0-255,0-255,0-1) 通过rgb以及alpha指定颜色
 <!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="utf-8"/>
   <title> 通过滑块选取颜色 </title>
   <style>
     div{float:left;width:200px;height:200px;border:1px solid red;}
     #showColor{background-color:#rgba(155,0,0,0)}
   </style>
   <script>
     function $(id){
         return document.getElementById(id);
     }
     function range_click(){
         var r=$("txtRangeRed").value;
         var g=$("txtRangeGreen").value;
         var b=$("txtRangeBlue").value;
         var color="rgb("+r+","+g+","+b+")";
         console.log(color);
         $("showColor").style.backgroundColor=color;
     }
   </script>
  </head>
  <body>
    <div>
     R:0<input type="range" id="txtRangeRed" value="0" min="0" max="255" onchange="range_click()"/>255
     G:0<input type="range" id="txtRangeGreen" value="0" min="0" max="255" onchange="range_click()"/>255
     B:0<input type="range" id="txtRangeBlue" value="0" min="0" max="255" onchange="range_click()"/>255
    </div>
    <div id="showColor"></div>
  </body>
 </html>
 日期类型:创建一个日期输入域
 语法:<input type="date"/>
 例:<input type="date" name="txtDate" />
 周类型:与date类型相似,但是只能选择周
 语法:<input type="week"/>
 例:<input type="week" name="txtWeek" />
 月份类型:与date类型相似,但是只能选择一个月份
 语法:<input type="month" />
 <input type="datetime"/>
 通过箭头选取日期时间(Safari)
 <input type="datetime-local" />
 弹出一个日历控件,允许选择年月日,通过按钮选取时间
 表单属性
 Placeholder属性:常用于search输入类型,也可用在文本域,可用于提示用户输入正确的内容。<input type="search" placeholder="请输入用户名称">
 value一般不做用户提示,用placeholder来提示好点
 required属性:防止表单为空的提示效果
 语法:<input type="text" required />
 required属性只要出现在表单元素中就行,无论后面写的是false、true,想做非空,不写就行
 multiple属性:可以用在一些输入类型中,从而支持在一个域中输入多个值,但是所插入的值必须用逗号隔开。
 语法:<input type="email" multiple />
 Autofocus属性:在网页加载时自动让域获得焦点,方便快捷的定位元素
 <input type="text" autofocus />
 pattern属性:作用是实现元素的验证,它支持正则,用于快速实现自定义表达式验证,pattern等号后面写正则表达式,提交表单时会自动进行验证
 语法:<input type="text" pattern="13[0-9]d{8}" />
 例:
 <!DOCTYPE html>
 <html>
  <head>
   <title> HTML5表单元素 </title>
   <meta charset="utf-8" />
   <style>
     table{border:1px solid black;border-collapse:collapse;}
     th,td{border:1px solid  black;padding:5px;}
   </style>
  </head>
  <body>
     <form name="frm">
     <table>
         <tr>
             <th>名称</th>
             <th>控件</th>
             <th>说明</th>
         </tr>
         <tr>
             <td>Email类型</td>
             <td>
                 <input type="email" name="txtEmail" id="txtEmail" />
             </td>
             <td>要求用户输入Email类型数据,提交表单时,会自动验证</td>
         </tr>
         <tr>
             <td>Search类型</td>
             <td>
                 <input type="search" id="txtSearch" name="txtSearch" />
             </td>
             <td>
                 搜索文本框,与text相似,特点:数据允许被快速删除
             </td>
         </tr>
         <tr>
             <td>URL类型</td>
             <td>
                 <input type="url" name="txtUrl" />
             </td>
             <td>
                 对用户输入的数据进行Url检测,如果不符合规范,给出提示,阻止表单提交
             </td>
         </tr>
         <tr>
             <td>tel类型</td>
             <td>
                 <input type="tel" name="txtTel" />
             </td>
             <td>
                 注意:指对移动终端有效,会显示出拨号键盘,通过该键盘接收用户录入的数据
             </td>
         </tr>
         <tr>
             <td>数字类型</td>
             <td>
                 <input type="number" min="18" max="80" step="1" name="txtNumber" />
             </td>
             <td>
                 只能接收数字,min表示数字范围下限值,max表示数字范围上限值,step表示步长
             </td>
         </tr>
         <tr>
             <td>范围类型</td>
             <td>
                 <input type="range" name="txtRange" min="18" max="80" step="1" value="18" onchange="txtRange_change()" />
             </td>
             <td>
                 提供一个滑块工具给用户去选择指定范围内的数值
             </td>
         </tr>
         <tr>
             <td>颜色类型</td>
             <td>
                 <input type="color" name="txtColor" />
             </td>
             <td>
                 弹出一个调色板提供给用户选取颜色
             </td>
         </tr>
         <tr>
             <td>日期类型</td>
             <td>
                 <input type="date" name="txtDate" />
             </td>
             <td>
                 弹出日历框供用户选择,用户可以精确选择到某一天
             </td>
         </tr>
         <tr>
             <td>周类型</td>
             <td>
                 <input type="week" name="txtWeek" />
             </td>
             <td>
                 弹出一个日历控件,用户能够选取一个星期的时间
             </td>
         </tr>
         <tr>
             <td>月类型</td>
             <td>
                 <input type="month" name="txtMonth" />
             </td>
             <td>
                 弹出一个日历控件,允许用户选择一个月
             </td>
         </tr>
         <tr>
             <td>日期与时间</td>
             <td>
                 <input type="datetime" name="txtDatetime" />
             </td>
             <td>
                 通过箭头选取日期时间(Safari)
             </td>
         </tr>
         <tr>
             <td>本地日期与时间类型</td>
             <td>
                 <input type="datetime-local" name="txtDatetimeLocal" />
             </td>
             <td>
                 弹出一个日历控件,允许用户选择年月日,通过按钮选取时间
             </td>
         </tr>
         <tr>
             <td>Placeholder</td>
             <td>
                 <input type="text" name="txtUsername" placeholder="请输入用户名称" />
             </td>
             <td>
                 默认显示一段文字在表单元素上
             </td>
         </tr>
         <tr>
             <td>Required</td>
             <td>
                 <input type="text" name="txtAddress" required />
             </td>
             <td>
                 要求当前元素必须录入值,否则表单不允许提交
             </td>
         </tr>
         <tr>
             <td>Multiple</td>
             <td>
                 <input type="email" name="txtNewEmail" multiple />
             </td>
             <td>
                 允许用户输入多段数据,但必须使用’,’ 进行分割
             </td>
         </tr>
         <tr>
             <td>Autofocus</td>
             <td>
                 <input type="text" name="txtFocus" autofocus />
             </td>
             <td>
                 网页加载时,让控件自动获取焦点
             </td>
         </tr>
         <tr>
             <td>Pattern</td>
             <td>
                 <input type="text" name="txtPhone" pattern="13d{9}" />
             </td>
             <td>
                 自定义正则表达式验证当前控件中的值,如果值不满足验证规则,表单则无法提交
             </td>
         </tr>
         <tr>
             <td colspan="3" align="center">
                 <input type="submit" value="提交" />
                 <input type="button" value="取值" onclick="getValue()" />
             </td>
         </tr>
     </table>   
     </form>
  </body>
 </html>
 表单属性是可以组合使用的
 Form属性,可用于在from标签之外声明表单元素
 语法:
 <form id="myform"></form>
 <input form="myform" type="text">
 例:
 <body>
    <form id="frmUser">
         用户名称:<input type="text" name="txtUsername" />
         <input type="submit" value="提交"/>
    </form>
    <hr/>
    新用户名称:<input form="frmUser" type="text" name="txtNewName">
  </body>
 新表单元素:
 detalist元素,progress元素,meter元素,output元素
 detalist元素:可以创建一组列表项,相当于select属性,但是需要放在输入框上才能使用,用户看的是label的值,但是选的时候是value值
 <form>
   <datalist id="mylist">
      <option value="010">北京</option>
     <option value="021" label="上海" />
     <option value="022">天津</option>
     <option value="023" label="重庆" />
   </datalist>
   <input type="text" name="txtAddress" list="mylist">
 </form>
 detalist元素写完后自己本身是没有什么效果的,他是提交给其他控件使用的
 progress元素:表示一个任务的当前完成进度,而且通常这些任务都在表单中启动和处理。
 属性:value(任务执行的进度),max(声明任务完成后达到的值)
 <progress max="100" value="20"></progress>
 Meter元素:用于显示刻度,而非进度
 属性:min、max:设置范围便捷
       value:确定测量的值
       low、high、optimum:将范围划分为不同的部分和设置最佳位置
 <meter min="0" max="100">
 output元素:通常用于显示表单元素处理的结果值,显示表单控件与表单控价的处理结果
 属性:for,将output元素与参与计算的源元素相关联,目的为了提高代码可读性
 例:
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>  </title>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
   <style type="text/css">   
   </style>
   <script>
     function $(id){
         return document.getElementById(id);
     }
     function changeProgress(){
         //从滚动条的当前进度开始滚动
         setInterval(function(){
             var value = parseInt($("pro").value);
             value += 5;
             if(value >= 100){
                 value = 0;
             }
             $("pro").value=value;
         },300);
     }
     //window.onload = changeProgress;
     window.onload  = function(){
         //为form表单添加事件
         $("frm").oninput = function(){
             var num1 = parseInt($("txtRange").value);
             var num2 = parseInt($("txtNumber").value);
             var result = num1 + num2;
             $("outResult").value = result;
         }
     }
   </script>
  </head>
  <body>
     <form id="frm">
         <datalist id="list">
             <option value="010">北京</option>
             <option value="021" label="上海" />
             <option value="022">天津</option>
             <option value="023" label="重庆" />
         </datalist>
         <input type="text" name="txtAddress"  list="list" />
         <hr />
         滚动条:<progress id="pro" max="100" value="50"></progress>
         <hr />
         刻度表:<meter id="met" min="0" max="220" low="60" high="100" optimum="85" value="50"></meter>
         <hr />
         0<input type="range" id="txtRange" min="0" max="50" value="0" />50 +
         <input type="number" id="txtNumber" value="0" />=
         <output id="outResult" for="txtRange txtNumber"></output>
     </form>
  </body>
 </html>
IT文库 » HTML5的新特性–基础知识(1)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址