Community Learn Tools Library Leisure
search
English
Home > List of blog posts > php.cn_week1_day2 作业提交【表格与表单】
Blogger Information
Blog 16
fans 0
comment 0
visits 15851
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
php.cn_week1_day2 作业提交【表格与表单】
Allen在php中文网的学习笔记
Original
755 people have browsed it

表格作业

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表格作业</title>
  7.   </head>
  8.   <body>
  9.     <!-- border 设置边框=1 -->
  10.     <table border="1">
  11.       <!-- 为每一列设置颜色 -->
  12.       <colgroup>
  13.         <col />
  14.         <!-- span 本例连同下一列 共同改变颜色 -->
  15.         <col bgcolor="yellow"" span="6" />
  16.         <col />
  17.         <col />
  18.         <col />
  19.         <col />
  20.         <col />
  21.         <col />
  22.       </colgroup>
  23.       <!-- 表格标题 -->
  24.       <caption>
  25.         服务器统计演示表
  26.       </caption>
  27.       <thead>
  28.         <!-- 表头 -->
  29.         <tr>
  30.           <!-- 用th自动加粗居中 -->
  31.           <th>商家</th>
  32.           <th>地区</th>
  33.           <th>IP</th>
  34.           <th>CPU</th>
  35.           <th>RAM</th>
  36.           <th>带宽</th>
  37.           <th>流量</th>
  38.           <th>价格</th>
  39.         </tr>
  40.       </thead>
  41.       <tbody>
  42.         <!-- 主体 -->
  43.         <tr>
  44.           <td>vulter</td>
  45.           <td>JP</td>
  46.           <td>127.0.0.1</td>
  47.           <!-- 垂直合并 -->
  48.           <td rowspan="3">1Core</td>
  49.           <td rowspan="3">1024M</td>
  50.           <td rowspan="3">1Gbps</td>
  51.           <td rowspan="2">1024G</td>
  52.           <td>5$</td>
  53.         </tr>
  54.         <tr>
  55.           <td>cloudcone</td>
  56.           <td>US</td>
  57.           <td>127.0.0.1</td>
  58.           <!-- <td>1Core</td> -->
  59.           <!-- <td>1024M</td> -->
  60.           <!-- <td>1Gbps</td> -->
  61.           <!-- <td>1024G</td> -->
  62.           <td>3.47$</td>
  63.         </tr>
  64.         <tr>
  65.           <td>BandwaHost</td>
  66.           <td>HK</td>
  67.           <td>127.0.0.1</td>
  68.           <!-- <td>1Core</td> -->
  69.           <!-- <td>1024M</td> -->
  70.           <!-- <td>1Gbps</td> -->
  71.           <td>300G</td>
  72.           <td>89$</td>
  73.         </tr>
  74.         <tr>
  75.           <td>17IDC</td>
  76.           <td>CN</td>
  77.           <td>127.0.0.1</td>
  78.           <td>8Core</td>
  79.           <td>16384M</td>
  80.           <td>100Mbps</td>
  81.           <td>-</td>
  82.           <td>300￥</td>
  83.         </tr>
  84.       </tbody>
  85.       <tfoot>
  86.         <!-- 脚 -->
  87.         <tr>
  88.           <!-- 横向合并 -->
  89.           <td colspan="7">共计</td>
  90.           <td>97.47$+300￥</td>
  91.           <!-- <td></td> -->
  92.           <!-- <td></td> -->
  93.           <!-- <td></td> -->
  94.           <!-- <td></td> -->
  95.           <!-- <td></td> -->
  96.           <!-- <td></td> -->
  97.         </tr>
  98.       </tfoot>
  99.     </table>
  100.   </body>
  101. </html>

效果展示

表单作业

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表单作业</title>
  7.     <style>
  8.       form {
  9.         /* color: red; */
  10.         background-color: rgb(49, 194, 175);
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <form id="form">
  16.       <fieldset>
  17.         <legend>基本信息(必填)</legend>
  18.         <!-- 基本必填信息，用户名|密码 -->
  19.         <div>
  20.           <!-- autofocus 自动聚焦 required 不能为空 -->
  21.           <label for="username">帐号:</label>
  22.           <input
  23.             type="text"
  24.             name="username"
  25.             id="username"
  26.             value=""
  27.             placeholder="不少于6个字符"
  28.             required="required"
  29.             autofocus
  30.           />
  31.         </div>
  32.         <div>
  33.           <label for="password">密码:</label>
  34.           <input
  35.             type="password"
  36.             name="password"
  37.             id="password"
  38.             value=""
  39.             placeholder="不少于6个字符"
  40.             required="required"
  41.           />
  42.         </div>
  43.       </fieldset>
  44.       <fieldset>
  45.         <legend>附加信息(选填)</legend>
  46.         <div>
  47.           <label for="0">性别:</label>
  48.           <!-- 单选按钮的每一个选项控件的name属性的值必须完全一样 -->
  49.           <!-- checked 默认选中 -->
  50.           <input type="radio" name="sex" id="0" checked />
  51.           <label for="0">保密</label>
  52.           <input type="radio" name="sex" id="1" />
  53.           <label for="1">男</label>
  54.           <input type="radio" name="sex" id="2" />
  55.           <label for="2">女</label>
  56.         </div>
  57.         <div>
  58.           <label for="programe">爱好:</label>
  59.           <!-- 复选框 -->
  60.           <!-- 复选框会返回多个值，所以name应该用数组的方式 -->
  61.           <input type="checkbox" name="hobby[]" id="programe" />
  62.           <label for="programe">编程</label>
  63.           <input type="checkbox" name="hobby[]" id="game" />
  64.           <label for="game">游戏</label>
  65.           <input type="checkbox" name="hobby[]" id="book" />
  66.           <label for="book">小说</label>
  67.         </div>
  68.         <div>
  69.           <!-- 下拉控件 -->
  70.           <label for="">学历：</label>
  71.           <!-- multiple 多选 用ctrl 和 shift -->
  72.           <!-- onchange 事件属性，js语句 -->
  73.           <select name="" id="" size="1">
  74.             <!-- selected默认选择 -->
  75.             <option value="0" selected>小学</option>
  76.             <option value="1">初中</option>
  77.             <option value="2">高中</option>
  78.             <option value="3">大学</option>
  79.           </select>
  80.         </div>
  81.         <div>
  82.           <!-- 邮箱文本框 -->
  83.           <label for="email">邮箱:</label>
  84.           <input type="email" name="" id="" placeholder="xxx@xxx.com" />
  85.         </div>
  86.         <div>
  87.           <!-- 数值输入框 -->
  88.           <label for="">年龄:</label>
  89.           <input
  90.             type="number"
  91.             name="age"
  92.             id=""
  93.             min="18"
  94.             max="65"
  95.             step="1"
  96.             value="18"
  97.           />
  98.         </div>
  99.         <div>
  100.           <!-- 日期时间输入框 -->
  101.           <label for="">生日:</label>
  102.           <input type="date" name="" id="" />
  103.         </div>
  104.         <div>
  105.           <!-- 调色板 -->
  106.           <label for="">喜欢的颜色:</label>
  107.           <input type="color" name="" id="" />
  108.         </div>
  110.         <div>
  111.           <!-- 预定义复合框 -->
  112.           <label for="class">报名课程:</label>
  113.           <!-- 将一个单行文本框与一个下拉列表进行绑定 -->
  114.           <input type="text" id="class" list="course" />
  116.           <datalist id="course">
  117.             <option value="php"></option>
  118.             <option value="java"></option>
  119.             <option value="c#"></option>
  120.             <option value="python"></option>
  121.           </datalist>
  122.         </div>
  123.         <!-- 文件域 -->
  124.         <div>
  125.           <label for="upfile">上传头像</label>
  126.           <input type="file" name="" id="upfile" />
  128.           <!-- 限制文件上传大小，这个结果是给服务器做参考的，这个数据不需要也不允许用户提供。 -->
  129.           <!-- 1K=1024byte -->
  130.           <!-- 隐藏域 -->
  131.           <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  132.           <!-- 限制上传文件的大小，如8M -->
  134.           <!-- 用户id -->
  135.           <input type="hidden" name="username" value="1010" />
  136.         </div>
  137.       </fieldset>
  138.     </form>
  139.     <button formmethod="POST" form="form" formaction="/user.php?active=login">
  140.       登录
  141.     </button>
  142.     <button formmethod="GET" form="form" formaction="/user.php?active=register">
  143.       注册
  144.     </button>
  145.   </body>
  146. </html>

演示效果

感想

  1. html5确实是个好东西......很多属性控件能够大大的节约时间。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实我们学的属性还不到一半呢, 虽多常用并不多
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post