整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML5 新的 Input 類型

          TML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

          我全面介紹這些新的輸入類型:

          • color

          • date

          • datetime

          • datetime-local

          • email

          • month

          • number

          • range

          • search

          • tel

          • time

          • url

          • week

          注意:并不是所有的主流瀏覽器都支持新的input類型,不過您已經(jīng)可以在所有主流的瀏覽器中使用它們了。即使不被支持,仍然可以顯示為常規(guī)的文本域。

          Input 類型: color

          color 類型用在input字段主要用于選取顏色,如下所示:

          實例

          從拾色器中選擇一個顏色:

          選擇你喜歡的顏色: <input type="color" name="favcolor">

          Input 類型: date

          date 類型允許你從一個日期選擇器選擇一個日期。

          實例

          定義一個時間控制器:

          生日: <input type="date" name="bday">

          Input 類型: datetime

          datetime 類型允許你選擇一個日期(UTC 時間)。

          實例

          定義一個日期和時間控制器(本地時間):

          生日 (日期和時間): <input type="datetime" name="bdaytime">

          Input 類型: datetime-local

          datetime-local 類型允許你選擇一個日期和時間 (無時區(qū)).

          實例

          定義一個日期和時間 (無時區(qū)):

          生日 (日期和時間): <input type="datetime-local" name="bdaytime">

          Input 類型: email

          email 類型用于應該包含 e-mail 地址的輸入域。

          實例

          在提交表單時,會自動驗證 email 域的值是否合法有效:

          E-mail: <input type="email" name="email">

          提示: iPhone 中的 Safari 瀏覽器支持 email 輸入類型,并通過改變觸摸屏鍵盤來配合它(添加 @ 和 .com 選項)。

          Input 類型: month

          month 類型允許你選擇一個月份。

          實例

          定義月與年 (無時區(qū)):

          生日 (月和年): <input type="month" name="bdaymonth">

          Input 類型: number

          number 類型用于應該包含數(shù)值的輸入域。

          您還能夠設定對所接受的數(shù)字的限定:

          實例

          定義一個數(shù)值輸入域(限定):

          數(shù)量 ( 1 到 5 之間 ): <input type="number" name="quantity" min="1" max="5">

          使用下面的屬性來規(guī)定對數(shù)字類型的限定:

          屬性描述
          disabled規(guī)定輸入字段是禁用的
          max規(guī)定允許的最大值
          maxlength規(guī)定輸入字段的最大字符長度
          min規(guī)定允許的最小值
          pattern規(guī)定用于驗證輸入字段的模式
          readonly規(guī)定輸入字段的值無法修改
          required規(guī)定輸入字段的值是必需的
          size規(guī)定輸入字段中的可見字符數(shù)
          step規(guī)定輸入字的的合法數(shù)字間隔
          value規(guī)定輸入字段的默認值

          嘗試一下帶有所有限定屬性的例子 嘗試一下

          Input 類型: range

          range 類型用于應該包含一定范圍內(nèi)數(shù)字值的輸入域。

          range 類型顯示為滑動條。

          實例

          定義一個不需要非常精確的數(shù)值(類似于滑塊控制):

          <input type="range" name="points" min="1" max="10">

          請使用下面的屬性來規(guī)定對數(shù)字類型的限定:

          • max - 規(guī)定允許的最大值

          • min - 規(guī)定允許的最小值

          • step - 規(guī)定合法的數(shù)字間隔

          • value - 規(guī)定默認值

          Input 類型: search

          search 類型用于搜索域,比如站點搜索或 Google 搜索。

          實例

          定義一個搜索字段 (類似站點搜索或者Google搜索):

          Search Google: <input type="search" name="googlesearch">

          Input 類型: tel

          實例

          定義輸入電話號碼字段:

          電話號碼: <input type="tel" name="usrtel">

          Input 類型: time

          time 類型允許你選擇一個時間。

          實例

          定義可輸入時間控制器(無時區(qū)):

          選擇時間: <input type="time" name="usr_time">

          Input 類型: url

          url 類型用于應該包含 URL 地址的輸入域。

          在提交表單時,會自動驗證 url 域的值。

          實例

          定義輸入URL字段:

          添加您的主頁: <input type="url" name="homepage">

          提示: iPhone 中的 Safari 瀏覽器支持 url 輸入類型,并通過改變觸摸屏鍵盤來配合它(添加 .com 選項)。

          Input 類型: week

          week 類型允許你選擇周和年。

          實例

          定義周和年 (無時區(qū)):

          選擇周: <input type="week" name="week_year">

          HTML5 <input> 標簽

          標簽描述
          <input>描述input輸入器

          如您還有不明白的可以在下面與我留言或是與我探討QQ群{{308855039,我們一起飛!

          錄:

          HTML5新結(jié)構(gòu)標簽

          HTML5新其他標簽

          HTML5新input類型

          HTML5新屬性

          HTML5高級應用

          html4和html5對比:

          Html4代表示例:

          <div id=“header”></div>

          <div id=“nav”></div>

          <div class=“section”>

          <div class=“article”></div>

          </div>

          <div id=“sideBar”></div>

          <div id=“footer”></div>

          Html5代碼示例:

          <header></header>

          <nav></nav>

          <section>

          <article></article>

          </section>

          <aside></aside>

          <footer></footer>

          HTML5新結(jié)構(gòu)標簽:

          <header></header>頁頭

          <footer></footer>頁腳

          <nav></nav>導航

          <section></section>內(nèi)容區(qū)塊

          <article></article>文章區(qū)塊

          <aside></aside>article之外的信息

          <hgroup></hgroup>標題組

          <figure></figure>數(shù)據(jù)組

          <figcaption></figcaption>數(shù)據(jù)組標題

          <header></header>用法

          <header>

          <h1>網(wǎng)頁標題</h1>

          </header>

          <article>

          <header>

          <h1>文章標題</h1>

          </header>

          <p>文章正文內(nèi)容</p>

          </article>

          <footer></footer>用法

          <article>

          文章主體

          <footer>

          文章腳注

          </footer>

          </article>

          <footer>

          <ul>

          <li>站內(nèi)鏈接</li><li>站內(nèi)鏈接</li><li>站內(nèi)鏈接</li>

          </ul>

          </footer>

          <nav></nav>用法

          <nav>

          <ul>

          <li><a href=“#”>鏈接內(nèi)容</a></li>

          <li><a href=“#”>鏈接內(nèi)容</a></li>

          <li><a href=“#”>鏈接內(nèi)容</a></li>

          </ul>

          </nav>

          <section></section>用法

          <section>

          <h1>標題</h1>

          <p>內(nèi)容</p>

          </section>

          <article></article>用法

          <article>

          <header>

          <h1></h1>

          </header>

          <footer>

          <ul><li></li></ul>

          </footer>

          </article>

          <aside></aside>用法

          <article>

          <h1>文章標題</h1>

          <p>內(nèi)容</p>

          <aside>相關(guān)內(nèi)容</aside>

          </article>

          <hgroup></hgroup>用法

          <article>

          <header>

          <hgroup>

          <h1>主標題</h1>

          <h2>子標題</h2>

          </hgroup>

          </header>

          <p>正文</p>

          </article>

          <figure></figure>用法

          <figure>

          <figcaption>標題</figcaption>

          <img src=“a.jpg”>

          <img src=“b.jpg”>

          <img src=“c.jpg”>

          </figure>

          新元素標簽追加樣式:

          說明:因為很多瀏覽器還未支持html5新元素,須對新元素追加如下說明

          //追加block說明

          article,aside,dialog,figure,footer,header,legend,nav,section{display:block}

          另:ie8前的瀏覽器不支持css方法追加,須用如下方法:

          <script>

          document.createElement(“header”);

          document.createElement(“nav”);

          document.createElement(“article”);

          document.createElement(“footer”);

          </script>

          HTML5新其他標簽:

          <video></video>視頻

          <audio></audio>音頻

          <embed></embed>多媒體

          <mark></mark>標記

          <time></time>時間

          <wbr></wbr>軟換行

          <canvas></canvas>繪圖

          <video></video>用法

          <video src=“test.ogg" controls="controls"></video>

          <audio></audio>用法

          <audio src=“test.wav"></audio>

          <embed></embed>用法

          <embed src=“test.swf"></embed>

          <mark></mark>用法

          <p>謝謝您光臨本站 <mark>段先生</mark>。</p>

          <time></time>用法

          <p>早上 <time>9:00</time> 上班。</p>

          <p>我在 <time datetime="2016-02-14">情人節(jié)</time> 有個約會。</p>

          <wbr></wbr>用法

          <p>學好網(wǎng)頁設計必須要學會的軟件有:

          <wbr />photoshop<wbr />dreamweaver<wbr />flash。

          </p>

          <canvas></canvas>用法

          語法:

          <canvas></canvas>

          注:canvas標簽只是圖形容器,您必須使用腳本來繪制圖形。

          使用范例:

          <canvas id="myCanvas"></canvas>

          <script>

          var canvas=document.getElementById('myCanvas');

          var ctx=canvas.getContext('2d');

          ctx.fillStyle='#FF0000';

          ctx.fillRect(0,0,80,100);

          </script>

          HTML5新input類型:

          <input type=“email” />e-mail地址文本框

          <input type=“url” />url地址文本框

          <input type=“number” />數(shù)值文本框

          <input type=“range” />數(shù)值范圍文本框

          日期相關(guān)類型:

          <input type=“date” />

          <input type=“month” />

          <input type=“week” />

          <input type=“time” />

          <input type=“datetime” />

          <input type=“datetime-local” />

          HTML5新屬性:

          表單相關(guān)屬性

          鏈接相關(guān)屬性

          其他屬性

          全局屬性

          表單相關(guān)屬性

          autocomplete屬性

          autofocus屬性 自動獲得焦點屬性

          placeholder屬性 提示信息屬性

          form屬性 表單聲明屬性

          required屬性 內(nèi)容檢驗屬性

          鏈接相關(guān)屬性

          <a><area>新加media屬性

          <area>新加hreflang屬性

          <link>新加sizes屬性

          <base>新加target屬性

          其他屬性

          <ol>新加reversed屬性

          <meta>新加charset屬性

          <menu>新加type和label屬性

          <style>新加scoped屬性

          <script>新加async屬性

          <iframe>新加sandbox,seamless,srcdoc

          全局屬性

          可編輯內(nèi)容屬性contentEditable

          頁面可編輯屬性designMode

          隱藏元素屬性hidden

          拼寫檢查屬性spellcheck

          焦點獲取屬性tabindex

          HTML5高級應用

          繪圖應用canvas

          多媒體控制

          表單驗證

          繪圖應用canvas

          用canvas繪制圖形

          用canvas繪制漸變色

          用canvas繪制變形圖形

          繪制圖像

          動畫效果

          用canvas繪制圖形——繪制矩形

          獲取canvas元素

          獲取2d圖形(獲取上下文)

          設定繪圖樣式fillStyle,strokeStyle

          設定線寬lineWidth

          用canvas繪制圖形——繪制路徑

          獲取canvas元素

          獲取2d圖形(獲取上下文)

          創(chuàng)建路徑beginPath()

          創(chuàng)建圓形路徑arc(x,y,radius,startAngle,endAngle,anticlockwise)

          關(guān)閉路徑closePath()

          用canvas繪制圖形——繪制圓形

          var canvas = document.getElementById("mycanvas");

          var ctx = canvas.getContext("2d");

          ctx.arc(150,100,100,0,(Math.PI/180)*360,true);

          ctx.fillStyle="rgba(255,0,0,0.4)";

          ctx.fill();

          用canvas繪制圖形——繪制三角

          方法moveTo(x,y),lineTo(x,y):

          var obj = document.getElementById("mycanvas");

          var context = obj.getContext("2d");

          context.strokeStyle="red";

          context.moveTo(0,0);

          context.lineTo(10,100);

          context.lineTo(130,100);

          context.lineTo(0,0);

          context.stroke();

          用canvas繪制圖形——繪制弧線

          方法bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y))

          var obj = document.getElementById("mycanvas");

          var context = obj.getContext("2d");

          context.strokeStyle="red";

          context.moveTo(0,0);

          context.bezierCurveTo(10,0,100,0,100,100);

          context.stroke();

          用canvas繪制漸變色——繪制線性漸變

          方法createLinearGradient(xStart,yStart,xEnd,yEnd);

          方法addColorStop(offset,color);

          var obj = document.getElementById("mycanvas");

          var context = obj.getContext("2d");

          var objLg = context.createLinearGradient(0,100,500,100);

          objLg.addColorStop(0,"red");

          objLg.addColorStop(0.5,"green");

          objLg.addColorStop(1,"blue");

          context.fillStyle=objLg;

          context.fillRect(0,0,500,300);

          用canvas繪制漸變色——繪制放射漸變

          方法createRadialGradient(x0,y0,r0,x1,y1,r1);

          方法addColorStop(offset,color);

          var obj = document.getElementById("mycanvas");

          var context = obj.getContext("2d");

          var rg = context.createRadialGradient(50,50,0,50,50,50);

          context.createR

          rg.addColorStop(0,"red");

          rg.addColorStop(1,"green");

          context.fillStyle=rg;

          context.fillRect(0,0,150,150);

          用canvas繪制變形圖形——平移

          方法:translate(x,y);

          var obj = document.getElementById("mycanvas");

          var context = obj.getContext("2d");

          context.translate(100,150);

          context.fillStyle="red";

          context.fillRect(0,0,200,200);

          用canvas繪制變形圖形——縮放

          方法:scale(x,y);

          var obj = document.getElementById("mycanvas");

          var context = obj.getContext("2d");

          context.scale(2,2);

          context.fillStyle="red";

          context.fillRect(0,0,10,10);

          用canvas繪制變形圖形——旋轉(zhuǎn)

          方法:rotate (angle);

          var obj = document.getElementById("mycanvas");

          var context = obj.getContext("2d");

          context.rotate(Math.PI/180*5);

          context.fillStyle="red";

          context.fillRect(0,0,100,100);

          繪制圖像

          方法:drawImage(image,x,y,w,h)

          var obj = document.getElementById("mycanvas");

          var context = obj.getContext("2d");

          var image = new Image();

          image.src="img.jpg";

          context.drawImage(image,0,0,500,300);

          圖像平鋪

          方法:createPattern(image,type)

          var obj = document.getElementById("mycanvas");

          var context = obj.getContext("2d");

          var img = new Image();

          img.src="img.jpg";

          var ptrn = context.createPattern(img,"repeat");

          context.fillStyle=ptrn;

          context.fillRect(0,0,2000,2000);

          請私信我回復“666”,為嚴哥打Call~,還有更多驚喜哦~

          ....................................................................

          我的微信公眾號:UI嚴選 —越努力,越幸運

          HTML5簡介:

          定義:HTML5號稱下一代HTML,html的最新版本,定義了新的標簽、css、JavaScript,html5新標簽IE9以上版本瀏覽器才兼容,因此在實際開發(fā)中要問老板是否兼容低版本瀏覽器。

          擴展內(nèi)容:語義化標簽、本地儲存、兼容特性、2D 3D、動畫 過渡、CSS3新特性、性能與集成

          HTML5常用新標簽:

          HTML5標簽多為語義化標簽,主要是針對瀏覽器搜索引擎,IE9瀏覽器中主要將所有語義化標簽都轉(zhuǎn)化為塊級元素,語義化標簽在移動端支持比較好,后面會有更多語義化標簽學習。

          HTML5常用新標簽:



          datalist選項輸入框:

          此標簽和input標簽搭配可以實現(xiàn)input輸入提示,注意:input標簽中必須要有l(wèi)ist屬性,其值綁定的是datalist的id值,option標簽中的value值不能為空,否則此功能失效。

              <body>
                  <input type="text" value="輸入科目" list="lis" >
                  <datalist id='lis'>
                  <option value="科目1"></option>
                  <option value="科目2"></option>
                  <option value="科目3"></option>
                  <option value="科目4"></option>
                  </datalist>
              </body>

          fieldset表單元素分組:

          此標簽和legend標簽搭配可以將表單內(nèi)相關(guān)元素分組(外部用一個矩形的方框包裹)

          
              <body>
                <fieldset>
                  <legend>用戶信息</legend>    <!-- 矩形框邊插入的文本信息,去掉此標簽則為 封閉的矩形 -->
                  <input type="text" value="user"><br>
                  <input type="password" value="password">
                </fieldset>
              </body>

          html5中input標簽的type屬性新增屬性值:



          input中新增屬性:



          提示:本文圖片等素材來源于網(wǎng)絡,若有侵權(quán),請發(fā)郵件至郵箱:810665436@qq.com聯(lián)系筆者 刪除。

          筆者:苦海123

          其它問題可通過以下方式聯(lián)系本人咨詢:

          QQ:810665436

          微信:ConstancyMan


          主站蜘蛛池模板: 91在线视频一区| 国产日韩精品一区二区在线观看播放 | 中文字幕在线观看一区| 亚洲日韩激情无码一区| 国产天堂在线一区二区三区| 肉色超薄丝袜脚交一区二区| 国产精品亚洲高清一区二区| 国产成人精品视频一区| 久久久久人妻精品一区三寸| 亚洲熟妇av一区二区三区下载| 高清国产精品人妻一区二区| 一区二区三区四区在线视频| 视频一区二区在线播放| 国产一区中文字幕在线观看| 冲田杏梨AV一区二区三区| 亚洲av永久无码一区二区三区| 国产91精品一区二区麻豆网站 | 精品永久久福利一区二区| 岛国无码av不卡一区二区| 国产美女露脸口爆吞精一区二区| 精品一区二区三区3d动漫| 国产精品综合一区二区三区| 日本福利一区二区| 国产成人一区二区动漫精品| 内射白浆一区二区在线观看 | 精品国产一区二区三区AV性色| 国产一区二区三区在线| 一区二区三区电影在线观看| 一区二区三区免费电影| 国产成人精品一区二三区在线观看 | 精品国产一区AV天美传媒| 91视频一区二区三区| 日本精品无码一区二区三区久久久 | 无码毛片一区二区三区视频免费播放 | 日本高清天码一区在线播放| 日韩精品一区二区午夜成人版| 国产精品一区二区久久精品无码| 三上悠亚一区二区观看| 麻豆AV一区二区三区久久| 成人一区专区在线观看| 亚洲AⅤ无码一区二区三区在线 |