表单
1.表单的作用
采集和提交用户输入的信息(数据)
2.创建表单
2.1 定义表单,让浏览器知道这是一个表单结构
<form action="提交的地址" method="get\post">
</form>
提交方式method:
get:数据显示在url的上面,所以数据不安全
有大小限制,一般不超过2kb
post:数据放在网页的头部,通过network查看,相对安全性高
没有大小限制
建议:处于安全考虑,提交重要数据时,最好使用post
enctype:编码类型
2.2 表单元素
<input /> type:值不同
文本框:<input type="text"/>
value:值
size:设置大小
maxlength:最大长度
minlength:最小长度
密码框:<input type="password"/>
单选框:<input type="radio"/>
注意:同一组单选框,名字相同
选中单选框:checked=”checked“
value属性用户看不到,还要专门文字
value提交表单时,提交到对应地址
复选框:<input type="checkbox"/>
注意:同一组单选框,名字相同
选中:checked=”checked“
value属性用户看不到,还要专门文字
value提交表单时,提交到对应地址
隐藏域(针对用户隐藏):<input type="hidden" name="名称"/>
文件域:<input type="file" name="名称"/>
注意:表单中有文件域,必须使用post提交
表单的编码,必须设置成 enctype=”multipart/formdata“,
默认编码:enctype=”application/x-www-form-urlencoded"
h5中在type中新加了:number,date,color,datetime,email等
列表框
<select name="">
<option value="值">用户看到的</option>
</select>
注意:选中属性:selected=”selected“
显示多行:multiple=”multiple“
显示个数:size=”数量“
多行文本域
<textarea name="" cols="列表" row="行数" ></textarea>
按钮
重置按钮 <input type="reset" value=""/> 作用:将表单元素还原成初始状态
普通按钮 <input type="button" value=""/> 只有按钮的样式,没有任何功能作用
提交按钮 <input type="submit" value=""/>
图片按钮 <input type="image" src="图片路径"/> 图片按钮具有提交功能
2.3 div 与 span
两个标签没有任何的含义
div:容器
span:范围,跨度(文字的范围)
2.4 元素的分类
块级元素:不管内容多少,都独占一行
行内(内联)元素:内容有多少就显示多少,只有一行不够显示了,才换行显示
2.5 表单的高级应用
(1)表单的属性
只读属性:readonly=“readonly”,一般与问板框结合使用
禁用属性:disabled=“disabled”,一般与按钮结合使用,也可以和文本框一起使用
(2)域标签 :<fieldset></fieldset>
域标题:<legend></legend>
(3)文本标签:<label></label>
功能:文本标记 <label for="标注的标签ID"></label>
2.6 属性的分类
(1)共有属性(一般属性)
name,id,class,style等,所有标签都具有的属性
(2)特殊属性:只有对应的标签才有的特殊属性
如:href是a标签对应的属性
(3)自定义属性:用户可以根据自己的情况,自己定义属性
注意:自定义属性一般以“data-”开头
补充知识:
2.7 音频,视频标签
h5:音频<audio></audio>
视频<video></video>
属性:src:路径
autoplay:自动播放 autoplay = “autoplay”
controls: 控制条 controls = "controls"
muted: 静音 muted = "muted"
h4:音频:
<object type="application/ogg" data="xxx.mp3">
<param name="src" value="xxx.mp3">
</object>
视频:
<object type="application/ogg" data="xxx.mp4">
<param name="src" value="xxx.mp4">
</object>
h5:<embed src="xxx.wav"> embed—多媒体元素
2.8 iframe:内联框架,在一个页面,内嵌一个页面
<iframe src=""></iframe>
src:打开页面时,默认加载的页面
height:高度
width:宽度
scrolling:滚动条
注意:可以给iframe一个名称,a标签通过target设置成iframe名称,链接的页面将显示在框架中。