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