整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
单是PHP程序中最常使用的收集站点访问者信息的数据输入界面。通过表单浏览器获取用户的输入数据，并传送给Web服务器的脚本程序中，以各种不同的方式进行处理。在表单中提供了多种输入方式，包括文本输入域、单选或多选按钮、下拉式列表域等。表单是网页上由<form>标签定义的一个特定区域，而表单的各种输入域可以由<input>、<select>和<textarea> 3个标签定义。
1 表单标签<form>
一个表单用<form></form>标签来创建，即定义表单的开始和结束位置，在开始和结束标签之间的一切定义都属于表单的内容。单击提交按钮时，提交的也是表单范围之内的内容。另外，在<form>标签中需要携带表单的相关信息，例如处理表单的脚本程序的位置、提交表单的方法等。这些信息对于浏览者是不可见的，但对于处理表单却有着决定性的作用。该标签的常用属性如表1所示。
表1 HTML表单标签中常用的属性
<form>标签中必须加action属性，并且不能为空。例如，<form action="login.php" method="post">。如果不需要使用action属性，也必须定义：<form action="no">。
2 文本域和密码域
在<form>标签内定义的<input>标签具有重要的地位，该标签是单个标签，没有结束标记。<input type="">标签用来定义一个用户输入区，用户可以在其中输入信息。<input>标签中共提供了9种类型的输入区域，具体是哪一种类型由type属性来决定。文本和密码输入域是一个单行文本框，它们基本相似，唯一不同的是，用户在密码域中输入的字符并不以原样显示，而是将每个字符用“*”代替。文本和密码输入域的基本语法格式如下：
<input type="text" name="field_name" value="field_value" size="n" maxlength="n"> <!-- 输入域 -->
<input type="password" name="field_name" value="field_value" size="n" maxlength="n"> <!-- 密码域 -->
这些属性的含义如表2所示。
表2 HTML中<input>标签的常用属性z
3 提交、重置和普通按钮
在<input>标签中，当type属性值为“submit”时，表示这是一个提交按钮，单击提交按钮后，可以实现表单内容的提交；当type属性为“reset”时，表示这是一个重置按钮，单击重置按钮后，表单的内容将恢复为默认值；当type属性为“button”时，表示这是一个普通按钮，并不实现任何功能，需要和JavaScript等脚本语言一起使用。button按钮必须定义在form之间，否则Netscape浏览器不支持。这3种按钮的基本语法格式如下：
<input type="submit" name="field_name" value="field_value"> <!-- 提交按钮 -->
<input type="reset" name="field_name" value="field_value"> <!-- 重置按钮 -->
<input type="button" name="field_name" value="field_value"> <!-- 普通按钮 -->
4 单选按钮和复选框
单选按钮和复选框都有“选中”和“未选中”两种状态。同一组单选按钮如果有多个选择框，则选择框之间是相互排斥的，只允许用户选择其中的一个。复选框和单选按钮的区别是，复选框允许用户同时选中同一表单中的多个或全部选项，当然，也可以只选其中的一个选项。它们都是只有在“选中”时，数据才能被提交到服务器端。其语法格式如下所示：
<input type="radio" name="field_name" value="field_value" checked> <!-- 单选按钮 -->
<input type="checkbox" name="field_name" value="field_value" checked> <!-- 复选框 -->
在<input>标签中，当type属性值为“checkbox”时，表示这是一个复选框输入域；当type属性值为“radio”时，则表示这是一个单选按钮输入域。但在同一组中的多个单选按钮名称必须相同，它们之间才能相互排斥。单选按钮和复选框都可以通过checked属性设置为选中状态。
喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
1 html5文档类型和字符集
Html的发展历程：
文档类型设定
Document
HTML: sublime输入html:4s
XHTML: sublime输入html:xt
HTML5：sublime输入html：5或者！显示
2 查看手册及其新增标签
常用新标签（需掌握）
W3c手册中文官网：w3school
header：定义文档的页眉 头部
nav：定义导航链接的部分
footer：定义文档或节的页脚 底部
article：定义文章。
section：定义文档中的节（ section区段）
aside：定义其所处内容之外的内容 侧边
datalist：定义选项列表。与 input元素配合使用该元素
Fieldset：可将表单内的相关元素分组，打包
3 datalist标签
有提示的下拉菜单
4 fieldset元素
fieldset元素可将表单内的相关元素分组、打包， 和legend搭配使用
5 HTML5新增 iInput表单（一）
6 HTML5新增 input表单（二）
7 新增占位符焦点多选属性
8 autocomplete属性
输入内容自动记录，方便下次快速输入
autocomplete必须满足两个条件才会起作用，一是必须有提交按钮，二是必须给给他名字，名字是什么无所谓，例如上面“123”
9 内容不能为空和获得焦点属性
required是提示输入内容不能为空
accesskey是一个快捷键属性，如上字母“s”,意思是在页面中按“ctrl+s”可以将光标移至此文本框
10 表单综合案例学生档案
显示效果如下（马赛克不算）：
11 embed引入网上视频
多媒体标签 embed：定义嵌入的内容，embed可以用来插入各种多媒体，格式可以是Mid、Wav、AFF、AU、MP3等等。Url为音频或视频文件及其路径，可以是相对路径或绝对路径
因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解audio和video视频多媒体。
12 播放音频 audio
autoplay是自动播放，controls是显示播放器，Loop是循环次数
每个浏览器的显示样式有所不同，每个浏览器支持的音频格式有所不同
Source可以提供多个音频格式，以便兼容各种浏览器。
13 播放视频 video
跟音频播放用法一样
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。
第一阶段HTML5的所有章节都已结束，下篇文章将分享《第二阶段 CSS3》小伙伴们不要错过哟！
?
mail 类型用于邮件地址的输入，很明显，它只适用于邮箱输入。
使用格式如下：
<input type="email" />如果你输入的邮箱格式不正确，会提醒你格式错误。
url 类型是专门用来输入网址的。
使用格式如下：
<input type="url" />也同样会校验网址格式是否合法。
number 类型用于数字的输入，number 类型表单有以下属性：
属性 | 描述 |
max | 输入框允许的最大值。 |
min | 输入框允许的最小值。 |
step | 合法的数字间隔，例如 step=2，则合法为：2、4、6、8。 |
value | 默认值。 |
例如：设置默认值为 5，步长为 2，每点 ?? 一次，数字 + 2。
<input type="number" value="5" step="2" />range 类型用于包含一定范围内数值的输入。与number不同的是，range显示为进度条。
其使用格式为：
<input type="range" />六种常用的日期选择类型：
统称为 Date pickers：
类型 | 描述 |
date | 选取年、月、日 |
month | 选取年、月 |
week | 选取年、周 |
time | 选取时间小时、分钟 |
datetime | 选取年、月、日和 UTC 时间 |
datetime-local | 选取年、月、日和本地时间 |
例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
date： <input type="date" /> <br />
datetime-local：<input type="datetime-local" /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>
显示效果如下：
search 类型的 input 标签提供用于输入搜索关键字的文本框，从外观看 search 和 text 是一样的，功能也是相近的可以输入任意的字符串。
使用格式如下：
<input type="search" />不能从外观和功能上能发现 search 类型和 text 类型的区别。那么我们为何还要学 search 类型呢？
如果使用不同的浏览器去看，就会发现有细微的差异，比如 Chrome 浏览器给 search 类型的输入框提供了清空按钮。如果在移动端的话，虚拟键盘会根据不同类型的输入框给出不同的反应。还有就是起到语义化的作用，我们一眼能够明白这里的 input 是起到搜索的效果。
tel 类型是 input 标签专门用来输入电话号码的文本框，它并不仅局限输入数字，还可以输入一些其他的字符，例如：- +（）等。
语法格式如下：
<input type="tel" />datalist 标签，为输入框提供一个可选择的数据列表。在具有自动提示功能的文本框中可以使用这些选择项来自动补全文本框。该标签由 datalist 和 option 标签组合应用。
一个 datalist 标签中可以包含多个 option 标签。他们的关系和表单元素 select 和 option 的关系一样。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
你最爱的水果：
<input list="fruits" id="fruit" name="fruit" />
<datalist id="fruits">
<option value="苹果"></option>
<option value="李子"></option>
<option value="苹果"></option>
<option value="西瓜"></option>
<option value="樱桃"></option>
</datalist>
</body>
</html>显示为，下拉菜单为提示框
HTML5 新增的 output 元素用于在浏览器中显示计算结果或者脚本输出，输出的结果在标签之间显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form oninput="r.value=parseInt(num1.value)+parseInt(num2.value)">
<!--定义了两个 number 类型的输入框，其默认值为 100-->
<input type="number" id="num1" value="100" />
+
<input type="number" id="num2" value="100" />=<!--for 属性可以绑定对应 id 名的表单元素-->
<output name="r" for="num1 num2"></output>
</form>
</body>
</html>在上面代码中，有 oninput="r.value=parseInt(num1.value)+parseInt(num2.value)"，我们使用 oninput 来及时获取输入框中改变后的值。在等号右侧，使用 parseInt 是把输入框中的值按照整型来解析。
关于 form 标签中的 oninput 属性是当元素获得输入时被触发，其中 parseInt 是 JavaScript 中解析整数的函数，这里只要知道它所起的作用就好，不需要去深究。
显示为，202就是output显示的
*请认真填写需求信息，我们会在24小时内与您取得联系。
