目录
表单
基本介绍
用来提交到数据库的信息
各个信息都是通过输入框,按钮(控件)来进行提交
< form action="url" method=get|post name=“myform” >
-name:表单提交时的名称
-action:提交到的地址
-method:提交方式,默认为get
post和get区别:
1.数据提交方式,get把提交的数据url可以看到,post看不到
2.get一般用于提交少量数据,post用来提交大量数据
3.get最多提交1K数据,post理论上没有限制
4.get提交的数据在浏览器历史记录中,安全性不好
基本组成
一个完整的表单包含三个基本组成部分:
表单标签、表单域、表单按钮。
1.表单标签
是指标签本身,它是一个包含表单元素的区域,使用定义
2.表单域
是标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,对应用户不同的数据。(比如:文本域、下拉列表、单选框、复选框等等)
3.表单按钮
用来提交表单中的所有信息到服务器
* 表单域和表单按钮都属于表单元素。
单行文本框<input type="text" >默认值是type="text"
密码框<input type="password"/>
单选按钮<input type="radio" name=””/>
复选框<input type="checkbox"/>
隐藏域<input type="hidden"/>
文件上传<input type="file"/>
下拉框<select>标签
<select><option value="1">北京</option></select>
多行文本<textarea></textarea>
提交按钮<input type="submit"/>
普通按钮<input type="button"/>
重置按钮<input type="reset"/>
控件介绍
文本框
< input type=“text” />
属性:
name:定义控件名称
value:指定控件初始值
密码框
< input type=“password” />
属性:
name:定义控件名称
value:指定控件初始值
单选按钮
< input type=“radio” />
属性:
name:定义控件名称
value:指定控件初始值
checked:设置控件初始状态是否被选中
复选框
< input type=“checkbox” />
属性:
name:定义控件名称
value:指定控件初始值
checked:设置控件初始状态是否被选中
爱好:
<input type="checkbox" checked/>游戏
<input type="checkbox"/>唱歌
<input type="checkbox"/>跳舞
文件
< input type=“file”/>
属性:
name:定义控件名称
使用file类型的input时要注意以下几点
1.form表单的method属性值要为post
1.form要加enctype="multipart/form-data"属性,这个属性说明了我们的文件以二进制方式传输文件,因为我们计算机本身最底层都是以二进制来显示、传输。
默认地,表单数据会编码为 “application/x-www-form-urlencoded”,不能用于文件上传
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file1"/>
</form>
按钮
< input type=“button” />
属性:
name:定义控件名称
value:指定控件初始值
提交按钮
< input type=“submit” />
属性:
name:定义控件名称
value:指定按钮表面显示文字
重置按钮
< input type=“reset” />
属性:
name:定义控件名称
value:指定按钮表面显示文字
图像图片按钮
< input type=“image” src=“URL”/>
属性:
name:定义控件名称
src:指定图像地址
按钮
< button>按钮< /button>
属性:
type:button/submit/reset,默认值为submit
下拉列表框
<select>
<option>选项</option>
<option>选项</option>
<option>选项</option>
</select>
select属性:
name:此列表框的名字
multiple:多选,不用赋值
size :规定下拉列表中可见选项的数目(显示几行)
disabled:规定禁用该下拉列表
option属性:
selected :用来指定默认的选项
value: 用来给< option>指定的那一个选项赋值,这个值是要传送到服务器上的,服务器正是通过调用区域的名字的value 属性来获得该区域选中的数据项的
下拉分组列表
<optgroup label="北京">
<option value="1">东城区</option>
<option value="2">西城区</option>
<option value="3">海淀区</option>
</optgroup>
<optgroup label="河北省">
<option value="4">石家庄</option>
<option value="5">保定市</option>
<option value="6">沧州市</option>
</optgroup>
</select>
多行文本框
< textarea>< /textarea>
属性:
cols :这文字区块的宽度
rows :这文字区块的行数,即其高度
< textarea name="" id="" cols=“30” rows=“10”>< /textarea>
label 点击文字选择
标签为 input 元素定义标注。
abel是input的描述,它本身不会有特殊效果,但它和其它input标签使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中,如“记住密码”
<label for="pwd">记住密码</label>
<input type="checkbox" name="pwd" id="pwd" />
*通过label的for指向按钮的id来绑定,for和id属性的值要相同
<form>
<labllel for="male">Male</label>
<input type="radio" name="sex" id="male" />
</form>
<label>标签一般和radio、checkbox类型一起使用。
fieldset元素集
fieldset 元素可将表单内的相关元素分组,通常和legend标签一起用,legend标签定义了fieldset的提示信息,fieldset是块级元素。
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
HTML5新增控件
电子邮件类型
功能描述:输入E-mail地址的文本框
语法:< input type=“email”/>
注意:输入的内容中必须包含"@","@"后面必须具有内容
搜索类型
功能描述:输入搜索关键字的文本框
语法:< input type=“search”/>
URL类型
功能描述:输入WEB站点的文本框
语法:< input type=“url”/>
注意:输入的内容中必须包含"http://",后面必须有内容
颜色类型
功能描述:预定义的颜色拾取控件
语法:< input type=“color”/>
数字类型
功能描述:只能接受数字
语法:< input type=“number”/>
属性:min:当前域能接受的最小值
max:当前域能接受的最大值
step:决定了域所接受值递增或递减的步长,默认为1
范围类型
功能描述:允许用户选择一个范围内的值
语法:< input type=“range” min=“0” max=“100” value=“80”/>
属性:min:范围的下限值
max:范围的上限值
step:声明该值递增或递减的步长
value:设置初始值
日期类型
功能描述:创建一个日期输入域
语法:< input type=“date” />
周类型
功能描述:与date类型相似,但只能选择周
语法:< input type=“week” />
月份类型
功能描述:与date类型相似,但只能选择月份
语法:< input type=“month” />
HTML5新增属性
placeholder
作用:默认提示
语法:< input type=“text” placeholder=“请输入用户名”/>
multiple
作用:支持在一个域中输入多个值,逗号隔开,一般配合邮箱和URL使用
语法:< input type=“email” multiple/>
autofocus
作用:自动获取焦点(打开网页后就进入某项输入里面)
语法:< input type=“text” autofocus/>
required
作用:防止域为空提交表单时
语法:< input type=“text” required/>
minlength和 maxlength
作用:定制元素允许的最小字符数和最大字符数
语法:< input type=“text” minlength=“6” maxlength=“18”/>
min和max
作用:定制元素允许的最小数字和最大数字
语法:< input type=“number” min=”0” max=”100”/>
示例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>一个表单</title>
</head>
<body>
<form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
<p>    姓名:<input type="text" name="name"/></p>
<p>    密码:<input type="text" minlength="6" maxlength="16"/></p>
<p>  确认密码:<input type="text" minlength="6" maxlength="16"/></p>
密码提示问题:
<select >
<option value="0">请选择</option>
<option value="1">你小学同学名字</option>
<option value="2">你最爱的食物</option>
<option value="3">你喜欢的人</option>
</select>
<p>密码提示答案:<input type="text"/></p>
<p>    性别:<input type="radio" checked/>男 <input type="radio"/>女</p>
<p>    年龄:<input type="number" min="12" max="99"/></p>
<p>
    籍贯
<select>
<option >北京</option>
<option >上海</option>
<option >天津</option>
<option >江西</option>
</select>
省/直辖市
<select>
<option >南昌</option>
<option >景德镇</option>
<option >赣州</option>
<option >抚州</option>
</select>市
</p>
<p>    爱好:<input type="checkbox" checked/>上网 <input type="checkbox"/>体育<input type="checkbox"/>学习</p>
<p>   个人介绍:<textarea name="" id="" cols="30" rows="10"></textarea></p>
<p>  上传头像:<input type="file"/></p>
<p>      <input type="submit"/> <input type="reset"/></p>
</form>
</body>
</html>
HTML5新增元素
HTML5新增语义化标签
1.header 页面头部
2.footer 页脚
3.article 定义页面独立的内容区域
4.aside 定义页面的侧边栏内容
5.details 文档某个部分的细节
6.summary 是details中的标题
7.figure 规定独立的流内容
8.figcaption 是figure的标题
9.mark 标记
10.nav 导航链接
11.meter用来表示范围已知且可度量的内容。
12.ruby加注释
HTML5新增的结构标签
<header>...</header> 头部
<nav>...</nav> 导航
<section>...</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分
<aside>...</aside> 侧边栏
<footer>...</footer> 页脚
<article>...</article>代表一个独立的、完整的相关内容块,可独立于页面其它内容使用。例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等
<figure></figure> 用于对元素进行组合。多用于图片与图片描述组合
<figure>
<img src="img.gif" alt="figure标签" title="figure标签" />
<figcaption>figure的标题</figcaption>
</figure>
<details> 标签用于描述文档或文档某个部分的细节
IE不支持 <details> 标签
<details>
<summary>details中的标题</summary>
<p>详细的内容</p>
</details>
<mark> </mark>
定义带有记号的文本,它会给你要突出显示的文本下加个背景色。
如:<p>你是<mark>大长腿</mark>吗?</p>
<meter> </meter>标签
<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。
<meter min="0" max="100" value="80"></meter>
low:最低临界点
high:最高临界点
<meter min="0" max="100" value="81" low="20" high="80"></meter>
<progress></progress>标签
<progress> 标签定义运行中的进度(进程)
<progress max="100" value="20"></progress>
max:定义完成值
value:定义当前值
<datalist></datalist>标签
<datalist> 标签定义选项列表,与 input 元素配合使用该元素,来定义 input 可能的值
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<video> </video>标签
<video> 标签定义视频,比如电影片段或其他视频流
<video src="movie.mp4" controls>
您的浏览器不支持 video 标签。
</video>
<audio></audio>标签
<audio> 标签定义声音,比如音乐或其他音频流
<audio src="someaudio.mp3">
您的浏览器不支持 audio 标签。
</audio>
<source></source> 标签
<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<audio controls>
<source src="horse.ogg" >
<source src="horse.mp3" >
Your browser does not support the audio element.
</audio>
<embed/>标签
<embed> 标签定义嵌入的内容,比如插件,当然也可以用来嵌入声音
<embed> 标签必须有 src 属性
<embed src="helloworld.mp4" />
<canvas> </canvas> 标签
canvas只是个容器,你可以通过控制坐标在canvas上绘制图形。一般配合js使用能实现非常复杂的动画效果
<canvas id="myCanvas">你的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>