1)表单标签
(1)概念: 用于采集用户输入的数据的,然后和服务器进行交互:
如: 输入用户名和密码;
(2)使用的标签: <form>
form用于定义表单的,可以定义一个范围,范围代表采集用户数据的范围.
form表单并没有任何的样式,只是定义了一个范围.
比如: 我期望填写的用户名和密码都可以提交,那么就需要用form包裹起来.
用户名: <input>
密码: <input>
(3)属性
action: 指定提交数据的URL(位置)
#表示提交到当前页面:
要提交的位置将会是一个服务器的资源,目前我们没有学习,暂时#代替下.
method: 指定提交方式. 有7种分类,2种最常用:
get:
post:
(4)type分类:
text: 表达文本输入框
submit: 按钮
(5)get和post的区别:
get: 1.请求参数会在地址栏中显示. 会封装到请求行中显示.
2.请求参数的长度有限制.
3.get请求不太安全(会让别人看到,会让别人看到你的用户名密码)
post: 1.请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议后讲解)
2.请求参数的长度没有限制.
3.较为安全(不打开F12,别人就看不到).
F12--> Header-->Form Data 隐藏在了协议里面.
注意: 表单项中的数据要想被提交,必须指定其name属性:
这样你的数据将会被拼接到地址后面--》这说明表单的数据被提交了.
2)表单项标签:
<input>: 可以通过type属性的值,来改变元素展示的样式,如按钮,文本输入等功能的指定(可取得值非常的多).
type属性:
text: 文本输入框. 默认值.
value="请输入用户名"
placeholder: 指定输入框的提示信息,当内容发生变化,会清空提示信息. 一旦输入就不见了.
password: 密码输入框. ***这样密码显示,更安全些.
radio: 单选框
name属性值一样,那么就是一组单选框,才能实现单选.
value: 用于区分的到底是男女 male female. 不然就提交的是on.
check: checked:默认选中 或者直接写: checked
checkbox: 复选框
name
value
file: 文件选择框
学了服务器后,才能上传文件对应的数据.
hidden: 隐藏域 看不到,但是可以提交
submit: 能提交的按钮
button: 只是一个普通的按钮,需要和js结合实现一些效果
image: 图片按钮 使用src指定路径, 也可以提交表单
简单格式的一些控制:
color: 取色器
date: 年月日
datetime-local: 年月日 + 时间
email: 邮箱 带正则校验
number: 只能输入数字。 带的有上下箭头,让你加减.
注意: label：指定输入项的文字描述信息
label的for属性一般会和input的id属性值对应,点击后,会有焦点.
<select>: 下拉列表,如:省市...
url编码,
不支持中文
option: 列表的项
selected: 默认选中
<textarea>: 文本域. 非常宽,如: 你写简历,可以写入很多段话.
3)注册案例
table
9行
2列
验证码: 程序动态生成验证码
xx)CSS
HTML: 完整页面内容展示
CSS: 页面样式的控制,美化页面,让页面变得好看,完成页面布局的操作
