HTML进阶，表单，媒体

表单：
form> 元素定义 HTML 表单：

HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

input> 元素
input> 元素是最重要的表单元素。
input> 元素有很多形态，根据不同的 type 属性。

input type=“text”> 定义用于文本输入的单行输入字段
类型 描述
输入类型：password
input type=“password”> 定义密码字段

单选按钮输入
input type=“radio”> 定义单选按钮。

提交按钮
input type=“submit”> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
text 定义常规文本输入。
radio 定义单选按钮输入（选择多个选择之一）
submit 定义提交按钮（提交表单）

value 规定输入字段的默认值。

Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。

Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
form action=“action_page.php” method=“GET”>
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的
GET 最适合少量数据的提交。浏览器会设定容量限制

或：form action=“action_page.php” method=“POST”>
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的

用 fieldset> 组合表单数据
fieldset> 元素组合表单中的相关数据

legend> 元素为 元素定义标题。

HTML Form 属性
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

select> 元素（下拉列表）
select> 元素定义下拉列表：

实例
select name=“cars”>
option value=“volvo”>Volvo
option value=“saab”>Saab
option value=“fiat”>Fiat
option value=“audi”>Audi
/select>
option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。

textarea> 元素
textarea> 元素定义多行输入字段（文本域）：

button type=“button” οnclick="alert('Hello World!'点击网页会弹出框

Input Type: checkbox
input type=“checkbox”> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。

输入类型：number
input type=“number”> 用于应该包含数字值的输入字段。
够对数字做出限制。

一些常用的输入限制
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。

输入类型：date
input type=“date”> 用于应该包含日期的输入字段。

输入类型：color
input type=“color”> 用于应该包含颜色的输入字段

输入类型：range
input type=“range”> 用于应该包含一定范围内的值的输入字段
input type=“range” name=“points” min=“0” max=“10”

输入类型：search
input type=“search”> 用于搜索字段

HTML Input 属性
disabled 属性
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。

size 属性
size 属性规定输入字段的尺寸
input type=“text” name=“firstname” value=“John” size=“40”

maxlength 属性
maxlength 属性规定输入字段允许的最大长度：
input type=“text” name=“firstname” maxlength=“10”

autocomplete 属性on/off
autocomplete 属性规定表单或输入字段是否应该自动完成。
当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

novalidate 属性
novalidate 属性属于 form> 属性。
如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。novalidate=“novalidate”

formaction 属性
formaction 属性规定当提交表单时处理该输入控件的文件的 URL。
formaction 属性覆盖 form> 元素的 action 属性。
formaction 属性适用于 type=“submit” 以及 type=“image”。

list 属性
list 属性引用的 datalist> 元素中包含了 input> 元素的预定义选项
input list=“cars” />
datalist id=“cars”>
option value=“BMW”>
option value=“Ford”>
option value=“Volvo”>
/datalist>

multiple 属性
multiple 属性是布尔属性。

如果设置，则规定允许用户在 input> 元素中输入一个以上的值。
multiple 属性适用于以下输入类型：email 和 file。
input type=“file” name=“img” multiple>

pattern 属性
pattern 属性规定用于检查 input> 元素值的正则表达式。
pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。
input type=“text” name=“country_code” pattern="[A-z]{3}"
title=“三个字母的国家代码” />

placeholder 属性
placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。
input type=“text” name=“fname” placeholder=“First name”>

required 属性
required 属性是布尔属性。
如果设置，则规定在提交表单之前必须填写输入字段。
input type=“text” name=“usr_name” required=“required” />

声音可通过
使用 embed> 元素
embed> 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。能够显示嵌入网页中的 MP3 文件
embed height=“100” width=“100” src=“song.mp3” />

使用 object> 元素
object height=“100” width=“100” data=“song.mp3”>/object>

使用 HTML5 audio> 元素

HTML 4.01 多媒体标签
标签 描述
applet> 不赞成。定义内嵌 applet。
embed> HTML4 中不赞成，HTML5 中允许。定义内嵌对象。
object> 定义内嵌对象。
param> 定义对象的参数。

HTML 5 多媒体标签
标签 描述
audio> 标签定义声音，比如音乐或其他音频流。
embed> 标签定义嵌入的内容，比如插件。

embed> 标签的作用是在 HTML 页面中嵌入多媒体元素
问题
HTML4 无法识别 embed> 标签。您的页面无法通过验证。
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

object> 标签的作用是在 HTML 页面中嵌入多媒体元素
问题
如果浏览器不支持 Flash，将无法播放视频。
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

video> 是 HTML 5 中的新标签
问题
您必须把视频转换为很多不同的格式。
元素在老式浏览器中无效。
元素无法通过 HTML 4 和 XHTML 验证。

最好的 HTML 解决方法
HTML 5 + object> + embed>

问题
您必须把视频转换为很多不同的格式
video> 元素无法通过 HTML 4 和 XHTML 验证。
embed> 元素无法通过 HTML 4 和 XHTML 验证。
注释：使用 (HTML5) 解决验证问题。

优酷解决方案
在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。
如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频

使用超链接
如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件

HTML 4.01 多媒体标签
标签 描述
applet> 不赞成。定义内嵌 applet。
embed> 不赞成。定义内嵌对象。（HTML5 中允许）
object> 定义内嵌对象。
param> 定义对象的参数。
HTML 5 多媒体标签
标签 描述
video> 标签定义声音，比如音乐或其他音频流。
embed> 标签定义嵌入的内容，比如插件。