Form表單的作用
HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時向服務器傳輸數(shù)據(jù),從而實現(xiàn)用戶與Web服務器的交互。故其作用為數(shù)據(jù)采集。
表單必須要用form標簽包圍
<form action="服務器地址" method="post or get">...</form>
單行輸入文本框
placeholder可在輸入框中顯示提示信息,一旦輸入數(shù)據(jù),提示信息便會自動消失。
<div class="username"> <label for="username">賬號</label> <input id="username" type="text" name="username" value="" placeholder="手機號/電子郵箱"> </div>
密碼輸入
type="password"使得輸入密碼時顯示為小圓點,有效保護信息安全。
<div class="password"> <label for="password">密碼</label> <input id="password" type="password" name="password" placeholder="請輸入密碼"> </div>
單選
注意,相同的name為一組選項。value值不能丟,否則后臺沒有信息。
<div class="sex"> <label>性別</label> <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 </div>
多選
注意,value值不能丟,否則后臺沒有信息。
<div class="hobby"> <label>愛好</label> <input type="checkbox" name="hobby" value="讀書">讀書 <input type="checkbox" name="hobby" value="跑步">跑步 <input type="checkbox" name="hobby" value="聽歌">聽歌 </div>
上傳附件
可用accept限制文件類型。
<div class="file"> <label>上傳頭像</label> <input type="file" name="myfile" accept="image/jpg"> </div>
下拉菜單
<div class="select"> <label>選擇城市</label> <select> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guagnzhou">廣州</option> </select> </div>
多行文本框
<div class="textarea"> <label>自我介紹</label> <textarea name="article"></textarea> </div>
PS:<rows="行數(shù)" cols="列數(shù)">
hidden隱藏域
傳遞數(shù)據(jù) 但不讓用戶看到
安全策略 防止偽造頁面 ,可以用hidden值做校驗 阻止csrf攻擊
<div class="hidden"> <input type="hidden" name="abcd" value="123456789"> </div>
按鈕
reset為重置表單數(shù)據(jù)
<div class="button"> <button>提交</button> <input type="reset" name="重置" value="重置"> </div>