3.18 表单及多媒体标签

一、表单

1. 表单是专门用来收集用户信息的
2. 表单的格式

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

method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。
表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。

3. 常见的表单元素
4. input标签
   <input type="text">，明文输入框，可以设置value值为默认显示
   <input type="password">，暗文输入框
   <input type="radio">，单选框

注意：

    1. 默认情况下单选框不会互斥，想要单选框互斥那么必须给每个单选框标签都设置一个具有相同值的name属性
    2. 想让单选框默认选中某个框，可以给input标签添加一个checked属性`checked="checked"`
    3. 同时添加多个checked属性，默认选中最后一个checked属性。

`<input type="checkbox">`，多选框

<input type="button" value="xx">，定义普通按钮，可通过value属性来给按钮指定标题，配合JS完成一些操作
<input type="image" src="xx/xx.jpg">，定义图片形式的提交按钮
<input type="reset">，定义重置按钮，用来清空表单已经填写的数据，默认标题是重置，可以通过value属性来修改
<input type="submit">，用来将表单中已经填写的数据提交到远程服务器

注意：

想要把表单中填写的数据提交到远程服务器，必须具备两个条件
1. 需要给form表单添加一个action属性，通过这个属性指定需要提交到的服务器地址。
2. 需要给需要提交到服务器的表单元素添加一个name属性

`<input type="hidden">`，隐藏域，配合提交按钮将一些数据偷偷提交到服务器

注意：

不同类型的input type都可以有value属性，赋值给value用来向服务器传递数据

2. input新增类型（H5）
   <input type="email">，会自动验证email的格式是否正确
   <input type="url">，会自动验证url的格式是否正确，要完整格式http://www.xx.com
   <input type="number">，只能输入数字
   <input type="date">，可通过日历来选择年月日
   <input type="color">，可通过取色板来选择颜色

3. 用label标签将文字和input标签绑定
   第一种方法：用label标签将文字和input标签包裹起来
   第二种方法：

4. 用label标签将文字包裹起来

5. 在input标签中添加一个id名

6. 在label标签中用for属性链接到input的id名完成绑定

7. datalist标签（待选列表）
   用于给输入框绑定待选列表，

<input type="text" list="xx">
<datalist id=”xx“>
    <option>待选项内容</option>
    <option>待选项内容</option>
    <option>待选项内容</option>
</datalist>

这样输入框中会有下拉箭头，并且会根据填入内容提示待选项。

5. select标签
   定义一个下拉列表

<select>
<optgroup label="分组名称">
    <option>列表数据</option>
</optgroup>
<optgroup label="分组名称">
    <option>列表数据</option>
</optgroup>
</select>

注意：

1. select标签不能输入内容，他自己就是一个列表，在option里填的数据可供下拉选择 
2. 可以给option标签添加一个selected属性让他成为默认选择，默认选择是第一个option
3. 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据进行分组

6. textarea标签
   定义一个可以换行的多行文本输入框

<textarea>
xxx
</textarea>

注意：

1. 默认情况下输入框可以无限换行
2. 默认情况有输入框有自己的宽度和高度
3. 可以通过cols和rows来指定输入框的列数和行数，但仍可以无限输入
4. 默认情况下输入框可以手动拉伸，通过CSS代码`resize:none;`可以设定不允许拉伸

7. fieldset标签
   来给表单加一个边框和标题

<fieldset>
<legend>表单标题</legend>
</fieldset>

二、多媒体标签

1. video标签

用来播放视频

<video src="">
</video>

• src：告诉video标签要播放视频的地址
• autoplay：告诉video标签是否需要自动播放，默认不自动播放，赋值autoplay="autoplay"可以实现自动播放
• controls：告诉video标签是否显示控制条，默认不显示，赋值controls="controls"可以显示
• poster：告诉video标签没有播放视频之前显示的占位图片，poster ="xx.jpg"
• loop：告诉video标签视频播放完毕后是否循环播放，一般用作广告视频,loop ="loop"实现循环
• preload：预加载视频preload="preload"，和autoplay冲突
• muted：静音，muted="muted"实现静音
• width/height：推荐设置一个保持比例缩放

video的第二种格式

<video>
    <source src="xx.webm" type="video/webm">
    <source src="xx.mp4" type="video/mp4">
    <source src="xx.ogg" type="video/ogg">
</video>

为了解决浏览器的适配问题，video元素支持三种视频格式，我们可以通过source标签把这三种格式都指定给video标签，那么浏览器播放视频时就会自动从这三种中选择一种自己支持的格式来播放。video标签的各种属性也可以使用。
虽然通过video标签的第二种格式可以指定所有浏览器都支持的视频格式，但还有个前提就是浏览器支持html5标签。为了让那些不支持video标签的浏览器也能通过video标签来播放，以后可以通过一个叫做html5media的JS框架来实现

2. audio标签

用来播放音频，各种属性标签用法同video标签一样（除了width、height和poster），也有第二种格式

3. 详情和概要标签

利用summary标签来描述概要信息，利用details标签来描述详细信息，默认情况下details是折叠的，只显示概要。

<details>
    <summary>概要信息</summary>
    详细信息
</details>

4. marquee标签

跑马灯效果

<marquee>
        跑马灯内容
</marquee>

• direction：设置滚动方向left/right/up/down，默认left（往左）
• scrollamount：设置滚动速度，值越大速度越快
• loop：设置滚动次数，默认是-1，无限循环
• behavior：设置滚动类型
• slide：滚动到边界就停止
• alternate：滚动到边界就弹回

三、字符实体

&nbsp；空格，&lt；小于号，&gt；大于号，&copy；版权符号
可通过w3cschool网站查询

四、被废弃的标签

<b>、<u>、<i>、<s>、<br>、<hr>、<font>
在企业开发中不到万不得已不能使用
替代的标签
<strong>：要重点强调的文字的语义
<ins>：要插入的文字的语义
<em>：要强调的文字的语义
<del>：要删除的文字的语义