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>