表單語法

<form  method="post"（規定如何傳送表單資料      常用值：get|post）
 action="result.html">（表示向何處傳送表單資料）
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密碼：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>
 

經驗：在實際網頁開發中通常採用post方式提交表單資料

表單元素格式

語法：

<input  type="text"（input元素型別）name="fname"（input元素名稱） 
value="text"（input元素的值）/>

表單元素

文字框-語法

<input  type="text"(文字框)  name="userName"(文字框名稱) value="使用者名稱"(文字框初始值) size="30"(文字框長度) maxlength="20"(文字框可輸入最多字元) />
 

密碼框-語法

<input  type="password "(密碼框)  name="pass"(密碼框的名稱)  size="20"(密碼框的長度) />

單選按鈕-語法

<input name="gen" type="radio"(單選按鈕框) value="男"(值)  checked(單選按鈕選中狀態)  />男
<input name="gen" type="radio" value="女" />女

複選框-語法

<input type="checkbox"(複選框) name="interest" value="sports"(值)/>運動
<input type="checkbox" name="interest" value="talk" checked(複選框選中狀態) />聊天
<input type="checkbox" name="interest" value="play"/>玩遊戲

列表框-語法

<select(列表框) name="列表名稱" size="行數">
<option value="選項的值" selected="selected"(預設選中項)>…</option >
<option(選項) value="選項的值">…</option >
</select>

按鈕-語法

<input type="reset" (重置按鈕) name="butReset"  value="reset按鈕"(按鈕上顯示的文字)>
<input type="submit"(提交按鈕) name="butSubmit" value="submit按鈕">
<input type="button"(普通按鈕) name="butButton" value="button按鈕"/>


圖片按鈕

<input type="image" src="images/login.gif"/(圖片路徑)>

多行文字域-語法

<textarea(多行文字域)  name="showText"  cols="x"(顯示的列數)  rows="y"(顯示的行數)>文字內容 </textarea  >

檔案域-語法

<form action="" method="post" enctype="multipart/form-data"（表單編碼屬性）>
  <p><input type="file"(檔案域) name="files" />
  <input type="submit" name="upload" value="上傳" /></p>
</form>

郵箱-語法

<p>郵箱:<input type="email"（郵箱）  name="email"/></p>
<input type="submit"/>

注意：會自動驗證Email地址格式是否正確

網址-語法

<p>請輸入你的網址:<input type="url"（網址）  name="userUrl"/></p>
<input type="submit"/>

注意：會自動驗證URL地址格式是否正確

數字-語法

<p>請輸入數字:<input type="number"(數字)  name="num" min="0"(允許的最小值) max="100"(允許的最大值) step(合法的數字間隔)="10"/></p>
<input type="submit"/>

滑塊-語法

<p>請輸入數字:<input type="range"(滑塊)  name="range1" min="0"(允許的最小值) max="10"(允許的最大值) step(合法的數字間隔)="2"/></p>
<input type="submit"/>

搜尋框-語法

<p>請輸入搜尋的關鍵詞:<input type="search"(搜尋框)  name="sousuo"/></p>
<input type="submit"/>

表單的高階應用

隱藏域-語法

<input type="hidden"(隱藏域) value="666" name="userid">

只讀和禁用-語法

<input name="name" type="text" value="張三"  readonly(只讀文字框)>
<input type="submit "  disabled （禁用）  value="儲存" >

表單元素的標註

1.增強滑鼠的可用性

2.自動將焦點轉移到與該標註相關的表單元素上

語法

<label for="id"(表單元素的id)>標註的文字</label>
<input type="radio" name="gender" id="male"/(表單元素id)>

表單的初級驗證

表單驗證的好處

        1.減輕伺服器的壓力

        2.保證資料的可行性和安全性

表單初級驗證的方法

       1.placeholder                   2.required                       3.pattern

placeholder

           1.input型別的文字框提供一種提示（hint）

           2.可以描述文字框期待使用者輸入何種內容

           3.提示語預設顯示，當文字框中輸入內容時提示語消失

           4.適合於input標籤：text、search、url、email和password等型別

語法：

<input type="search" name="sousuo"  placeholder(文字框輸入內容提示)="請輸入要搜尋的關鍵字"/>

required

           1.規定文字框填寫內容不能為空，否則不允許使用者提交表單

           2.適合於input標籤：text、search、url、email、password、number、checkbox、radio、file等型別

語法：

<input type="text" name="username"  required/(必填項)>

pattern

使用者輸入的內容必須符合正則表示式所指的規則，否則就不能提交表單

語法：

<input type="text" name="tel"  required pattern（驗證規則，正則表示式）="^1[358]\d{9}" />