html中的 form表单,提交数据到服务器
form表单
<form>表单标签,是用来收集数据的标签。
action属性:请求属性,确定提交到服务器的地址(路径)
method属性: 请求方式,常用的是get和post
get请求是将提交的数据追加到请求地址上,数据的格式是k/v格式
post请求是将提交的数据放到请求体中!
form表单的四大标签
input标签
input 标签用来获取用户信息,type属性值不同,就导致了收集方式不同
type属性如下:
text:文本输入框
password 密码输入框
radio 单选框,表示一组互斥选项按钮中的一个,当一个按钮被选中以后,之前的按钮就变成非选中的。
所有的radio按钮都要是相同的name,才算是一组。同时还需要value 例如value="man" 提交给服务器的值
submit 提交按钮,提交按钮会把数据发送到服务器,一般不要写name属性,否则将“提交” 这两个字提交到服务器
checkbox 复选框,需要name,如果是一组复选框的name是一样的,同时还需要value,因为这中选择框不像,文本框
可以把文本提交给服务器,但是这样选择框如果你不写value是没有任何东西提交给服务器的!
例如:value="shuijiao"
file 文件上传组件。
hidden 隐藏字段,数据会发送到服务器,但是浏览器不显示。例如:当我们修改密码的时候,浏览器会自动把某一个
用户的id发送过来,然后,根据id修改密码。
reset 重置按钮,将表单回复到默认的值
image 图形提交按钮,通过src给按钮设置图片,和submit功能一样,就是如果是图片提交,更加美观!
button 普通按钮,一般结合js一起使用
属性:
name:元素名,如果需要表单数据提交到服务器中,必须提供name属性值,在服务器中通过属性名
获取到提交的数据
value属性: 设置input标签的默认值。submit和reset为按钮显示按钮的名称
size 大小
checked属性 单选框或者复选框被选中,就是在单选框或者复选框中使用checked="checked"表示默认选择
哪一项
readonly 是否只读
disabled 是否可用
maxlength 容许输入的最大长度
select标签
select标签是和option标签一起使用的,select标签上的name属性是提交到服务器的name 例如:name="jiguan"
option标签上的value值就是代表这个option的值,也是提交到服务器的
textarea标签
textarea是一个文本输入标签,可以输入一大段语句
button 标签
了解
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。