實作互動：
背景
- 什麼是表單
- 表單如何工作，表單在浏覽器中如何工作（什麼是控件）
具體操作
- <form>文法,post和get差別（外觀上,本質上）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
神馬是表單？
實際上就是一個包含輸入域的Web頁面,允許你輸入資訊.送出表單時,資訊會被浏覽器打包發送到Web伺服器,由伺服器中的一個腳本來處理.
然後你會得到另外一個Web頁面作為響應.
表單如何工作?
- 通過浏覽器，我們通路了一個包含HTML表單的頁面,填寫表單并送出
- 浏覽器打包表單資料，發給Web伺服器
- Web伺服器收到表單資料，然後把資料傳給一個伺服器腳本進行處理
- 伺服器腳本處理完表單資料，然後建立一個全新的HTML頁面作為響應，再将這個頁面傳給Web伺服器
- Web伺服器把伺服器腳本的響應（就是那個html頁面）發回給浏覽器，浏覽器顯示html頁面
表單在浏覽器中工作?
- 首先浏覽器會加載頁面.對浏覽器而言,表單隻是頁面中的html,當浏覽器加載頁面的html，遇到表單元素時，它會在頁面上建立控件，允許你輸入各種各樣的資料。控件就是類似按鈕，文本輸入框，下拉菜單之類的工具。
- 你輸入資料.比如可以在文本控件中輸入文本,在複選框控件中單擊一個選項
- 你送出表單.單機送出按鈕控件，送出表單.浏覽器此時就會打包所有資料,并把這些資料發送給伺服器.
- 伺服器響應.伺服器得到表單資料後并把這些資料傳給相關的伺服器腳本處理,最後傳回給浏覽器一個全新的HTML頁面.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <form>文法
<formaction="F:/chapter14/contest/contest.php" method="POST"> (處理表單資料的php) method屬性确定表單資料如何發送到服務
First name:<input type="text"name="lastname" value=""><br> "text"在浏覽器頁面建立一個單行控件 每個<input>元素都需要自己名字,伺服器腳本将使用該元素名.
Last name:<input type="text"name="lastname"value=""><br>
</form>
- 各個表單元素<input>的name都是唯一的,浏覽器将資料打包發給伺服器時,伺服器腳本要求這些表單有相應的标簽,這樣才能厘清誰是誰.
- 浏覽器向伺服器發送資料有兩種方法:POST和GET
POST和GET差別 從外觀上 Post 會打包你的表單變量，在背景将它們發送到伺服器; Get 也會打包你的表單變量,但會把這些資料追加到URL最後,然後發給伺服器
本質上 Get:檢視目前時事的表單;
- 允許使用者對送出表單後的結果頁面加書簽
Post:輸入使用者名和密碼/訂購CD/送出書評/按身份證号查福利/發送客戶回報的表單;
- 多用于處理訂單的伺服器腳本，此時并不希望使用者能對頁面添加書簽，因為如果允許，每次傳回到這個書簽時，都會重新送出該訂單。
- 表單資料是私密的,涉及信用卡密碼神馬的，使用get别人可以通過url看到
- 如果使用了<textarea>，就應該使用post，因為可能會發送大量資料.Post的限制比較寬松.
-------------------------------------------------------下面的控件都是放在<form></form>中的----------------------------------------------------------------------------------------------------------------
輸入單行文本框
<input type="text" name="lastname" value="">
輸入多行文本框
<textarea name="comments"rows="10"cols="48">請輸入文本</textarea>
輸入密碼框
<input type="password" name="lastname" value="">
單選鈕
<input type="radio" name="color"value="red"checked>checked會被預設標明
<input type="radio" name="colot"value="green">
- 相關的選項共用一個名字,才能實作單選
- value是送出資料到伺服器的值（背景程式PHP使用）
- name為控件命名，以備背景程式 ASP、PHP 使用
複選框(多選框)
<input type="checkbox"name="spicevalue="salt"checked>
<input type="checkbox"name="spice"value="pepper">相關的複選框共用一個名字
<input type="checkbox"name="spice"value="garlic">
送出
<input type="submit"value="一鍵下單">
- 按鈕的預設标簽為submit,也可能是submit Query
重置
<input type="reset" value="重置">
文本區
<textarea name="comments"rows="10"cols="48">請在此輸入評論</textarea>這段文本會成為浏覽器文本區控件中的初始文本
- 注意這兩個屬性可用css樣式的width和height來代替：col用width、row用height來代替。
- input可以通過 maxlength='100"來限定字元數,但對于<textarea>,在html中沒有辦法限制使用者輸入多少文本.
select和option一起用來建立下拉菜單 <select name="characters">
<option value="Buckaroo"selected>這段文字則出現在菜單中欄中</option>
<option value="Tommy">Perfect Tommy</option>
<option value="Penny">Penny Priddy</option>
<option value="Jersey">New Jersey</option>
<option value="John">John Parker</option>
</select>
- <select>在Web頁面建立一個菜單控件,允許使用者從一組選項中選擇.
- selected預設自動選擇，區分下 input 中 用 checked, select 則用 selected
- <option>value是向伺服器送出的值元素
- 送出表單時,隻會把目前選擇的選項連同這個名字發給伺服器
- 在<select>中增加布爾屬性multiple="multiple",就可以把下拉式單選菜單變成多選菜單.這時按Ctrl可以實作多選.
-
html表單實作互動,控件,可通路性<label>
數字輸入 <input type="number" min="0" max="20"step="2">
- 使用max和min來限制允許輸入的數字.step是可選的用來指定值的間隔數（步長）
範圍輸入(滑動條)
<input type="range"min="0" max="20"step="5">
顔色輸入 <input type="color">
日期輸入 <input type="date" name="date">
email/tel/url/ 輸入 <input type="email/tel/url">
- 這三種都是<input> type的變形，浏覽器上看不出任何差别，但在移動浏覽器上它們會得到一個定制的鍵盤,可以更便捷地輸入需要的字元如/、@和數字.
- 不是所有浏覽器都支援這些輸入類型
增強可通路性，使用<label>
label标簽不會向使用者呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。如果你在 label 标簽内點選文本，就會觸發此控件。就是說，當使用者單擊選中該label标簽時，浏覽器就會自動将焦點轉到和标簽相關的表單控件上（就自動選中和該label标簽相關連的表單控件上）。
<label>可提供頁面結構的更多資訊,使你能更容易地使用CSS對标簽設定樣式,對于有視力障礙的人,也有助于他們使用的螢幕閱讀器更準确地辨別表單元素.
例子:
<input type="radio"name="hotornot"value="not">
<input type="radio" name="hotorno"value="green">
使用<label>前，先為表單元素增加一個id屬性
<input type="radio" name="hotornot" value="hot"id="hot"> <label for="hot">hot</label>
<input type="radio" name="hotornot" value="not"id="not"> <label for="not">not</label>
- 每個控件中 name 和 id 的值可以相同；id值必須和label for的值相同
- 每個控件的id值必須是唯一的
表單中的其他元素
視覺上分組
<fieldset>
<legend>thermoster: </legend>
<input type="radio" name="hotornot" value="hot" id="hot"> <label for="hot">hot</label>
<input type="radio" name="hotornot" value="not" id="not"> <label for="not">not</label>
</fieldset>
passwords
<input type="password" name="secret" >
- 表單資料不會采用一種安全的方式從浏覽器發送到伺服器腳本.提高安全性請聯系托管公司
<input type="file"name="doc">
placehoder
<input type="text"placeholder="在此處填姓名">
- 如果這個域仍保持空白,送出表單時占位内容不會作為控件值送出.
<input type="text" placeholder ="在此處填姓名"required>
- 如果這個域仍保持空白,表單不能送出.
m mi 密 1