0301 form表单、表单控件、【登陆页面】

 1 form表单

　　只有实现了name属性的表单控件才能够进行提交

　　action属性：提交的地址

　　method：提交的方式，get显示提交，post隐式提交

2 表单控件

　　2.1 input标签

　　　　type属性

　　　　　　text：表示文本框

　　　　　　password：表示密码文本框

　　　　　　radio：表示单选框

　　　　　　checkbox：表示多选框

　　　　　　submit：提交按钮

　　　　　　button：普通按钮

　　　　　　reset：重置按钮

　　　　　　hidden：隐藏数据

　　　　name属性：该标签的名字

　　　　value属性：该标签的默认值

　　　　注意：label标签和input标签的配合使用

　　　　input标签的默认选中属性是 checked

　　　　　　checked="checked"

　　2.2 select标签

　　　　select标签的默认选中是 selected

　　　　　　selected="selected"

　　2.3 textarea标签

  1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
  2 <html>
  3 <head>
  4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
  5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
  6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
  7     <title>网页标题</title>
  8     <style>
  9         *{
 10             margin: 0;
 11             padding: 0;
 12         }
 13     </style>
 14 </head>
 15 
 16 <body>
 17    <form action="#" method="post">
 18         账&nbsp;&nbsp;&nbsp;号：<input name="user" type="text" name=""><br /><br />
 19         密&nbsp;&nbsp;&nbsp;码：<input name="password" type="password" name=""><br /><br />
 20         性&nbsp;&nbsp;&nbsp;别：
 21             <input type="radio" id="M" name="gender" value="男" checked="checked"><label for="M">男</label>
 22             <input type="radio" id="F" name="gender" value="女"><label for="F">女</label>
 23             <input type="radio" id="FM" name="gender" value="不告诉你"><label for="FM">不告诉你</label><br /><br />
 24         爱&nbsp;&nbsp;&nbsp;好：
 25             <input type="checkbox" name="habbit" value="basketball" id="basketball" checked="checked"><label for="basketball">篮球</label>
 26             <input type="checkbox" name="habbit" value="rollerskating" id="rollerskating"><label for="rollerskating">轮滑</label><br /><br />
 27         生&nbsp;&nbsp;&nbsp;日：
 28             <select name="year" id="">
 29                 <option value="1990">1990</option>
 30                 <option value="1991">1991</option>
 31                 <option value="1992">1992</option>
 32                 <option selected="selected" value="1993">1993</option>
 33                 <option value="1994">1994</option>
 34                 <option value="1995">1995</option>
 35                 <option value="1996">1996</option>
 36                 <option value="1997">1997</option>
 37                 <option value="1998">1998</option>
 38                 <option value="1999">1999</option>
 39             </select>
 40             年
 41             <select name="month" id="">
 42                 <!-- option["$"]{$}*12 -->
 43                 <option value="1">1</option>
 44                 <option value="2">2</option>
 45                 <option value="3">3</option>
 46                 <option value="4">4</option>
 47                 <option value="5">5</option>
 48                 <option value="6">6</option>
 49                 <option value="7">7</option>
 50                 <option value="8">8</option>
 51                 <option value="9">9</option>
 52                 <option value="10">10</option>
 53                 <option selected="selected" value="11">11</option>
 54                 <option value="12">12</option>
 55             </select>
 56             月
 57             <select name="day" id="">
 58                 <option value="1">1</option>
 59                 <option value="2">2</option>
 60                 <option value="3">3</option>
 61                 <option value="4">4</option>
 62                 <option value="5">5</option>
 63                 <option value="6">6</option>
 64                 <option value="7">7</option>
 65                 <option value="8">8</option>
 66                 <option value="9">9</option>
 67                 <option value="10">10</option>
 68                 <option value="11">11</option>
 69                 <option value="12">12</option>
 70                 <option value="13">13</option>
 71                 <option value="14">14</option>
 72                 <option value="15">15</option>
 73                 <option selected="selected" value="16">16</option>
 74                 <option value="17">17</option>
 75                 <option value="18">18</option>
 76                 <option value="19">19</option>
 77                 <option value="20">20</option>
 78                 <option value="21">21</option>
 79                 <option value="22">22</option>
 80                 <option value="23">23</option>
 81                 <option value="24">24</option>
 82                 <option value="25">25</option>
 83                 <option value="26">26</option>
 84                 <option value="27">27</option>
 85                 <option value="28">28</option>
 86                 <option value="29">29</option>
 87                 <option value="30">30</option>
 88                 <option value="31">31</option>
 89             </select>
 90             日<br /><br />
 91             个人说明：<br />
 92             <textarea name="describe" id="" cols="30" rows="10"></textarea><br />
 93             <input type="submit" value="注册" />
 94             <hr />
 95             <input type="button" value="我是普通按钮" />
 96             <input type="reset" value="我是重置按钮" />
 97             <hr />
 98             <input type="hidden" value="我是隐藏的数据" name="hidden" /> <!-- 在页面不会显示，但是提交后会将数据提交到服务器 -->
 99             <hr />
100             <pre>
101                 &lt;hr /&gt;
102                 &lt;input type="button" value="我是普通按钮" /&gt;
103                 &lt;input type="reset" value="我是重置按钮" /&gt;
104                 &lt;hr /&gt;
105                 &lt;input type="hidden" value="我是隐藏的数据" name="hidden" /&gt;
106             </pre>
107 
108    </form>
109 </body>
110 </html>
本博客源代码

 

3 小练习1

　　写一个表单

　　　　账号、密码、邮箱、手机号、提交按钮、通过post方法进行提交

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title>三少测试网页</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13     </style>
14 </head>
15 
16 <body>
17     <h1>测试页面</h1>
18     <div>
19         <form action="#" method="post">
20             账号：<input type="text" name="user" /><br />
21             密码：<input type="password" name="password" /><br /><br />
22             邮箱：<input type="text" name="email" /><br />
23             手机号：<input type="text" name="phonenumber" /><br /><br />
24             <input type="submit" value="注册">
25             <input type="reset" value="重置">
26         </form>
27     </div>
28 </body>
29 </html>
表单练习源码

4 小练习2

　　写一份试卷

　　待更新...2017年5月10日08:56:34

 

posted @ 2017-05-09 23:08  寻渝记  阅读(212)  评论(0)    收藏  举报