HTML基础（八）——表单等标签

---

表单

• 作用：专门用来收集用户信息的
• 格式：

<form>
	<表单元素>
<form>

---

常见的表单元素

Input标签

输入框，有一个type属性，该属性有很多值，标识不同的作用

type属性

type属性	描述
button	定义可点击按钮（多数情况下，用于通过js启动脚本）
submit	定义提交按钮，会把表单的数据发送到服务器
reset	定义重置按钮，会清除表单的所有数据
radio	定义单选框
checkbox	定义多选框
text	定义单行输入字段，用户可在其中输入文本，默认宽度为20个字符
image	定义图片提交按钮
password	定义密码字段，该字段中字符被掩盖
radio	定义输入字段和“浏览”按钮，供文件上传

• 注意：

1. 默认情况下单选框不会互斥，要想单选框互斥那么必须给每个单选框标签都设置一个name属性，然后name属性必须设置相同的值

2. 要想让单选框默认选一个，那么可以给input设置一个checked属性

3. 在html中如果属性的取值和属性的名称一样，可以只写一个，但是在XHTML中必须写上取值，所以企业开发中推荐大家不要省略取值

4. 在表单标签中，除了按钮标签以外的标签，都可以通过value来指定需要提交到服务器的数据

5. Reset重置，默认显示重置，可以通过value值修改

6. Submit注意：要想把数据提交到远程服务器，必须满足两个条件：
   1 告诉表单需要提交的服务器，可以通过from标签的action属性告诉表单
   2 告诉表单，表单中的哪些数据需要提交，这里可以体现出name值的作用

---

Label标签

默认情况下，文字和输入框没有关联，要想点击文字和输入框效果相同，可以使用label标签进行绑定

• 格式：将文字利用label标签包裹起来，给输入框添加一个id属性，在label标签中通过for属性和输入标签中的id值进行绑定

①	<label for=”account”> 账号：</label> <input type=”text” id=”account”>
②	<label > 账号： <input type=”text”></label> 有局限性

---

Datalist标签

给输入框绑定待选项
格式：

<datalist>
	<option></option>
</datalist>	

下拉列表select

<select>
	<option> </option>
</select>

一个select至少有一个option
在<option>中定义selected=”selected”时，当前项即为默认选择

• 区别：
  select的下拉菜单是供用户选择的，用户只能选择其中的选项不能自己添加。
  datalist不仅可以供用户选择，用户还可以自己输入，而且datalist还可以达到模糊匹配的效果，使用很方便。

• 注意：
  下拉列表不能输入内容，但是可以选择列表已有的内容
  可以通过给option标签添加一个selected属性来指定列表默认值
  可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

---

Textarea标签

可以无限换行
默认五行，可以修改高宽，指定是指视觉看到多少，可以无限输入

---

Video标签：

播放视频

• 格式：

<video src=””>
</video>

不会自动播放，添加autoplay属性就自动播放
Controls：用于告诉video标签是否显示控制条
Poster：用于告诉标签是否在播放之前添加显示占位的图片，类似封面的作用
等

第二种格式：

<video >
	<source src=”” type=””></source>
<source src=”” type=””></source>
</video>

---

Audio标签

播放音频

• 格式：

<audio src=””>
</audio>

<audio >
	<source src=”” type=””></source>
	<source src=”” type=””></source>
</audio>

---

Summary标签

这些标签一般用css\js写的

---

Marquee标签

不是w3c推荐的标签，在w3c官方文档也无法查询这个标签，但是浏览器支持

• 作用：跑马灯
• 格式：

	<marquee></marquee>

• 属性：
  Direction：设置滚动的方向，up/down/right/left
  Scrollamount：设置滚动速度，数字越大越快
  Loop：设置滚动次数，默认是-1，无限
  Behavior：设置滚动类型，slide滚动到边界就停止/alternate滚动到边界就弹回

---