HTML表单
HTML表单用于搜集不同类型的用户输入
表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素
//简单的两个div
<div class="username">
<input type="text" name="username">
</div>
<div class="password">
<input type="text" name="password">
</div>
//用form包裹
<form>
<div class="username">
<input type="text" name="username">
</div>
<div class="password">
<input type="text" name="password">
</div>
<div>
<button>提交</button>
</div>
</form>
<div>
<input type="text" name="sex"> //这个input里的内容不会被提交
<form action="/abc" method="get"> //提交到当前域名的abc的router下
<div class="username">
<input type="text" name="username">
</div>
<div class="password">
<input type="text" name="password">
</div>
<div>
<button>提交</button>
</div>
</form>
</div>
//username填写FEM password填写123
//地址栏 abc?username=FEM&password=123
//所以必须被form包裹
get请求会将数据( input中的name )组装成key-value的形式拼装成url
比如localhost://8080/abc?username1=FEM&password1=123456
简单,安全性要求低
post请求url不会发生变化
多用于传输数据
安全性要求高
form
form标签是表单的外壳,主要有四个属性
action: 表单提交的地址
method: 提交表单的方法
target: 在何处打开action
enctype:
application/x-www-form-urlencoded: 在发送前编码所有的字符(默认)
text/plain: 空格转换为"+"加号,但不对特殊字符编码
multipart/form-data: 使用包含文件上传控件的表单时,必须使用该值
常见标签:
<label></label>
<label for="username">姓名</label> //点击label选中输入框
<input id="username" type="text" name="username">
<input id="username" type="text" name="username" value="FEM"> //value为默认值
<input type="text"> //单行文本
<input type="password"> //密码
<input type="checkbox"> //多选
<input type="radio"> //单选
<input type="file"> //文件上传
<input type="hidden">
<input id="password" type="password" name="password" placeholder="输入密码"> //placeholder 占位
<input type="hidden" name="abcd" value="123456"> //暂存信息 安全策略
<input type="hidden" name="csrf" value="123456faaa">
<select name="city"> //原理同上
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou" selected>杭州</option> //selected 默认选择的初始值
</select>
<textarea name="article">
ddd
</textarea>
<input type="checkbox" name="hobby" value="read">读书
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="study">学习
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女 //name必须相同
<input type="radio" name="sex1" value="男">男
<input type="radio" name="sex1" value="女">女
<input type="file" name="myfile" accept="image/png">
<input type="button" value="Bottom">
<input type="submit" value="Submit">
<input type="reset" value="Reset"> //清空
题目1:form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
表单是一个包含表单元素的区域，表单元素是允许用户在表单中（比如：文本域、下拉表、单选框、复选框等）输入信息的元素
form标签的四个属性：
1.action：表单提交的地址
2.method：提交表单的方法
3.target：在何处打开action
4.enctype：application/x-www-form-urlencoded:在发送前编码所有字符
text/plain：空格转换为"+"加号，但不对特殊字符编码
multipart/form-data：使用包含文件上传控件的表单时，必须使用该值
题目2:post 和 get 方式的区别？
get和post是浏览器向后台传输数据的方式
get请求：将要提交的数据组装成key=value的形式，组装到url上
post请求：url不会变化 数据依然传输
get请求安全性较差而且因为url的长度问题，传输的数据有限
post安全性较高，url不会有变化
get更多用于向后台要数据
post用于向后台传递数据
题目3:在input里，name 有什么作用？
<input type="text>
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="submit">
<input type="button">
<input type="reset">
<input type="number">
<input type="hidden">等等
input中name的作用：
name属性规定了input元素的名称，只有设置了name属性的表单元素才能在提交表单时传递它们的值
题目4:radio 如何 分组?
把name属性设置为相同即为同一组
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
题目5:placeholder 属性有什么作用?
不影响value，在文本框中显示提示信息，当输入信息后，placeholder会消失。
在其他编程语言中也有类似的属性，也叫占位符
题目6:type=hidden隐藏域有什么作用? 举例说明
暂存信息（埋入到value中，用户无法看到），安全策略（csrf攻击）
起到一个校验的作用
题目7:写一篇博客简单介绍 HTML 表单的用法，附上博客链接
略
题目8:实现如下表单,附上预览地址。其中性别和取向是单选，爱好是多选
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<form>
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" placeholder="用户名">
</div>
<div class="password">
<label>密码</label>
<input type="password" name="password" placeholder="请输入密码">
</div>
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
</div>
<div class="quxiang">
<label>取向</label>
<input type="radio" name="quxiang" value="man">男
<input type="radio" name="quxiang" value="woman">女
</div>
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value="1">dota
<input type="checkbox" name="hobby" value="2">旅游
<input type="checkbox" name="hobby" value="3">宠物
</div>
<div class="comment">
评论：<textarea name="comment" rows="10" cols="28" placeholder="">ddd
</textarea>
</div>
<div class="select">
<label>我的car：</label>
<select name="car">
<option value="saber" selected>萨博</option>
<option value="benz">奔驰</option>
<option value="honda">本田</option>
</select>
<input type="submit">
</div>
</form>
</head>
<body>
</body>
网友评论