表单概念:
用于采集用户输入的数据,用于和服务器进行交互。
标签:
<form>:定义表单,定义一个采集用户数据的范围,包裹着哪里,哪里的数据被提交。
属性:
action:指定提交数据的URL
method:指定提交方式:
(1)get:1.请求参数会在地址栏中显示
2.请求参数长度有限制
3.不安全
(2)post:1.请求参数不会在地址栏中显示,会封装在请求体中。
2. 请求参数长度没有限制
3.较为安全
<input >:输入框
注意:如果i表单中的数据想要被提交,需要指定input的name属性。
表单项标签:
<input >:通过type的值,改变元素展示样式
type:
(1)text:文本输入框(默认值)
属性:
placeholder:指定输入框的提示信息,向输入框输入内容时,会自动清空提示信息。
(2)password:密码输入框
(3)radio:单选框
注意:
1.要想多个单选框实现单选,name属性的值必须一样。
2.一般会给每个单选框指定value值,指定其被选中后提交的值。
3.checked属性可以指定默认值。
(4)checkbox:复选框
1.一般会给每个单选框指定value值,指定其被选中后提交的值。
2.checked属性可以指定默认值。
<label>:指定输入项的文字描述信息
注意:label的for属性的值一般会和input的id属性的值相同,如果相同,点击label区域,会让input输入框获取焦点(光标)。
例如:
<form action="#" method="get">
<label for="username">用户名</label> <input name="userid" placeholder="请输入用户名" id="username">
</form>
当点击左侧的用户名时,输入框会自动获取光标。
(5)file:文件选择框
可选择电脑中文件
(6)hidden:隐藏域,可提交一些信息
按钮:
button 普通按钮
submit提交按钮
image图片提交按钮 属性src指定图片路径
其他
color 取色器
date显示日期
date time-local 显示日期和时间
email 自动做正则校验
number 输入数字
<select>:下拉列表
提交需要指定name属性的值
<select>
<option></option>(指定列表项)
<option></option>
<option></option>
</select >
<textarea >:文本域
提交需要指定name属性的值
属性:
rows:定义行数
cols:每一行有多少字符