1. 程式人生 > >HTML表單表單標籤1

HTML表單表單標籤1

表單標籤

在我們日常接觸中只要在網站輸入賬號密碼就能登入自己的賬號,那麼使用者資料是怎麼和伺服器進行互動?答案就是使用HTML表單(form)把瀏覽者輸入的資料傳送到對應的伺服器端,然後伺服器端程式對錶單傳過來的資料進行處理。

定義一個表單的範圍: <form></form>

   屬性  action: 提交到的地址,預設提交到當前頁面

輸入項: 可以輸入或者選擇內容的部分  (一定要加上name屬性 不然無法傳值)

大部分輸入項使用  <input  type=”輸入項的型別”/>

普通輸入項: <input  type=”text”/>

密碼輸入項: <input  type=”password”/>

單選輸入項: <input  type=”radio”/>

name屬性相同的在一起單項選擇

複選輸入項: <input  type=”checkbox”/>

name屬性相同的在一起多項選擇

檔案輸入項(在後面上傳的時候用到)<input type=”file”/>

下來輸入項(不在input標籤裡面)

      <select name=”birth>

<option value=”1991”>1991</option>

<option value=”1992”>1992</option>

<option value=”1993”>1993</option>

      </select>

文字域

<textarea  cols=”10”   row”10”></textarea>

隱藏項(不會顯示在頁面上,但是存在於html程式碼裡面)

 <input type=”hidden”/>

提交按鈕

 <input type=”submit”/  value=”登入”>

例子

 
 <html>

 <form action="01.html">
 
    使用者名稱:<input name="uname" type="text" maxlength="16"></input>只能輸入字母或數字,4-16個字元<br/>
    密 碼 :<input name="upass" type="password" maxlength="12"></input>密碼長度6-12位<br/>
    確認密碼:<input name="upass2" type="password" maxlength="12"></input>
    性 別 :<input type="radio" name="sex" value="m" checked="checked">男</input><input type="radio" name="sex" value="w">女</input><br/>
    愛好:<input type="checkbox" name="love" value="Y"/>羽毛球
	     <input type="checkbox" name="love" value="W"/>網球
         <input type="checkbox" name="love" value="Z"/>足球<br/>
	電子郵件地址:<input name="email" type="text"></input>輸入正確的Email地址<br/>
    出生日期:
    <input name="year" type="text"></input>
    <select name="month" id="months">
	    <option value=”1”>1</option>
        <option value=”2”>2</option>
        <option value=”3”>3</option>
	</select>月
	<select name="day" id="days">
	  	<option value=”1”>1</option>
        <option value=”2”>2</option>
        <option value=”3”>3</option>
	</select>日<br/>
    自我描述:<textarea cols="10" rows="10" name="tex"></textarea><br/>
	隱藏項:<input type=”hidden” name="hid" /><br/>
    <input type="submit" value="同意以下協議條款並提交"></input><br/>

 </form>

  </html>

當點選提交後

 當前表單的位址列出現變化,由於表單屬性 action 指定跳轉地址為 01.html 

於是表單資料傳遞到了01.html  並且位址列顯示格式如下

file:///C:/Users/hp/Desktop/01.html?uname=12&upass=12&upass2=12&sex=m&love=Y&email=12&year=12&month=%A1%B11%A1%B1&day=%A1%B11%A1%B1&tex=1223&hid=123