表单标签
什么是表单:专门用来收集用户信息的
注:在表单标签中,除了按钮标签以外的标签都可以通过value来制定需要提交到服务器的数据
表单格式:
<form>
<表单元素>
</form>
表单元素:
input标签:input标签有一个type属性,这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观
(给input标签绑定默认项:value、要想让单选框默认选中某一项,可以给input标签添加一个checked属性)
action高速变单提交到哪个服务器(form action="")
input标签的取值:
1.text:文本输入框
2.password:暗纹输入框(密码域)
3.radio:单选框
注:(默认情况下单选框不会互斥)互斥要给每一个radio添加name属性,name属性必须为相同的值
4.checkbox:多选框
5.button:普通按钮(配合js完成一些操作)
6.image:图片按钮
7.submit:提交按钮(作用:将表单中的数据提交到远程服务器)
注意点:要想将表单中的数据提交到远程服务器 必须满足两个条件 1 告诉表单提交到哪个服务器 2告诉表单那个数据需要提交(给标签添加一个name属性,添加了name属性就是需要提交的数据)
8.reset:重置按钮(作用:清空表单中的数据)可以通过value属性修改默认标题
9.hidden:隐藏域(偷偷地收集用户的数据,不会在网页中展示出来)
label标签:
默认情况下文本和输入框时没有关联关系的,也就是点击文字输入框不会聚焦,如果想要聚焦那就要让文字和输入框进行绑定
关联方式:1.将文字用label标签包裹起来
2。给input标签添加一个id属性
3.。在label标签中通过for属性和输入框中的id进行绑定
格式: <label for="p2">账号:</label>
<input type="text" value="123e" id="p2" >
关联方式2:用label标签将文字和输入框包裹即可
格式: <label> 账号:<input type="text" value="123e" > </label>
dalist标签:给输入框绑定待选项
格式:<datalist>
<option>待选项内容</option>
</datalist>
绑定:把datalist的id属性绑定给input标签的list属性
表单标签的其他标签
select标签:定义下拉列表
格式: <select name="" id="">
<option value="">列表数据</option>
</select>
注:可以通过给option标签设置一个selected属性来指定默认值
()optgroup:给列表设置单独标题
格式:<optgroup label="分组名称">
<option value="">列表数据</option>
</optgroup>
textarea标签:定义一个多行的文本输入框
格式:
<textarea name="" id="" cols(宽度)="30" rows(行数)="10">内容</textarea>
给表单标签添加边框
在form标签后面添加fieldset标签
格式:<form>
<fieldset>
</fieldset>
<form>
给表单添加标题:
——在fieldset标签后面添加一个legend标签
格式: <fieldset>
<legend>标题</legend>
</fieldset>