JavaWeb04
表单
简介：
表单主要是让用户输入信息，用来收集用户信息，并且提交后台做处理
表单包含了一些表单域元素，包括文本框、密码框、单选按钮、复选按钮、下拉列表等等
例如:百度、邮箱登录、用户注册
表单标签
form表单：
与用户进行交互，收集用户信息，form表单最外层
|
属性 |
说明 |
|
action |
表单提交的服务器处理的URL地址 |
|
method |
表单提交到服务器的方法 主要用到get和post方法 |
GET和POST方法的区别
GET请求和POST请求都是属于HTTP的请求方法
HTTP底层是TCP/IP协议，所以GET和POST底层也是TCP/IP协议，都是TCP链接
TCP协议当成是一个运输的车辆，所有车辆都一样，没有办法区分送急件的车辆，此时，需要使用HTTP协议来实现交通规则
HTTP将车辆设定了不同的服务类部，有GET、POST、PUT、DELETE等待，HTTP要求当使用GET请求时，贴GET标签，并且把传输的数据放在车顶部(URL中)，以请求头方式传递，如果是POST请求，贴上POST标签，并且把传输的数据放在车辆里
区别1:URL可见性不同，GET请求的参数URL可见，而post请求的参数在URL中不可见，get请求通过url直接请求数据，数据信息可以在url地址中直接看到，post请求是将请求放在请求体中，用户无法直接看到
不同的浏览器和服务器就认为是不同的运输公司，数据量太大对于浏览器端和服务器端处理比较麻烦，会带来很大负担，大多数浏览器，通常对url会有一个长度的限制(一般在2k的字节)，大多数服务器会限制最多处理64k大小的url
区别2:get传送的数据比较小，有限制，通常是2kb，post传送的数据量比较大，一般被默认为是不受限制的
区别3:get请求因为参数和数据都是暴露在url地址中，所以安全性比较低，post请求中，安全性较高，对于敏感数据，可以使用post进行处理
区别4:get限制form表单数据集是ASC||字符，而post支持更多的字符集
区别5:get请求产生一个TCP数据包，而post请求产生两个TCP数据包
区别6:在应用上，通常使用get从服务器上获取数据查询，post通常是向服务器传送数据
总结:
1.get和post是都有自己的语义，不能随便混用
2.据研究，在网络环境比较好的情况下，发一次包和两次包用的时间，基本无视差别，而在网络较差时，两次包的TCP在验证数据包完整性上，有很大优势
3.并不是所有的浏览器在post时都会发送两次包，firefox版本就只发生一次
元素标签
input标签
|
type属性值 |
说明 |
|
text |
单行文本域 |
|
password |
密码框，以密文显示 |
|
radio |
单选按钮，一组单选按钮要有一个相同的名字 |
|
checkbox |
复选框 |
|
file |
文件选择，用来是西安上传的控件 |
|
submit |
提交按钮 |
|
reset |
重置按钮 |
|
hidden |
隐藏表单域 |
|
image |
用图片替代按钮 |
|
search |
产生一个搜索意义的文本框 |
|
|
电子邮箱，要求格式必须是邮箱格式 |
|
url |
url网址，要求格式必须是url地址格式 |
|
number |
数字类型 |
|
tel |
电话号码，在移动端打开会直接用数字键盘 |
|
range |
滑动条 |
|
date |
日期控件 |
|
time |
时间控件 |
|
datetime/datetime-local |
日期时间控件 |
|
month |
月份选择控件 |
|
week |
星期控件 |
后面的标签仅在html5中生效
imput属性
|
属性名 |
说明 |
|
name |
为控件取名，方便后台程序进行一个值的读取 |
|
id |
每个html控件，都可以有一个id |
|
value |
对于text、password、hidden等有文本输入的表单域对象，用来设置默认值，对于radio、checkbox等没有文本输入的表单域对象，用来给后台传递给定的值，对于reset、submit、botton按钮，用来定义按钮上的文字 |
|
checked |
用于设置单选或复选按钮初始值选中状态(radio、checkbox) |
|
size |
用于输入类型，设置显示的字符数，一般不使用，而是用css来调 |
|
maxlength |
设置输入类型长度最大值 |
|
min |
用于控制number类型的最小值 |
|
max |
用于控制number类型的最大值 |
|
step |
定义number类型的步长 |
|
placeholder |
为输入类型生成一个文字提示，当内容为空时出现 |
|
readonly |
设置输入类型为只读 |
|
disabled |
禁止用户取选择这个控件 |
|
required |
让用户必须填此字段 |
|
autocomplete |
是否使用自动填充功能，默认是使用，关闭需要将值设为off |
|
tabindex |
定义按tab键的顺序 |
|
autofocus |
定义光标自动聚焦到指定控件 |
|
novalidate |
取消表单校验功能 |
|
pattern |
正则验证 |
其他标签
label标签：
input元素有id，使用label标签的for属性，绑定对于的id，就可以实现点击label，就可以获取相应的控件点击
<div>
性别：
<input type="radio" name="gender" id="man">
<label for="man">男</label>
<input type="radio" name="gender" required id="woman">
<label for="woman">女</label>
</div>下拉列表
使用select标签，其中选项使用option标签
属性:
select标签属性：
multiple:设置可以多选
size:列表每次展示选项个数
option属性:
value:真正传入后台服务器的值
selected:被标识的选项是默认选择项
optgroup:用来将option进行分组，里面有个属性label是分组名称
<body>
<form>
<div>
所在城市
<select name="city" required multiple>
<option>--请选择--</option>
<optgroup label="江苏"></optgroup>
<option>南京市</option>
<option>苏州市</option>
<option>无锡市</option>
<optgroup label="陕西"></optgroup>
<option>西安市</option>
<optgroup label="江西"></optgroup>
<option>赣州市</option>
</select>
</div>
<div>
<input type="submit" value="提交">
</div>
</form>
</body>datalist标签
使用datalist，可以实现下拉选项，并能根据用户的输入，进行过滤选择，并且，如果在选择中没有用户需要的，用户可以自行输入
<body>
<form>
<input type="text" list="city">
<datalist id="city">
<option value="南京市"></option>
<option value="南昌市"></option>
<option value="无锡市"></option>
</datalist>
</form>
</body>文本区域标签
使用textarea，cols属性设置列，rows属性设置行，但是我们通常用css来控制宽度和高度
默认值写在中间
<body>
<form>
自我评价
<textarea style="width: 200px; height: 30px;">默认值</textarea>
</form>
</body>域容器标签：
将一组控件组织在一起，使用一个方框套起来，可以使用样式表进行整体设置
legend:域容器的标题
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
6
0- 0
已为社区贡献2条内容
所有评论(0)