HTML5之HTML元素擴展(下)—增強的Form表單元素值得關注_HTML5教程
      
編輯Tag賺U幣
      


      教程Tag：表單Form添加
      


      

      推薦：html5 canvas里繪制橢圓并保持線條粗細均勻的技巧
      Canvas里繪制橢圓是一個很常見的需求，但是目前大多數瀏覽器還沒有實現該方法，因此經常會使用arc或者arcTo方法結合scale變形來繪制橢圓，感興趣的朋友可以了解下，希望可以幫助到你們
      

      在HTML5增強的元素中，最值得關注的就是表單元素。在HTML5中，表單已經做了重大的修整，一些以前需要通過JavaScript編碼實現的功能現在無需編碼就可輕松實現。在開始討論之前，需要注意一點：
      

      在HTML5中，表單控件是可以處于其所屬的一個或多個表單的外部的。所以，表單控件像fieldset，label，input這些都加入了form屬性，用于標識表單控件所屬的表單。
      

      在HTML5中：
      

      1. form元素自身增加了兩個新的屬性：autocomplete和novalidate。autocomplete屬性用于啟用“下拉建議列表”功能，novalidate屬性用于關閉表單驗證功能，這在測試時會很有用。
      

      2. fieldset元素增加了三個新屬性：disable、name和form。disable屬性用于禁用fieldset，name屬性用于設置fieldset的名稱，form屬性的值是fieldset所屬的一個或多個表單的ID，這個前面也說了，當fieldset被置于表單的外部時，你必須設置該fieldset標簽的form屬性，這樣fieldset就可以正確地與一個或多個表單關聯起來。
      

      3. label元素除for屬性外，只增加了form屬性。這里值得一提的是for屬性，我以前還真沒注意過。for屬性用于指定label附屬的表單控件，這樣點擊這個label時會讓附屬的表單控件獲得焦點，比如：

      復制代碼 代碼如下:www.wf0088.com

      <form action="demo_form.asp" id="form1">
        <label for="name">Click Me</label><input id="name" type="text"></input>
        <input type="submit" value="Submit" />
      </form> 

      點擊"Click Me"，則后面的輸入框會獲得焦點。
      

      4. input元素引入了一些新的類型與屬性，增強了表單的可用性。這些新的輸入類型，用于對數據進行組織和歸類，非常有用，遺憾的是并沒有哪一個瀏覽器能很好的支持所有的這些類型。
      除了原來button,text,submit,checkbox,radio,select,password的類型，HTML5加入了下列新的input類型：
      
顏色：color
      各種日期：date, datetime, datetime-local, month, week, time
      電子郵件：email
      數字：number
      范圍：range
      搜索：search
      電話：tel
      URL類型：url

      可以運行下面的例子來查看不同瀏覽器的支持情況：

      復制代碼 代碼如下:www.wf0088.com

      <form action="demo_form.asp">
        Select your favorite color: <input type="color" name="favcolor" />
        Birthday: <input type="date" name="bday" />
        Birthday (date and time): <input type="datetime" name="bdaytime" />
        Birthday (date and time): <input type="datetime-local" name="bdaytime" />
        Birthday (month and year): <input type="month" name="bdaymonth" />
        Select a time: <input type="time" name="usr_time" />
        Select a week: <input type="week" name="week_year" />
        Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
        Quantity(between 1 and 10): <input type="range" name="points" min="1" max="10" />
        Search Google: <input type="search" name="googlesearch" />
        Telephone: <input type="tel" name="usrtel" />
        Add your homepage: <input type="url" name="homepage" />
        E-mail: <input type="email" name="usremail" />
        <input src="submitbutton.png" type="submit" />
      </form> 

      下面這些是新增加的input屬性：
      autocomplete：自動顯示以前輸入過的信息，取值"on"或者"off"。適用于text, search, url, tel, email, password, datepickers, range, and color類型。
      

      autofocus：頁面加載完成后自動獲取到焦點。
      form：指定input所屬的form，可以是多個。
      formaction：指定form提交后處理這個input的頁面(URL)或文件。　　
      formenctype：指定form提交后數據如何編碼。
      formmethod：指定發送form數據的HTTP方法，會覆蓋相應form的HTTP方法。
      formnovalidate：提交前不檢查數據的有效性。
      formtarget：指定在那個地方顯示form提交后response的內容。
      height, width：輸入框長和寬，只適用于image類型。　
      max，min：輸入值的最大值和最小值。適用于有意義的number,range, 日期類型。　　
      multiple：是否允許輸入多個值，適用于email和file類型。
      pattern：指定驗證輸入值的正則表達式，適用于text,search,url,tel,email,password。
      placeholder：輸入前的提示信息，適用于text,search,url,tel,email,password。
      required：是否是必填項，如果不填必填項，則表單不能提交，適用于text, search, url, tel, email, password, date pickers, number, checkbox, radio, 和file類型。
      step：輸入自動增長時的步長值，適用于number, range, date, datetime, datetime-local, month, time和week類型。
      list：輸入項的候選列表，需要和datalist元素配合使用，list屬性可用在這些類型上：text、search、url、tel、email、date、number、range和color，目測在FireFox上有效。看一個小例子：

      復制代碼 代碼如下:www.wf0088.com

      <fieldset>
        <legend> Favorites </legend>
        <p>
          <label>
            <input type="text" name="favorites" list="options">
            <datalist id="options">
              <option value="A">
              <option value="B">
              <option value="C">
            </datalist>
          </label>
        </p>
      </fieldset> 

      下面的例子嘗試使用了各個屬性，可以運行在不同的瀏覽器下查看實際效果：

      復制代碼 代碼如下:www.wf0088.com

      <form action="demo_form.asp">
        E-mail: <input type="email" name="email" autocomplete="on" />
        Image: <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"/> 
        Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31">
        Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02">
        Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5" />
        Select images: <input type="file" name="img" multiple="multiple" />
        Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" />
        First Name: <input type="text" name="fname" placeholder="First name" /> 
        Username: <input type="text" name="usrname" required="required" /> 
        Number: <input type="number" name="points" step="3" />
       
        <input type="submit" />
        <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
        <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data" />
        <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST" />
        <input type="submit" formnovalidate="formnovalidate" value="Submit without validation" />
        <input type="submit" formtarget="_blank" value="Submit to a new window" />
      </form>
      <form action="demo_form.asp" id="form1">
        First name: <input type="text" name="fname" />
      <input type="submit" value="Submit" />
      </form>
        Last name: <input type="text" name="lname" form="form1" /> 

      建議：雖然并不是所有的瀏覽器都支持全部的類型，但是還是鼓勵大家使用這些新類型，因為即使瀏覽器不支持，只不過是會退化成簡單的text輸入框而已。
      

      實用參考：
      W3C的教程：http://www.w3schools.com/html5/default.asp
      HTML5官方指導：http://dev.w3.org/html5/html-author/
      相當不錯的一個指導網站：http://html5doctor.com/
      HTML5中文教程：http://www.html5china.com/
      一個不錯的前端博客：http://www.pjhome.net/default.asp?cateID=1
      JS操作表單的相關知識：http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html

      

            
      分享：基于Modernizr 讓網站進行優雅降級的分析
      如今一個網頁展現的內容是越來越豐富，其中不乏一些HTML5、CSS3的功能特效。那么如果客戶端的瀏覽器支持HTML5。頁面訪問效果很好沒有問題。如果不支持HTML5，還是IE6,7,8等瀏覽器的時候呢？這個時候往往是作為一個前段人員非常頭痛的事情了，兼容
      


      

      



      


      來源：未知//所屬分類：HTML5教程/更新時間：2013-04-22


      

      



      


      



      相關HTML5教程：