表单，音频、视频_表单工厂,音频视频配置-CSDN博客

本文链接：https://blog.csdn.net/qq_45400916/article/details/112848426

表单、音频、视频

使用表单
HTML5中的音频和视频

使用表单

表单概述

表单主要用于收集网页上浏览者相关信息。其标记为< form>< /form>,基本格式如下：

<form action="url" method="get|post" enctype="mime"></form>

action指定处理提交表单的格式，他可以是一个URL地址或一个电子邮件地址，method指明提交表单的HTTP方法。enctype指明用来把表单提交给服务器时的互联网媒体形式。
表单是一个能够包含表单元素的区域，通过添加不同的表单元素，将显示不同的效果。

表单基本元素使用

常见的有文本框，密码框，下拉菜单，单选按钮，复选框等等。

当行文本输入框text
文本框是一种让访问者自行输入内容的表单对象。使用格式如下：

<input type="text" name="..." size="..." maxlength="..." value="...">

解释：type="text"定义单行文本输入框，name属性定义文本框的名称，要保证数据点准确收集，必须定义一个独一无二的名称，size属性定义文本框的宽度，单位是单个字符宽度，maxlength属性定义最多输入的字符数，value属性定义文本框的初始值。
2. 多行文本框标记< textarea>
主要用于输入较长的文本信息。
格式如下：

<textarea name="..." cols="..." rows="..." wrap="..."></textarea>

解释：name属性与文本框属性一致，cols定义了文本框的宽度，单位是单个字符长度，rows定义多行文本框的高度，单位是单个字符高度，wrap属性定义输入内容大于文本域时显示的方式。
3. 密码域password
密码输入框是一种特殊的文本域，主要用于输入一些保密信息。代码格式如下：

<input type="password" name="..." size="..." maxlength="...">

解释：type="password"定义密码框，name属性定义密码框的名称，要求保证唯一性，size属性定义密码框的宽度，单位是单个字符宽度，maxlength属性定义最多输入的字符数。
4. 单选按钮radio
主要是让网页浏览者在一组选项里面只能选其一。代码格式如下：

<input type="radio" name="..." value="...">

解释：type="radio"定义单选按钮，name属性定义单选按钮名称，单选按钮都是以组为单位使用的，在同一组中的单选项都必须用同一个名称，value属性定义单选按钮的值，在同一组中他们的域值必须是不同的。
5. 复选框checkbox
主要是让网页浏览者在一组选项中可以同时选择多个选型。每个复选框都是一个独立的元素，必须有一个唯一的名称。代码格式如下：

<input type="checkbox" name="..." value="...">

解释：type="checkbox"定义复选框，name属性定义复选框的名称，在同一组中的复选框都必须使用同一个名称，value属性定义复选框的值。注意：
checked属性主要用于设置默认的选中项。
6. 选择列表标记< select>
下拉列表主要用于在有限的空间里设置多个选型，它既可以用作单选，也可以用作多选。代码格式如下：

<select name="..." size="..." multiple>
<option value="..." selected>
....
</option>
....
</select>

解释：name属性定义选择列表的名称，size属性定义选择列表的行数，multiple属性可以表示多选，如果不设该属性，则只能单选，value属性定义选择项的值，selected属性表示默认已经选择本选项。
7. 普通按钮button
普通按钮用来控制其他定义了脚本的处理工作。代码格式如下：

<input type="button" name="..." value="..." onclick="...">

解释：type="button"定义普通按钮，name属性定义普通按钮的名称，value属性定义按钮的显示文字，onclick属性表示单击行为，也可以通过指定脚本函数来定义按钮的行为。
8. 提交按钮submit
提交按钮用来将输入的信息提交到服务器。代码格式如下：

<input type="submit" name="..." value="....">

解释：type="submit"定义提交按钮，name属性定义提交按钮的名称，value属性定义按钮的显示文字。通过提交按钮可以将表单里面的信息提交给action所指向的文件。
9. 重置按钮reset
重置按钮用来清空表单中的输入信息。代码格式如下：

<input type="reset" name="..." value="...">

解释：type="reset"定义重置按钮，name属性定义重置按钮的名称，value属性定义按钮的显示文字。

表单高级元素使用

url属性
该属性是用于说明网站网址，显示为在一个文本框中输入URL地址，在提交表单时会自动的验证url的值，代码格式如下：

<input type="url" name="userurl"/>

解释：用户可以使用普遍属性设置url输入框，例如可以使用max属性设置其最大值，min属性设置其最小值，step属性设置合法的数字间隔，value属性规定其默认值。
2. eamil属性
该属性用于让浏览者输入E-mail地址，在提交表单时会自动验证email域的值。代码格如下：

<input type="email" name="user_email">

date和Times
日期和时间输入类型如下列表：

代码格式如下：

<input type="date" name="user_date"/>

number属性
该属性提供了一个输入数字的输入类型，用户可以直接输入数字或者通过单击微调框中的按钮选择数字，代码格式如下：

<input type="number" name="shuzi"/>

range属性
该属性可以显示一个滚动的控件，用户可以使用max，min，和step属性设置控件的范围，代码格式如下：

<input type="range" name="" min="" max=""/>

required属性
该属性规定必须在提交之前填写输入域（不能为空），required属性适合用于以下类型的输入属性：text，search，url，email，password，date，pickers，number，checkbox，radio等。

HTML5中的音频和视频

< audio>标记

< audio>标记概述
该标记主要是定义播放声音文件和音频流的标准，支持三中格式：ogg，mp3，wav。
代码格式如下：

<audio src="song.mp3" controls="controls">
</audio>

解释：src属性是规定要播放的音频地址，controls属性是提供添加播放，暂停和音量的控件。
2. < audio>标记的属性
在这里插入图片描述
3. 音频解码器
其定义了音频数据流编码和解码的算法。编码器主要是针对数据流进行编码操作，用于存储和传输，解码器主要是对音频文件进行解码，然后进行播放操作。目前使用较多的音频解码器是Vorbis和ACC.

< video>标记

概述
该标记主要定义播放视频文件或视频流标准，支持三种格式，Ogg，WebM，MPEG4。
格式如下：

<video src="123.mp4" controls="controls"></video>

该标记属性
常见属性如下表：

代码格式如下：

<video width="..."  height="..." controls= src="..."></video>

视频解码器
视频解码器定义了视频数据流编码和解码算法。编码器主要是针对数据流进行编码操作，用于存储和传输，解码器主要是先对视频文件进行解码，然后在进行播放操作。

音频和视频中的方法

canPlayType（）方法
canPlayType（）方法用于检测浏览器地是否能够播放指定的音频或视频文件，canPlayType（）方法返回值包含如下：
1）probably：浏览器全面支持指定的音频或视频类型。
2）maybe：浏览器可能支持指定的音频或视频类型。
3）“ ”（空字符串）：浏览器不支持指定的音频或视频类型。
load（）方法
该方法用于重新加载音频或者视频文件。语法格式如下：