HTML表單（一）
*********************表單和表單域******************************
一.什麼是表單
收集使用者資訊的一個容器,相當於點餐時的選單...
表單中包含表單域(文字框、密碼框、按鈕 都屬於表單域)
定義表單的語法:
<form>
表單域
</form>
常用的屬性
1. action
用來處理請求的頁面或程式(通常是JSP頁面或Servlet 相當於廚師)
點選提交按鈕以後,請求提交到handleForm.html頁面來處理
<form action="handleForm.html">
</form>
2. method
預設是get提交
<form action="handleForm.html" method="post">
</form>
提交方式
常見的提交方式有兩種
(1)get 請求
(2) post 請求
***********************get和post的區別**************************************
區別1: get 請求的引數會暴露在瀏覽器的位址列中,不安全.post請求的引數不會
顯示到位址列中,相對安全
handleForm.html?username=aaa&password=123
get 紙質選單
post 點餐機
區別2: get 請求引數的長度有限制的(通常和瀏覽器相關)
post 請求的引數 理論上 長度無限制
**********************************表單域**************************************
需求:實現使用者登入頁面
一.文字框
<input type="text" name="username" value=""/>
type 表示表單域的型別 預設值是text 表示文字框
name 給表單域起一個名字,伺服器通過這個名字 取對應的表單域中的內容
value 真正傳遞到伺服器上的值
二.密碼框
password
三.按鈕
1.提交按鈕 submit
點選提交按鈕以後 會提交請求
2.重置按鈕
reset
點選重置按鈕以後,會把表單域中的值 恢復到預設狀態
3. 圖片按鈕
image 功能類似於提交按鈕 點選圖片按鈕以後 也會提交表單
<input type="image" src="../img/login.gif"/>
4.普通按鈕
不能提交表單,繫結事件
<input type="button" value="普通按鈕" onclick="alert('我被點選了')"/>
不推薦直接在按鈕程式碼上 直接繫結事件,不符合W3C規範
演示程式碼:
<body>
<h2>使用者登入</h2>
<form action="handleForm.html" method="post">
使用者名稱<input type="text" name="username" value="請輸入使用者名稱"/><br/>
密碼<input type="password" name="password1" value="請輸入密碼"/><br/>
<input type="submit" value="登入"/>
<input type="reset" value="重置"/>
<input type="image" src="../img/login.gif"/>
<input type="button" value="普通按鈕" onclick="alert('我被點選了')"/>
</form>
</body>
********************************規範:內容、表現、行為三者分離*****************************************
內容、表現、行為三者分離,如果三者沒有分離 程式碼糅雜在一起,比較亂 不好維護
體現可維護、可讀性
(1)內容
html標籤和文字
(2)表現
CSS樣式
(3)行為
JavaScript程式碼控制的