8月3日所讲内容，我将所写的Demo全部加了注释，这样可以方便读懂，也为了以后更方便的复习。单个模块的实现很容易，然而将它们综合起来实现某些效果时总会出现各种各样的麻烦，所以就我个人而言，需要更多的去练习和模仿。
以下是代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>上传</title> 6 </head> 7 <body> 8 <form action="" method="post" enctype="multipart/form-data"> 9 <input type="file" name="file" multiple> <!-- multiple为选择多文件 --> 10 <input type="submit" value="提交"> 11 </form><br/> 12 13 <!-- 颜色选择 --> 14 <input type="color"/><br/><br/> 15 16 17 <!-- 日期选择 --> 18 <input type="date"/><br/><br/> 19 <!-- 时间选择 --> 20 <input type="time"/><br/><br/> 21 <input type="datetime-local"><br/><br/> 22 <!-- 周选择框 --> 23 <input type="week"/><br/><br/> 24 <!-- 月选择框 --> 25 <input type="month"/><br/><br/> 26 27 <!-- 邮件 --> 28 <form> 29 <input type="email"/> 30 <input type="submit" value="提交"/> 31 </form><br/><br/> 32 33 <!-- 数字 --> 34 ¥ <input type="number" min="0" max="1000"/><br/><br/> 35 36 37 <!-- 滑动条 --> 38 范围 <input type="range" min="0" max="10" value="0"><br/><br/> 39 40 <!-- 搜索框 --> 41 搜索框 <input type="search"><br/><br/> 42 43 <!-- URL --> 44 <form action=""> 45 <input type="url"> 46 <input type="submit" value="提交"/><br/><br/> 47 </form> 48 49 <!-- autocomplete 自动填充(autocomplete) 自动获取焦点(autofocus)--> 50 <form action=""> 51 <input type="search" name="keywords" autocomplete="on" autofocus> 52 <!-- keywords记录 --> 53 <input type="submit" value="提交"/> 54 </form><br/><br/> 55 56 57 <!-- 提示文本 required--> 58 <form action=""> 59 用户名：<input type="text" required/> 60 <input type="submit" value="提交"/> 61 </form><br/><br/> 62 63 <label for="province">省份</label> 64 <select name="province" id="province"> 65 <option value="">请选择</option> 66 <option value="">广东</option> 67 <option value="" selected>江苏</option> <!-- selected表示设为默认值 --> 68 <option value="">浙江</option> 69 </select> 70 <label for="city">城市</label> 71 <select name="" id="city" multiple size="2" disabled> 72 <!-- multiple控制是否上传多文件，没有它的话在选择的时候只能选一个文件 --> 73 <!-- disabled表示禁用 --> 74 <option value="">请选择</option> 75 <option value="">广州</option> 76 <option value="">南京</option> 77 <option value="">深圳</option> 78 <option value="" selected>杭州</option> 79 </select><br/><br/> 80 81 <!-- textarea 可用于评论、留言等，可用maxlength控制字数，如一般评论不能超150字,就可设maxlength="150"--> 82 <form action=""> 83 <textarea name="comment" id="comment" cols="40" rows="10"></textarea><br/> 84 <input type="reset" value="重写"/>   85 <input type="submit" value="提交"/> 86 </form><br/><br/> 87 88 <!-- 没有下划线的链接 --> 89 <a href="index.html" style="text-decoration:none">这是一个没有下划线的链接</a> 90 <hr/> <!-- <hr/>是下划线 --> 91 <br/> 92 93 <!-- 隐藏域用于在程序发送没有必要让用户看到特定值的时候使用--> 94 <form action="" method="get"> 95 用户名：<input type="text" value="username"> 96 密码：<input type="password" value="passwd"> 97 <input type="hidden" name="city" value="gz"> 98 <input type="submit" value="提交"> 99 </form> 100 101 </body> 102 </html>
下面是显示出来以后的效果。
<!doctype html>上传
选取颜色 <!--系统自带-->
显示年月日
¥
范围 <!--可自己设置范围-->
搜索框