表格综合案例

Posted on 2022-01-25 15:26  AcTourist  阅读(102)  评论(0)    收藏  举报

一、目标实物图

 

二、知识点

　　1.表格<table>

　　2.<input>

　　3.<select>下拉选项

　　4.<ul>

三、重点难点分析

　　1.先创建一个table 把页面分成两边，也可以加个borde="1"把边框显示出来

 

 

 

　　2.下拉选项

　　标准格式：

　　<select name="" size="" multiple>

　　<option value="" selected>....</option>

　　<option>....</option>

　　</select>

　　name属性定义选择列表的名称，size属性定义选择列表的行数，multiple属性表示可以多选，如果都不设置的话，都为默认值，只能单选只有一行;value属性定义选择项的值，selected属性表示默认已经选择本选项。

　　3.多行文本框标记

　　<testarea name="" cols="" rows="" wrap=""></textarea>

　　name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称，cols属性定义多行文本框的宽度，单位是单个字符宽度，rows属性定义多行文本框的高度，单位是个字符高度，wrap属性定义输入内容大于文本域是显示的方式。

　　4.单选按钮

　　<input type="radio" name="" value="">

　　type="radio"是定义单选按钮，单选按钮都是以组为单位使用，在同一组中的单选项都必须用同一个名称；value属性定义单选按钮的值，在用一组中它们的阈值必须是不同。

　　5.复选框

　　<input type="checkbox" name="" value="">

　　type="checkbox"定义复选框,name属性定义复选框的名称，在同一组中，必须用同一个名称。

四、代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>注册页面</title>
  8 </head>
  9 <body>
 10     <h4>青春不常在，抓紧谈恋爱</h4>
 11     <table width="500" border="1" >
 12         <!-- 第一行 -->
 13         <tr>
 14             <td>性别：</td>
 15             <td>
 16                 <input type="radio" name="sex">男
 17                 <input type="radio" name="sex">女
 18             </td>
 19         </tr>
 20         <!-- 第二行 -->
 21         <tr>
 22             <td>生日：</td>
 23             <td>
 24                 <!-- 年份 -->
 25                     <select>
 26                         <option>--请选择年份--</option>
 27                         <option>2000</option>
 28                         <option>2001</option>
 29                         <option>2002</option>
 30                     </select>
 31                 <!-- 月份 -->
 32                     <select>
 33                         <option>--请选择月份--</option>
 34                         <option>1</option>
 35                         <option>2</option>
 36                         <option>3</option>
 37                     </select>
 38                 <!-- 日 -->
 39                     <select>
 40                         <option>--请选择日份--</option>
 41                         <option>1</option>
 42                         <option>2</option>
 43                         <option>3</option>
 44                     </select>
 45             </td>
 46         </tr>
 47         <!-- 第三行 -->
 48         <tr>
 49             <td>所在地区：</td>
 50             <td>
 51                 <input type="text" name="dis" size="30" maxlength="30"> 
 52             </td>
 53         </tr>
 54         <!-- 第四行 -->
 55         <tr>
 56             <td>婚姻状况</td>
 57             <td>
 58                 <input type="radio" name="hy">未婚
 59                 <input type="radio" name="hy">已婚
 60                 <input type="radio" name="hy">离婚
 61             </td>
 62         </tr>
 63         <!-- 第五行 -->
 64         <tr>
 65             <td>学历</td>
 66             <td>
 67                 <select>
 68                     <option>--请选择--</option>
 69                     <option>无</option>
 70                     <option>小学</option>
 71                     <option>初中</option>
 72                     <option>高中</option>
 73                     <option>本科</option>
 74                     <option>硕士</option>
 75                     <option>博士</option>
 76                 </select>
 77             </td>
 78         </tr>
 79         <!-- 第六行 -->
 80         <tr>
 81             <td>喜欢的类型</td>
 82             <td>
 83                 <input type="checkbox">可爱的
 84                 <input type="checkbox">性感的
 85                 <input type="checkbox">都喜欢
 86             </td>
 87         </tr>
 88         <!-- 第七行 -->
 89         <tr>
 90             <td>自我介绍</td>
 91             <td>
 92                 <textarea cols="50" rows="5"></textarea>
 93                 <br>
 94                 <input type="submit" value="免费注册">
 95                 <br>
 96                 <input type="checkbox" checked>我同意注册条款和会员加入标准
 97                 <br>
 98                 <a href="#">我是会员，立即登入</a>
 99             </td>
100         </tr>
101         <!-- 第八行 -->
102         <tr>
103             <td></td>
104             <td>
105                 <h5>我承若</h5>
106                 <ul>
107                     <li>年满18周岁</li>
108                     <li>抱着严肃的态度</li>
109                     <li>真诚寻找另一半</li>
110                 </ul>
111             </td>
112         </tr>
113     </table>
114     
115 </body>
116 </html>