HTML上机实验(实验一).pdfVIP

武汉轻工大学 《HTML5》 实验报告 题 目：H5 的基本编程 2017 年 5 月 7 日 实验 1 H5 的基本编程 一、 实验目的： 1、熟悉集成开发环境 (IDE) 2、熟悉 HTML5 新增标记 3、熟悉 HTML5 页面架构 4、掌握 HTML5 表单 5、掌握 JS 的基本操作 二、 实验任务： 1. 表单格式验证，利用 H5 提供的验证功能实现对表单的验证。 2. 编写一个注册页面，界面类似如下所示 ,可以增加更多的项目 ,例如 ,可 以包括用户名 ,邮箱,密码 ,确认密码 ,性别 ,出生年月 ,住址 ,电话,身份证号 ,爱 好,等等。 3. 编写一个 DIY 视频播放器。可以对播放器实现播放，暂停，快播，慢 播，音量调节，显示播放进度等功能。 三、 试验步骤 任务 1 代码 ： ! DOCTYPEhtml html meta charset = gb 2312 / script functioncheckEmail () { var name = document.getElementById( txtUserName ); var result = document.getElementById( result ); var flag = name.checkValidity(); if(flag) { result.innerHTML = 用户名格式正确 ; } else { result.innerHTML = 用户名格式不正确 ; } } / script form fieldset legend 请输入您的用户名和密码信息 /legend 用户名 : input type= text id= txtUserName onblur= checkEmail () pattern= ^[ a-zA-Z 0-9]{5,}$ span id = result / span br 密码： input type= password id= txtPassword / fieldset / form / html 任务 1 实验截图： 任务 2 代码： !DOCTYPE html html head meta charset=UTF-8 title/title script functioncheckEmail() { var name = document.getElementById(txtUserName); var result = document.getElementById(result); var flag = name.c