《第二讲表单与多媒体PPT课件》由会员分享，可在线阅读，更多相关《第二讲表单与多媒体PPT课件（40页珍藏版）》请在金锄头文库上搜索。
1、第二讲 表单与多媒体HTML表单表单用于获取不同类型的用户输入HTML表单类型常用表单类型文本域 或文本区域按钮或或复选框单选按钮选择列表文件域图像域隐藏域HTML表单常用的表单标签表单输入域文本域控制标签定义域域的标题选择列表下拉列表中的选项按钮input标签标签用于搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。在HTML中，标签没有结束标签。input标签的常用属性属性属性值值描述描述autocompleteonoff规定是否使用输入字段的自动完成功能autofocusautofocus规定输入字段在页
2、面加载时是否获得焦点。（不适用于 type=hidden）checkedchecked规定此 input 元素首次加载时应当被选中。maxlengthnumber规定输入字段中的字符的最大长度。namefield_name定义 input 元素的名称。requiredrequired指示输入字段的值是必需的。sizenumber_of_char定义输入字段的宽度。typebuttoncheckboxfilehiddenimagepasswordradioresetsubmittext规定 input 元素的类型。valuevalue规定 input 元素的值。input标签的传统类型（1）te
3、xt类型定义用户可输入文本的单行输入字段。默认宽度为20个字符。例：用户名：input标签的传统类型（2）password类型定义密码字段。该字段中的字符被掩码。例：密码：input标签的传统类型（3）botton类型定义可点击的按钮，但没有任何行为。button类型常用于在用户点击按钮时启动JavaScript程序。例：functionmsg()alert(Helloworld!);input标签的传统类型（4）submit类型定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的action属性中指定的页面。例：input标签的传统类型（5）reset类型定义重置按钮。重置按钮
4、会清除表单中的所有数据。例：input标签的传统类型（6）radio类型定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。例：性别：男女input标签的传统类型（7）checkbox类型定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。例：兴趣方向：IT建筑体育input标签的传统类型（8）file类型用于文件上传。例：你的照片：input标签的传统类型（9）image类型定义图像形式的提交按钮。例：input标签的传统类型（10）hidden类型定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由JavaScript进行修改。例：
5、input新增输入类型（1）email类型在HTML5将一个input元素的类型设置为email时，表明该输入框用于输入电子邮件地址。当页面加载时，该input元素对应文本框与其他类型文本框显示效果相同，但是仅限于输入电子邮件格式的字符串。表单提交时，将会自动检测输入内容是否为email。input新增输入类型（2）日期时间类型Date Pickers（日期选择器）HTML5中将一个input元素的类型设置为日期时间类型，即可在页面中生成一个日期时间类型的输入框。当用户点击对应日期输入框时，会弹出日期选择界面，选择日期后该界面自动关闭，并将用户选择具体日期填充在输入框中。input新增输入类型
6、HTML5拥有多个可供选取日期和时间的新输入类型：date-选取日、月、年month-选取月、年week-选取周和年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-local-选取时间、日、月、年（本地时间）input新增输入类型（3）number类型number类型的input元素在HTML5中，用于提供一个数字类型的文本输入控件。该元素在页面中生成的输入框只允许用户输入数字类型信息，并可通过该输入框后面的上、下调节按钮来微调输入数字大小。input新增输入类型（3）number类型主要属性属性属性值值描述描述maxnumber 规定允许
7、的最大值minnumber 规定允许的最小值stepnumber规定合法的数字间隔（如果 step=3，则合法的数是 -3,0,3,6 等）value number 规定默认值input新增输入类型（4）range类型HTML5中当一个input元素的类型设置为range时，将在页面中生成一个数字区域选择控件，用于设置选择区域信息。Range类型显示为滑动条。Range类型的默认数字区域为0100默认步进值为1默认初始值为最大值与最小值的和的一半input新增输入类型（4）range类型的主要属性属性属性值值描述描述maxnumber 规定允许的最大值minnumber 规定允许的最小值ste
8、pnumber规定合法的数字间隔（如果 step=3，则合法的数是 -3,0,3,6 等）value number 规定默认值input新增输入类型（4）range类型HTML5中当一个input元素的类型设置为range时，将在页面中生成一个数字区域选择控件，用于设置选择区域信息。Range类型显示为滑动条。Range类型的默认数字区域为0100默认步进值为1默认初始值为最大值与最小值的和的一半input新增输入类型（6）url类型HTML5中input元素的类型设置为url时，表示该input元素将生成一个只允许输入网址格式字符串的输入框。当页面加载时，该input元素对应文本框与其他类型
9、文本框显示效果相同，但是仅限于输入网址格式的字符串。当表单提交时，将会自动检测输入内容，如果用户输入非网址格式字符串，将给出错误提示。不检测域名的正确性。input新增输入类型浏览器支持只有Opera和Chrome几乎支持所有input新输入类型多行文本框textarea由行数rows和列数cols来决定多行文本框的大小下拉列表框select optionvalue属性设置列表项的值，selected属性设置默认选择项本章实训实现以下表单的制作：新增的HTML5标签-多媒体标签多媒体交互标签标记定义一个视频标记定义音频内容标记定义媒体资源标记定义画布标记定义外部的可交互的内容或插件比如flas
10、hHTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。HTML5支持的格式HTML5能在完全脱离插件的情况下播放音视频，但是不是所有格式都支持。HTML5支持的视频格式：Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件WebM=带有VP8视频编码+Vorbis音频编码的WebM格式的使用您的浏览器暂不支持video标签。播放视频您的浏览器暂不支持video标签。播放视频Video的常见属性属性属性值值描述描述autoplayautoplay视频就绪自动
11、播放controlscontrols向用户显示播放控件widthpixels(像素)设置播放器宽度heightpixels(像素)设置播放器高度looploop播放完是否继续播放该视频，循环播放preloadproload是否等加载完再播放srcurl视频url地址posterImgurl加载等待的画面图片autobufferautobuffer设置为浏览器缓冲方式，不设置autopaly才有效Video的API方法Video的API属性属性属性说明说明audioTracks返回可用的音轨列表（MultipleTrackList对象）autoplay媒体加载后自动播放buffered返回缓冲部
12、件的时间范围(TimeRanges对象)controller返回当前的媒体控制器（MediaController对象）controls显示播控控件crossOriginCORS设置currentSrc返回当前媒体的URLcurrentTime当前播放的时间，单位秒(快进快退10秒)defaultMuted缺省是否静音defaultPlaybackRate播控的缺省倍速属性属性说明说明duration返回媒体的播放总时长，单位秒ended返回当前播放是否结束标志error返回当前播放的错误状态initialTime返回初始播放的位置loop是否循环播放mediaGroup当前音视频所属媒体组(用
13、来链接多个音视频标签)muted是否静音networkState返回当前网络状态paused是否暂停playbackRate播放的倍速(加速、减速播放)played当前播放部件已经播放的时间范围(TimeRanges对象)preload页面加载时是否同时加载音视频readyState返回当前的准备状态seekable返回当前可跳转部件的时间范围(TimeRanges对象)Video的API属性属性属性说明说明seeking返回用户是否做了跳转操作src当前音视频源的URLstartOffsetTime返回当前的时间偏移(Date对象)textTracks返回可用的文本轨迹(TextTrackL
14、ist对象)videoTracks返回可用的视频轨迹(VideoTrackList对象)volume音量值的使用您的浏览器暂不支持audio标签。您的浏览器暂不支持audio标签。audio的常见属性属性属性值值描述描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。srcurl要播放的音频的URL。常用标记总结htmlheadbodytitledivbrinputselectatextareatablethtrtdimgulolliph1videoembedoptionspanhr
