1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html" /> 5 <meta name="author" content="Prince" /> 6 7 <title>form</title> 8 </head> 9 10 <body> 11 <form action="http://localhost/test.php" method="post" id="register"></form> 12 <input type="text" name="user" value="" form="register"/> 13 <input type="password" name="pwd" value="" form="register" /> 14 <select name="year" form="register"> 15 <option value="1970">1970</option> 16 <option value="1980">1980</option> 17 <option value="1990">1990</option> 18 </select> 19 <input type="submit" value="注册" form="register"/> 20 21 <hr /> 22 dfd：<input type="text" name="tt" pattern="d{3}" value="" form="register"/> 23 24 邮箱：<input type="email" name="youxinag" value="" placeholder="这是默认值" autofocus="autofocus" form="register" required="required" /><br /> 25 地址：<input type="url" name="url" form="register" form="register"/> 26 DATE:<input type="date" name="riqi" value="" form="register"/><br /> 27 TIME:<input type="time" name="shijian" value=""/> 28 MONTH:<input type="month" name="yue" value="" /> 29 周：<input type="week" name="zhou" value="" /> 30 数字：<input type="number" name="suzhi" value="" form="register" /><br /> 31 滑动条<input type="range" name="suzhi" value="" form="register" max="10" step="2"/> 32 搜索 :<input type="search" name="huadong" value="" form="register" results="n"/> 33 颜色：<input type="color" name="huadong" form="register"/><br /> 34 35 <hr /> 36 自动填充表单<br/> 37 <input type="text" name="auto" value="" list="movie" /> 38 <datalist id="movie"> 39 <option>人生的美好</option> 40 <option>人的高兴</option> 41 <option>太开心了</option> 42 </datalist> 43 <hr /> 44 输出表单output 45 <form action="" method="post" oninput="result.value=parseInt(no1.value*no2.value)"> 46 <input type="number" name="no1" value=""/> 47 <input type="number" name="no2" value=""/> 48 <output name="result" ></output> 49 </form> 50 <hr />
今天学生了html5的第一课一些常用的input 感谢网友
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html" /> 5 <meta name="author" content="Prince" /> 6 7 <title>video</title> 8 </head> 9 10 <body> 11 <video src="movie.ogg" width="500" height="500" controls="controls"> 12 您的浏览器不支持 13 </video> 14 15 <hr /> 16 多资料的视频播放 17 <video controls="controls" loop="loop" poster="PLMM.jpg"> 18 19 <source src="movie.ogg" type="Vieo/ogg"/> 20 <source src="movie.webm" type="Video/webm"/> 21 您的浏览器不支持视频标签，还不赶快升级 22 </video> 23 24 <hr /> 25 26 使用以下Video标签的API<br /> 27 <video src="movie.webm" id="video" controls="controls"> 28 您的浏览器不支持 29 </video> 30 31 <button onclick="bofang()">播放</button> 32 <button onclick="zanting()">暂停</button> 33 34 35 <script> 36 //获得对应的video标签 37 var videmo=document.getElementById('video'); 38 39 function bofang() 40 { 41 videmo.play(); 42 } 43 44 function zanting() 45 { 46 videmo.pause(); 47 } 48 49 50 51 </script> 52 <hr /> 53 音频标签的使用<br /> 54 <audio src="我的好兄弟.mp3" controls="controls"> 55 您的老牛已经接不动破车了 56 </audio> 57 58 59 </body> 60 </html>