3.18 表单及多媒体标签

一、表单

  1. 表单是专门用来收集用户信息的
  2. 表单的格式
<form>
    <表单元素>
</form>

method 属性规定如何发送表单数据(表单数据发送到 action 属性所规定的页面)。
表单数据可以作为 URL 变量(method="get")或者 HTTP post (method="post")的方式来发送。

  1. 常见的表单元素
  2. input标签
    <input type="text">,明文输入框,可以设置value值为默认显示
    <input type="password">,暗文输入框
    <input type="radio">,单选框
注意:
    1. 默认情况下单选框不会互斥,想要单选框互斥那么必须给每个单选框标签都设置一个具有相同值的name属性
    2. 想让单选框默认选中某个框,可以给input标签添加一个checked属性`checked="checked"`
    3. 同时添加多个checked属性,默认选中最后一个checked属性。

`<input type="checkbox">`,多选框

<input type="button" value="xx">,定义普通按钮,可通过value属性来给按钮指定标题,配合JS完成一些操作
<input type="image" src="xx/xx.jpg">,定义图片形式的提交按钮
<input type="reset">,定义重置按钮,用来清空表单已经填写的数据,默认标题是重置,可以通过value属性来修改
<input type="submit">,用来将表单中已经填写的数据提交到远程服务器

注意:

想要把表单中填写的数据提交到远程服务器,必须具备两个条件
1. 需要给form表单添加一个action属性,通过这个属性指定需要提交到的服务器地址。
2. 需要给需要提交到服务器的表单元素添加一个name属性

`<input type="hidden">`,隐藏域,配合提交按钮将一些数据偷偷提交到服务器
注意:

不同类型的input type都可以有value属性,赋值给value用来向服务器传递数据

  1. input新增类型(H5)
    <input type="email">,会自动验证email的格式是否正确
    <input type="url">,会自动验证url的格式是否正确,要完整格式http://www.xx.com
    <input type="number">,只能输入数字
    <input type="date">,可通过日历来选择年月日
    <input type="color">,可通过取色板来选择颜色

  2. 用label标签将文字和input标签绑定
    第一种方法:用label标签将文字和input标签包裹起来
    第二种方法:

  3. 用label标签将文字包裹起来

  4. 在input标签中添加一个id名

  5. 在label标签中用for属性链接到input的id名完成绑定

  6. datalist标签(待选列表)
    用于给输入框绑定待选列表,

<input type="text" list="xx">
<datalist id=”xx“>
    <option>待选项内容</option>
    <option>待选项内容</option>
    <option>待选项内容</option>
</datalist>

这样输入框中会有下拉箭头,并且会根据填入内容提示待选项。

  1. select标签
    定义一个下拉列表
<select>
<optgroup label="分组名称">
    <option>列表数据</option>
</optgroup>
<optgroup label="分组名称">
    <option>列表数据</option>
</optgroup>
</select>
注意:
1. select标签不能输入内容,他自己就是一个列表,在option里填的数据可供下拉选择 
2. 可以给option标签添加一个selected属性让他成为默认选择,默认选择是第一个option
3. 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据进行分组
  1. textarea标签
    定义一个可以换行的多行文本输入框
<textarea>
xxx
</textarea>
注意:
1. 默认情况下输入框可以无限换行
2. 默认情况有输入框有自己的宽度和高度
3. 可以通过cols和rows来指定输入框的列数和行数,但仍可以无限输入
4. 默认情况下输入框可以手动拉伸,通过CSS代码`resize:none;`可以设定不允许拉伸
  1. fieldset标签
    来给表单加一个边框和标题
<fieldset>
<legend>表单标题</legend>
</fieldset>

二、多媒体标签

1. video标签

用来播放视频

<video src="">
</video>
  • src:告诉video标签要播放视频的地址
  • autoplay:告诉video标签是否需要自动播放,默认不自动播放,赋值autoplay="autoplay"可以实现自动播放
  • controls:告诉video标签是否显示控制条,默认不显示,赋值controls="controls"可以显示
  • poster:告诉video标签没有播放视频之前显示的占位图片,poster ="xx.jpg"
  • loop:告诉video标签视频播放完毕后是否循环播放,一般用作广告视频,loop ="loop"实现循环
  • preload:预加载视频preload="preload",和autoplay冲突
  • muted:静音,muted="muted"实现静音
  • width/height:推荐设置一个保持比例缩放
video的第二种格式
<video>
    <source src="xx.webm" type="video/webm">
    <source src="xx.mp4" type="video/mp4">
    <source src="xx.ogg" type="video/ogg">
</video>

为了解决浏览器的适配问题,video元素支持三种视频格式,我们可以通过source标签把这三种格式都指定给video标签,那么浏览器播放视频时就会自动从这三种中选择一种自己支持的格式来播放。video标签的各种属性也可以使用。
虽然通过video标签的第二种格式可以指定所有浏览器都支持的视频格式,但还有个前提就是浏览器支持html5标签。为了让那些不支持video标签的浏览器也能通过video标签来播放,以后可以通过一个叫做html5media的JS框架来实现

2. audio标签

用来播放音频,各种属性标签用法同video标签一样(除了width、height和poster),也有第二种格式

3. 详情和概要标签

利用summary标签来描述概要信息,利用details标签来描述详细信息,默认情况下details是折叠的,只显示概要。

<details>
    <summary>概要信息</summary>
    详细信息
</details>
4. marquee标签

跑马灯效果

<marquee>
        跑马灯内容
</marquee>
  • direction:设置滚动方向left/right/up/down,默认left(往左)
  • scrollamount:设置滚动速度,值越大速度越快
  • loop:设置滚动次数,默认是-1,无限循环
  • behavior:设置滚动类型
  • slide:滚动到边界就停止
  • alternate:滚动到边界就弹回

三、字符实体

&nbsp;空格,&lt;小于号,&gt;大于号,&copy;版权符号
可通过w3cschool网站查询

四、被废弃的标签

<b><u><i><s><br><hr><font>
在企业开发中不到万不得已不能使用
替代的标签
<strong>:要重点强调的文字的语义
<ins>:要插入的文字的语义
<em>:要强调的文字的语义
<del>:要删除的文字的语义

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容