color

• • 這是HTML5新增的；
  • 可以建立一個顏色的選擇輸入框
  • 瀏覽器版本比較低的話有可能不支援，不同的瀏覽器支援程度不同

 <input type=”color” >

<formaction="" method="" target="">
  顏色：<input type="color"value="red"><br>
  time：<input type="time"> <br>
  week：<input type="week"><br>
  month:<inputtype="month"><br>
  date:<inputtype="date"><br>
 datetime-local:<input type="datetime-local"  ><br>
 datetime:<input type="datetime">
  </form>
 

search

<input type=”search”name=”search” placeholder=”請輸入關鍵字”>

• • 這是HTML5新增的；
  • 用於建立一個搜尋框，用來供使用者輸入搜素的關鍵詞，和text區別是：search可以清空輸入內容
  • 瀏覽器版本比較低的話有可能不支援，不同的瀏覽器支援程度不同

file

<input type=”file”>

• • 用來建立一個檔案選取的輸入框
  • 可通過accept屬性規定選取檔案的型別，比如圖片/視訊

                        <input type=”file” accept=”image/png”>選擇png

• • multipe屬性可以設定一次允許選擇多個檔案

                          < input type=”file” accept=”image/gif” multiple=”multipe”>

checkbox/複選框

• • 用來建立一個複選框（可以多項選擇）

• • 通過checked屬性可講某個選項設為預設的選取狀態，再次單擊取消選取
  • 例子：<input type=”checkbox” name=”a” value=”aa” checked>

 <form action="" method="get">
  <h3>你想學習的計算機技術是：</h3>
  <input type="checkbox" name="a"value="aa">sql 2008
  <input type="checkbox" name="b"value="bb">html5
  <input type="checkbox" name="c"value="cc">java
  <input type="checkbox" name="d"value="dd">c++
  <input type="submit" value="提交你的答案">
 </form>
 

radio/單選框

• • 用來建立一個單選框（可以多項選擇）
  • 通過checked屬性可講某個選項設為預設的選取狀態，再次單擊取消選取
  • 必須將同一組單選項設定一個相同的name屬性值,否則就不能單選，所有都可以選擇，同一組name名字必須一樣才是才是單選。

  <h3>您是先生or女士？</h3>
  <formaction="" method="get" target="_blank">
   <inputtype="radio" name="a" value="a">女士
   <inputtype="radio" name="a" value="b">男士 
   <inputtype="radio" name="a" value="c">保密
  </form>

3.11 select與HTML5新增的datalist元素

select元素

• 用來建立一個下拉選單選項列表
• 不僅可以在表單中使用，還可以在其他塊元素和內聯元素中使用
• select只是定義一個下拉選單列表，其具體列表項要通過option元素建立
  • option元素可以用來建立一個選項，即下拉列表的一個選單項

例子 ：

<form action=""method="" target="_blank">
  <select>
   <option value=”html”  name="a">HTML</option>
   <option value=”html5” name="b">HTML5</option>
  </select>
 </form>

傳送到伺服器的是value裡面的內容。

• • optgroup元素用來對option元素進行組合分組

<form action=""method="" target="_blank">
  <select>
<optgroup>
      <option value=”html”  name="a">HTML</option>
      <option value=”html5” name="b">HTML5</option>
   </optgroup>
  </select>
</form>

• size用來定義列表中顯示的列表項
• multiple屬性用來定義是否可以多選

   <form action=""method="" target="_blank">
   <selectname="myselect" size="5"multiple>
   <optgroup>
    <optionvalue="a">HTML</option>
    <optionvalue="b">HTML5</option>
    <optionvalue="c">javascript</option>
    <optionvalue="d">java</option>
   </optgroup>
  </select>
   <input type="submit"value="ok"
  </form>

• 可以新增disabled屬性和autofocus屬性

<selectname="myselect" size="2" multiple autofocus disabled>

datalist元素

• HTML5新增元素，用來建立一個選項列表
• datalist元素的內容不會直接顯示在網頁上，只是會在使用者輸入時作為候選項
• 通常與input元素配合使用list值和datalist的id值繫結

<form action=""method="">
    <input type="text"name="aa" list="hh">
    <datalist id="hh">    
     <option value="html5">html5</option>
     <option value="java">java</option>
     <option value="c++">c++</option>
     <option value="c#">c#</option>
    </datalist>
   <inputtype="submit">
  </form>

//id值和list值要一樣才能把input元素和datalist元素繫結起來

  option 內的value值是顯示的值，所以value值和外面要一樣

3.13 表單的新增屬性

HTML5新增表單屬性

• 之前課程中已經接觸過的新增屬性：autocomplete屬性/autofocus屬性/list屬性/multiple屬性/placeholder屬性/required屬性/min/max/step屬性
  • form屬性:將表單外的內容與表單進行關聯

<form action=””method=”get” id=”a”>

  使用者名稱：<input type=”text” name=”user” placeholder=”請輸入使用者名稱” >

</form>

密碼：<input type=”password” name=”pw”form=”a” required>

<form>外的元素不會提交，要通過id和form 屬性繫結後，才會一起提交

• • novalidate屬性：設定資料提交時不進行驗證
  • enctype屬性：僅作了解規定在傳送到伺服器之前應該如何對錶單資料進行編碼。通常情況下我們使用預設值即可
  • accept-charset屬性：僅作了解accept-charset 屬性規定伺服器處理表單資料所接受的字符集。 accept-charset 屬性允許您指定一系列字符集，伺服器必須支援這些字符集，從而得以正確解釋表單中的資料。通常情況下我們使用預設值即可 此屬性的預設值是 "unknown"，表示表單的字符集與包含表單的文件的字符集相同。

3.14 label元素和label屬性

學習要點

• 掌握label元素的使用
• 掌握label屬性的使用

label元素

·  用來為 input 元素定義標註（標記）,建立一個與之相關聯的標籤

• for屬性，讓標籤與指定的input元素建立關聯

例子：點選字也能選中或取消這個選項

    <input type="checkbox"name="a" id="a">
       <label for="a">蘋果</label>
    <input type="checkbox" name="b" id="b">
       <label for="b">桃子</label>                  inform加id屬性，label加for屬性就能把兩個繫結起來了

• 將input元素包含在label標籤中，直接把input標籤放在<label></label>中

   <h3>你性別：</h3>
     <label><inputtype="radio" name="a" form="aa">男</label>
    <label><input type="radio" name="a"form="aa">女</label>
    <label><input type="radio" name="a"form="aa">保密</label>

• 可以通過accesskey建立快捷鍵

label屬性

·  在option元素中可以設定比標籤內容更優先的選項

· optgroup的分組名稱

<h3>你最喜歡吃的水果：</h3>
  <form action=""method="get">
   <select name="a">
    <optgroup label="水果">
     <optionvalue="ap">蘋果</option>
     <option value="aq">栗子</option>
     <optionvalue="aw">梨子</option>
   </optgroup>
   <optgroup label="魚類">
     <optionvalue="aa">草魚</option>
     <optionvalue="ad">水魚</option>
     <optionvalue="az">魷魚</option>
   </optgroup>
   </select>
  </form>