input typeradio input typeradio namesex valuemale input typeradio

  • Slides: 25
Download presentation

input標籤:單選按鈕 ütype="radio" ü例: <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 ü說明: 只能從多個radio中選擇一項 value

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

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標籤 ü 和<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">

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

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標籤、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"

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

Form練習 0 -15

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

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

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

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

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:

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

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> |

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

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:

參考網站 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