input typeradio input typeradio namesex valuemale input typeradio

input標籤：單選按鈕 ütype="radio" ü例： <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 ü說明： 只能從多個radio中選擇一項 value : 設定傳回值 可加checked屬性, 令其預設為已被勾選的項目 4

input標籤：多選按鈕 ütype="checkbox" ü例： <input type="checkbox" name="ablility" value="1">聽 <input type="checkbox" name="ablility" value="2">寫 ü說明： 可以從多個checkbox中選擇多項 value : 設定傳回值 可加checked屬性, 令其預設為已被勾選的項目 5

Button標籤 ü 和<input type="button">不一樣的地方在於可以放入 圖文等 ü 加上type屬性：其值有button、submit、reset <button type="submit"> 確認下單<img src="shopping-cart_32 x 32. png"> </button> 9

select標籤：下拉式選單 ü 將可供挑選的項目放在<select>…</select>中 ü 可供挑選的項目，使用<option＞標籤： n n selected屬性：設定此選項預設為被選取的項目 value屬性：設定當表單被送出時此欄位的內含值 ü 例： <select name= "skill"> <option value="p 0001">VB. NET</option> <option value="db 001" selected >SQL Server </option> <option value="p 0003">JAVA </option> <option value="p 0002">Delphi </option> </select> 11

select標籤：列表清單 ü select標籤中 n n size屬性：設定列表清單的面版大小 multiple屬性：設定可以多選 ü 例： <select name= "skill" size="3" multiple > <option value="p 0001">VB. NET</option> <option value="db 001" selected >SQL Server </option> <option value="p 0003">JAVA </option> <option value="p 0002">Delphi </option> </select> 12

fieldset標籤、legend標籤 üfieldset：將相關資料框起來，以增加資 訊的閱讀性 ü例： <fieldset> <legend>性別</legend> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 </fieldset> 13

Label標籤 ü方便操作者點按頁面上的輸入欄位 <label for="male"> <input type="radio" name="sex" id="male" value="male">male </label> <label for="female"> <input type="radio" name="sex" id="female" value="female">Female </label> 範例一 範例二 14

Form練習 0 -15

input標籤新增的type值 color date、datetime email month number range search tel time url week 17

input標籤新增的type值(範例) Select your favorite color: <input type="color" name="favcolor"> Birthday (date): <input type="date" name="bday"> Birthday (date and time): <input type="datetime" name="bdaytime"> Birthday (date and time-local): <input type="datetime-local" name="bdaytime"> Birthday (month and year): <input type="month" name="bdaymonth"> E-mail: <input type="email" name="email"> Quantity (between 1 and 15): <input type="number" name="quantity" min="1" max="15" step="2" value="3"> 1<input type="range" name="points" min="1" max="15" value="3">15 Search Google: <input type="search" name="googlesearch"> Telephone: <input type="tel" name="usrtel"> Select a time: <input type="time" name="usr_time"> Add your homepage: <input type="url" name="homepage"> Select a week: <input type="week" name="week_year"> 課程名稱<input list="course" name="course. Name"> <datalist id="course"> <option value="HTML"> <option value="Java. Script"> <option value="php"> 18 </datalist>

datalist標籤 讓文字盒使用預先定義好的值 有興趣的課程 <input type="text" name="course" list="course. List"> <datalist id="course. List"> <option value="HTML">網頁基礎</option> <option value="CSS">美化網頁</option> <option value="Java. Script">互動機制</option> </datalist> 範例 19

Html 5新增了Semantic/structural Element article div section header footer nav meter progress More… 20

meter標籤 用來顯示測量值, 如: <meter value="2" min="0"max="10">2</meter> <meter value="0. 6">60%</meter> 說明 n n n min: 最小值 max: 最大值 low: 低值區 high: 高值區 value: 目前的值 21

progress 進度條 例: <progress value="22" max="100"> </progress> 22

nav標籤 設定導覽列, 如: <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">Java. Script</a> | <a href="/jquery/">j. Query</a> </nav> 23

meta標籤 Meta標籤主要用來提供訊息給瀏覽器、 搜尋引擎等。一律放在head段落 設定網頁的編碼方式 Html 4：<meta http-equiv="content-type" content="text/html; charset=UTF-8"> Html 5：<meta charset="UTF-8"> 設定網頁的關鍵字 <meta name="keywords" content="HTML, CSS, XML, XHTML, Java. Script"> 設定網頁的相關描述 <meta name="description" content="深入淺出網頁設計"> 24

參考網站 https: //www. w 3. org/TR/html 5/semantics. html#thehtml-element https: //html. spec. whatwg. org/multipage/#tocsemantics https: //www. w 3. org/TR/html 5/semantics. html#thehtml-element http: //www. w 3 schools. com/ http: //caniuse. com/ 0 -25