我的HTML笔记（四）

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     范围&emsp;<input type="range" min="0" max="10" value="0"><br/><br/>
 39 
 40     <!-- 搜索框     -->
 41     搜索框&emsp;<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="重写"/>&emsp;&emsp;
 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>
View Code

 

 

下面是显示出来以后的效果。

<!doctype html>上传


 

 

 

 

 

 

 

 

 

选取颜色　　<!--系统自带-->

 

 

 

 

 

 

 

 

 

显示年月日

 

 

 

 

 

 

 

 

 





 

 

 

 

 

 

 

 

 



 

 

 

 

 

 

 

 

 



 

 

 

 

 

 

 

 

 



 

 

 

 

 

 

 

 

 

¥

 

 

 

 

 

 

 

 

 

范围 　　<!--可自己设置范围-->

 

 

 

 

 

 

 

 

 

搜索框 

 

 

 

 

 

 

 

 

 



 

 

 

 

 

 

 

 

 

 



 

 

 

 

 

 

 

 

 

用户名：






  

 

posted @ 2016-08-07 09:00  _Aeneas  阅读(171)  评论(0)  编辑  收藏  举报