1. 程式人生 > >html表單實現互動,控制元件,可訪問性

html表單實現互動,控制元件,可訪問性

實現互動:

背景

  1. 什麼是表單
  2. 表單如何工作,表單在瀏覽器中如何工作(什麼是控制元件)
具體操作
  1. <form>語法,post和get區別(外觀上,本質上)

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

神馬是表單?

實際上就是一個包含輸入域的Web頁面,允許你輸入資訊.提交表單時,資訊會被瀏覽器打包傳送到Web伺服器,由伺服器中的一個指令碼來處理.

然後你會得到另外一個Web頁面作為響應.

表單如何工作?

  1. 通過瀏覽器,我們訪問了一個包含HTML表單的頁面,填寫表單並提交
  2. 瀏覽器打包表單資料,發給Web伺服器
  3. Web伺服器收到表單資料,然後把資料傳給一個伺服器指令碼進行處理
  4. 伺服器指令碼處理完表單資料,然後建立一個全新的HTML頁面作為響應,再將這個頁面傳給Web伺服器
  5. Web伺服器把伺服器指令碼的響應(就是那個html頁面)發回給瀏覽器,瀏覽器顯示html頁面
表單在瀏覽器中工作?
  1. 首先瀏覽器會載入頁面.對瀏覽器而言,表單只是頁面中的html,當瀏覽器載入頁面的html,遇到表單元素時,它會在頁面上建立控制元件,允許你輸入各種各樣的資料。控制元件
    就是類似按鈕,文字輸入框,下拉選單之類的工具。
  2. 你輸入資料.比如可以在文字控制元件中輸入文字,在複選框控制元件中單擊一個選項
  3. 你提交表單.單機提交按鈕控制元件,提交表單.瀏覽器此時就會打包所有資料,並把這些資料傳送給伺服器.
  4. 伺服器響應.伺服器得到表單資料後並把這些資料傳給相關的伺服器指令碼處理,最後返回給瀏覽器一個全新的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="textname="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可以實現多選.
  •  
數字輸入 <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