html--form表單常用操作
form表單
用於收集使用者資訊,如:登入、註冊等場景;所有要提交的資料都必須放在form標籤中<form action=" " method=" ">
action:提交地址、動作,與input標籤中typy標籤的submit屬性相關聯。 <input type="submit" value="提交" />,提交地址是action的地址
method:提交方法,有get和post兩種提交方法。
get方法:提交資料可以再URL中看見,
例如:(1)以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail傳遞引數
(2)URL長度有限制,所以傳遞的引數資料就有限制
(3)由於資料可以看見,所以不安全
(4)網頁預設的請求是get
post方法:
1. 將form data 儲存在http的請求體
2. 沒有長度限制
3. 安全的
4. 往往在開發中用於提交資料form表單提交post
5. 檔案上傳 method = post enctype=multipart/form-data
input標籤:輸入框,是表單中最重要的部分
name:指定名字,因為提交的是鍵值對,所以必須要指定名字,否則無法提交,即使提交了也沒有意義
value:文字框的內容,一般用在不能輸入的型別中,如改變按鈕的名字等。
placeholder:佔位內容,通常用於提示:
<input type="text" name="emailId" placeholder="輸入賬號" />
readonly:只讀模式,設定後無法修改輸入框的內容
disabled:禁用狀態
<input type="text" name="emailId" placeholder="輸入賬號" disabled="disabled"/>
size:由於輸入框是單行的,所以只能設定寬度
maxlength:限制輸入框最大輸入的字元個數
type屬性:
text:普通文字,標籤的預設屬性時text ,通常如輸入使用者名稱用的是text
passworld:密文文字,輸入的內容不顯示。如密碼輸入框
submit:提交按鈕。上文提到過,要與action一起用。
radio:單選框,多個關聯選項name屬性要一致,需要設定value,預設選中用checked設定
<labke for=""></lable>:用於關聯單選按鈕與文字。
性別:<input type="radio" name="sex" value="0" id="nan"/><label for="nan">男</label> <input type="radio" name="sex" value="1" id="nv"/><label for="nv">女</label><br/>
CheckBox:複選框,屬性與單選框類似
愛好:<input type="checkbox" name="like" value="sport" id="1"/><label for="1">運動</label> <input type="checkbox" name="like" value="music"id="2"/><label for="2">音樂</label> <input type="checkbox" name="like" value="song" id="4"/><label for="4">唱歌</label> <input type="checkbox" name="like" value="games" id="5"/><label for="5">遊戲</label><br/>
file:檔案上傳,需要進行配套設定。提交方法需要用post
hidden:隱藏欄位,該欄位根普通欄位一樣,但是不會在頁面上顯示
<input type="hidden" name="csrf_hidden" value="hdsuifhudsifhsdoi">
除了輸入框外常用的還有下拉選擇框和文字域
select:下拉選擇框
size:可以設定高度(選項個數)
每個選項都是一個option,必須指定value,預設選中使用屬性selected
籍貫:<select name="from"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">廣州</option> <option value="sz">深圳</option> </select><br/>
textarea:文字域。
屬性:
cols:列數(寬度)
rows:行數(高度)
注意:不要在標籤書寫任何多餘的內容
簡介:<textarea name="intro" cols="20" rows="5"></textarea><br/> <input type="submit" value="註冊"><br/>
例子:
為了對齊方便使用table表格標籤來輔助對齊。
<html> <head> <meta charset="utf-8"> <title></title> </head> <body background="timg.jpg"> <h1>還沒有賬號?趕緊註冊一個吧!</h1> <form> <table width="500px" heigth="300px" border="0" bordercolor="red" align="center"cellspacing="0" cellpadding="0"> <tr> <td align="right" padding="0">電子郵箱:</td> <td align="left" padding><input type="text" name="emil" placeholder="請輸入:"/><br/></td> </tr> <tr> <td></td> <td>您可以使用<a href="#">郵箱</a>或者<a href="#">手機號</a>註冊 <br/></td> </tr> <tr> <td align="right">建立密碼:</td> <td><input type="password" name="pwd"></td> </tr> <tr> <td align="right">真實姓名:</td> <td><input type="text" name="name" placeholder="請輸入:"/></td> </tr> <tr> <td align="right">性別:</td> <td><input type="radio" name="sex" value="0" id="nan"/><label for="nan">男</label> <input type="radio" name="sex" value="1" id="nv"/><label for="nv">女</label></td> </tr> <tr> <td align="right">生日:</td> <td><input type="date" name="date"/><br/></td> </tr> <tr> <td align="right">我現在:</td> <td><input type="radio" name="work" value="school"/>正在上學 <input type="radio" name="work" value="worker"/>已經工作 <input type="radio" name="work" value="other"/>其他</td> </tr> <tr> <td align="right"> 現居地:</td> <td><input type="text" name="address" placeholder="請輸入:"/></td> </tr> <tr> <td></td> <td><input type="checkbox" name="name" value="agree"/>同意<a href="#">服務條款</a></td> </tr> <tr> <td></td> <td><input type="submit" value="立即註冊"/></td> </tr> </table> </form>