Ch04 表單 網頁程式設計.

Presentation on theme: "Ch04 表單 網頁程式設計."— Presentation transcript:

1 Ch04 表單 網頁程式設計

2 大綱 表單<form> 標籤<label> <input> 單行文字方塊 type=text
2019/1/12

3 建立表單－<form>、<input>元素
表單的建立包含下列兩個部分： 使用 <form>提供輸入介面，將使用者輸入的資料，傳回伺服器，以做進一步的處理，例如將表單資料傳送到電子郵件地址、寫入檔案、寫入資料庫或進行查詢等。 <input> 元素撰寫表單的介面，例如單行文字方塊、選擇鈕、核取方塊等。 2019/1/12

4 <form>元素 屬性 action=“uri”: 指定表單處理程式的相對或絶對位址，例：
<form action=“handler.php”> <form accept=“…”: 指定MIME類型，做為web伺服器處理表單資料的根據，例： accept=“image/gif,image/jpeg” enctype=“”: 指定將表單資料傳回web伺服器所採用的編碼方式， 預設為”application/x-www-form-urlencoded” 上傳檔案為”multipart/form-data” 傳送到電子郵件為”text/plain” 2019/1/12

5 name=“…”: 表單的名稱，限英文且唯一，此名稱不會顯示出來，是做為後端處理之用
method=“{get,post}”: 指定表單資料傳送給處理程式的方式．get所能傳送的字元長度不得超過255，在傳送密碼欄位時，get不會將密碼加以編碼，post則會將密碼加以編碼．method的預設值為get． name=“…”: 表單的名稱，限英文且唯一，此名稱不會顯示出來，是做為後端處理之用 2019/1/12

6 標籤文字－<label> 元素
2019/1/12

7 單行文字方塊 type=“text” 「單行文字方塊」允許使用者輸入單行的文字敘述，例如：
<input type="text" name="stdname" size="20"> 名稱為stdname，寬度為20字元 2019/1/12

8 選擇鈕 type=“radio” 「選擇鈕」就像只允許單選的選擇題 群組名稱相同 選項的值，也可以是文字，但要唯一 年級：
<input type="radio" name="stdgrade" value="1" checked>一年級 <input type="radio" name="stdgrade" value="2">二年級 <input type="radio" name="stdgrade" value="3">三年級 <input type="radio" name="stdgrade" value="4">四年級 群組名稱相同 選項的值，也可以是文字，但要唯一 2019/1/12

9 核取方塊 type=checkbox 允許複選的選擇題 可以參加輔導時段：
<input type="checkbox" name="timetable[]" value="Mon" checked>星期一<input type="checkbox" name="timetable[]" value="Tue"> 星期二 <input type="checkbox" name="timetable[]" value="Wed">星期三 <input type="checkbox" name="timetable[]" value="Thu">星期四 <input type="checkbox" name="timetable[]" value="Fri">星期五 2019/1/12

10 下拉式功能表<select> 、<option>
multiple: 使用者可在下拉式功能表中選取多個項目 name=“…”: 下拉式功能表的名稱 readonly: 不允許使用者變更功能的項目 size=“n”: 功能表的高度 required: 使用者必須在下拉式功能表中選擇項目 selected: 指定預先選取的項目 value=“…”: 功能表項目的值 2019/1/12

11 下拉式功能表<select> 、<option>
允許使用者從下拉式清單中選擇項目(可單複選) 輔導老師希望是： <select name="wantedteacher" size="1"> <option value="wang">原授課老師 <option value="newteacher">業界老師 <option value="TA">助教 <option value="學長姐">學長姐 <option value="同學">同學 </select> 2019/1/12

12 多行文字方塊 <textarea>
允許使用者輸入多行的文字敘述 cols=“n”: 多行文字方塊的寬度（字元數） rows=“n”: 多行文字的高度（行數） required: 必須輸入資料 我還有話要說： <textarea name="talking" cols="40" rows="3"> 我沒有意見 </textarea> 2019/1/12

13 按鈕 表單中會有[提交](submit)和[重新輸入](reset)兩個按鈕 [提交](submit)：將使用者輸入的資料傳回伺服器
<input type="submit" value="傳送"> <input type="reset" value="重新輸入"> 2019/1/12

14 傳送結果 到 form的屬性為 <form entype="text/plain" method="post" name="form1"> 2019/1/12

15 傳送結果 到showanswer.php form的屬性要改為
<form action="showanswer.php" method="post" name="form1"> 2019/1/12

16 與google form 比一比 2019/1/12

17 表單欄位框起來－<fieldset>、<legend> 元素
<\Ch07\phone3.html> 2019/1/12

18 密碼欄位 2019/1/12

19 隱藏欄位 「隱藏欄位」是在表單中看不見，但值 (value) 仍會傳回Web 伺服器的表單欄位，例如： 2019/1/12

20 輸入數字、範圍、色彩 數字： <input type=“number” min=“0” max=“10” step=“2”> 範圍： <input type=“range” min=“-5” max=“5” step=“1”> 色彩： <input type=“color”> 2019/1/12

21 email 類型 若想要求使用者輸入電子郵件地址，可以將 <input> 元素的type 屬性指定為 "email"，
2019/1/12

22 url 類型 若想要求使用者輸入網址 (URL，Universal Resource Locator)，可以將 <input> 元素的type 屬性指定為 "url"， 2019/1/12

23 search 類型 若想要求使用者輸入搜尋字串，可以將 <input> 元素的type 屬性指定為 "search"，
2019/1/12

24 tel 類型 若想要求使用者輸入電話號碼，可以將 <input> 元素的type 屬性指定為 "tel" 2019/1/12

25 日期時間類型 (date、time、datetime、month、week、datetime-local)
2019/1/12

26 ™ month ™™ week ™™ datetime-local 2019/1/12

27 <output> 元素 <output> 元素用來顯示計算結果或處理結果 2019/1/12

28 <progress> 元素 用來顯示進度列 2019/1/12

29 <meter> 元素 用來顯示某個範圍內的比例或量標 2019/1/12

30 <keygen> 元素 可以根據RSA 演算法產生一對金鑰 2019/1/12

31 <optgroup> 元素 <optgroup> 元素可以替一群 <option> 元素加上共同的標籤
2019/1/12