初學者→HTML-表單的學習
表單域:相當一個容器,用來容納所有的表單控制元件和提示資訊
在HTML中<form>常用標記用於定義表單域,只有在<form>才能實現使用者的資訊收集和專遞,從而<form>內的全部內容交給了伺服器
1.表單作用:提交資料
表格:存放資料
常用屬性:
name 表單名稱
action 提交的地址
method 提交的方法
get 預設值
post
get和post的區別
(1)get提交資料不安全,資訊會在地址中顯示,post相對安全
(2)get提交的的資料有限制,最大為2k,post理論上沒有限制,合適大量資料
2。input控制元件
a。輸入框:
type型別:<input typr=屬性值"">
(1)text:收集少量的文字資料,使用者可見的
(2)password:收集使用者密碼資料
(3)redio:單選框
(4)button:普通按鈕
(5)submit;提交按鈕
(6)checkbox:複選框
(7)type裡面常用的屬性:
name 輸入框的名稱
value 當前值
placeholder:是html5新增的屬性,主要讓表單更加智慧,
placeholder:好處是當我們聚焦輸入文字的時候我們在placeholder="預設值"的文字就會自動清空
相應的程式碼展現如下:
<html> <head> <title>表單學習</title> <meta charset="utf-8"/> </head> <body> <form action="" name="myfor" method="post"> 使用者: <input type="text" name="username" value="" placeholder="使用者名稱不能為空"/> <br /><br /> 密碼: <input type="password" name="password" id="password" value="" placeholder="請輸入正確的密碼"/> <br /><br /> <hr /> <!--單選框--> 性別: <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 <br /><br /> <hr /> <!--多選框--> 愛好: <input type="checkbox"/>跑步 <input type="checkbox"/>旅行 <input type="checkbox"/>健身 <input type="checkbox"/>睡覺 <input type="checkbox"/>看書 <input type="checkbox"/>逛街 <br /><br /> <hr /> <!--表單最後基於submit才能提交--> <input type="submit" name="" id="" value="登陸" /> <input type="reset" name="" id="" value="取消" /><br /> </form> </body> </html>
執行結果;