简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >form表单，列表，表格实例

form表单，列表，表格实例

樊天龙的博客
樊天龙的博客原创
2020年04月04日 14:20:391039浏览

form表单，列表，表格实例

1.实例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6.     <title>form表单,列表,表格实例</title>
  7. </head>
  8. <body>
  9. <header align="center">
  10.     <nav>
  11.         <a href="">首页</a>
  12.         <a href="">开展业务</a>
  13.         <a href="">公司新闻</a>
  14.         <a href="">关于我们</a>
  15.     </nav>
  16. </header>
  17. <div class="container">
  18.     <main>
  19.         <section>
  20.             <form action="doit.php" name="resgister">
  21.                 <table
  22.                         border="1"
  23.                         width="800"
  24.                         cellpadding="5"
  25.                         cellspacing="0"
  26.                         align="center"
  27.                 >
  28.                     <colgroup>
  29.                         <col span="2" bgcolor="wheat">
  30.                         <col bgcolor="orange">
  31.                         <col bgcolor="lightblue">
  32.                         <col bgcolor="lightpink">
  33.                     </colgroup>
  34.                     <caption>
  35.                         <h1>用户注册</h1>
  36.                     </caption>
  37.                     <thead>
  38.                     <tr bgcolor="aqua">
  39.                         <th><label for="username">用户名</label></th>
  40.                         <th><label for="password">密码</label></th>
  41.                         <th><label for="male">性别</label></th>
  42.                         <th><label for="email">邮箱</label></th>
  43.                         <th><label for="programme">爱好</label></th>
  44.                     </tr>
  45.                     </thead>
  46.                     <tbody>
  47.                     <tr>
  48.                         <td>
  49.                             <input
  50.                                     type="text"
  51.                                     name="username"
  52.                                     id="username"
  53.                                     placeholder="请输入用户名"
  54.                                     value="zhangsan"
  55.                                     maxlength="16"
  56.                                     required
  57.                                     autofocus
  58.                                     autocomplete
  59.                             />
  60.                         </td>
  61.                         <td>
  62.                             <input
  63.                                     type="password"
  64.                                     name="password"
  65.                                     id="password"
  66.                                     value="zhangsan001"
  67.                                     required
  68.                                     maxlength="20"
  69.                                     placeholder="请输入密码"
  70.                             />
  71.                         </td>
  72.                         <td>
  73.                             <input type="radio" name="gender" id="male" value="male" checked/>男
  74.                             <input type="radio" name="gender" id="female" value="female"/>女
  75.                         </td>
  76.                         <td>
  77.                             <input
  78.                                     type="email"
  79.                                     name="email"
  80.                                     id="email"
  81.                                     placeholder="请输入邮箱"
  82.                                     value="example@qq.com"
  83.                                     autocomplete
  84.                             />
  85.                         </td>
  86.                         <td>
  87.                             <input type="checkbox" name="hobby[]" id="programme" value="programme"/>编程
  88.                             <input type="checkbox" name="hobby[]" id="sport" value="sport" checked/>运动
  89.                             <input type="checkbox" name="hobby[]" id="reading" value="reading" checked/>读书
  90.                         </td>
  91.                     </tr>
  92.                     <tr bgcolor="scan">
  93.                         <td colspan="5" align="center"><input type="submit" value="注册"></td>
  94.                     </tr>
  95.                     </tbody>
  96.                 </table>
  97.             </form>
  98.         </section>
  99.     </main>
  100.     <aside>
  101.         <ul>
  102.             <li><a href="" target="_blank">关于新冠疫情的工作安排</a></li>
  103.             <li><a href="" target="_blank">清明节放假安排</a></li>
  104.             <li><a href="" target="_blank">php.cn11期线上培训开课啦！</a></li>
  105.         </ul>
  106.     </aside>
  107. </div>
  108. <footer align="center">
  109.     2020©tianlong 版权所有
  110. </footer>
  111. </body>
  112. </html>

2.代码效果

上一条：HTML常用元素的链接、列表、表格、表单小结下一条：前端Emmet插件使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多