form表單的作用
收集用戶提交的數據并提交到后臺
常用的input標簽及作用
1.type="text",用于輸入普通文本
2.type="password",用于輸入密碼
3.type="checkbox",復選框
4.type="radio",單選按鈕
5.type="textarea",可用于輸入多行文本
6.type="file",用于傳送文件
7.type="hidden",可以用于暫存數據和安全性校驗
8."button","submit","reset",依次為自定義功能按鈕,提交按鈕和重置按鈕
post和get的區別
1.提交數據時post不會改變當前url,不會暴露提交的數據,而get會在url中顯示提交的數據
2.post提交數據容量遠大于get
3.get傳輸的數據在瀏覽器記錄中可被發現
input中name的作用
可以標識每一段被提交的數據
radio如何分組
采用相同的name屬性
placeholder的作用
占位,提示用戶輸入,不會影響用戶輸入也不會影響數據提交
type="hidden"的作用
提交一些不需要或者不想被用戶看到的參數,或者存放臨時值
也可以用于防御CSRF攻擊,例如在表單中添加特定數值,在服務器中進行認證,可以避免絕大多數的CSRF攻擊
html表單的簡單用法
HTML表單是一個包含表單元素的區域, 表單使用<form> 標簽創建。表單能夠包含 <a target="_blank" title="HTML input 元素,比如文本字段、復選框、單選框、提交按鈕等等。
1.表單的屬性
action:規定當提交表單時,向何處發送表單數據
method:該屬性定義瀏覽器將表單中的數據提交給服務器處理程序的方式。關于method的取值,最常用的是get和post
target:該屬性規定在何處顯示action屬性中指定的URL所返回的結果
enctype:規定在發送到服務器之前應該如何對表單數據進行編碼
2.表單中包含的元素
除了之前提到的各種input標簽外還包括復選框select及永福劃分區域的fieldset等
3.使用演示(課程任務中的第8項)
<form>
<div class="username">
<label for="username">姓名</label>
<input type="text" name="username">
</div>
<div class="password">
<label for="password">密碼</label>
<input type="password" name="password">
</div>
<div class="sex">
<label>性別</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</div>
<div class="sex orientation">
<label>取向</label>
<input type="radio" name="orientation" value="male">男
<input type="radio" name="orientation" value="female">女
</div>
<div class="hobby">
<label>愛好</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="pets">寵物
</div>
<div class="discuss">
<textarea placeholder="ddd"></textarea>
</div>
<div class="car">
<label>我的car</label>
<select name="cars">
<option value="wanjuche">玩具車</option>
<option value="yaokongche" selected>遙控車</option>
</select>
</div>
<input type="submit">
</form>