search

博客列表 >HTML 用户表单

HTML 用户表单

Giesen?
Giesen?原创
2021年07月17日 20:57:42580浏览

用户表单注册

  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.     <link rel="stylesheet" href="zycss/zy.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 页眉 -->
  12.     <div id="header">
  13.       <header class="zc">用户注册表</header>
  14.     </div>
  15.     <div id="container">
  16.       <!-- 左边栏 -->
  17.       <aside class="left"></aside>
  18.       <!-- 中间栏 -->
  19.       <main class="content">
  20.         <form class="bd" action="" method="get" onsbmit="return false">
  21.           <!-- 用户注册 账号 密码 邮箱 文本框 input标签 -->
  22.           <fieldset>
  23.             <legend>必填项</legend>
  25.             <div>
  26.               <label for="username"> 账号：</label>
  28.               <input
  29.                 type="text"
  30.                 id="username"
  31.                 name="username"
  32.                 required
  33.                 autofocus
  34.                 placeholder="不得少于6位"
  35.               />
  36.             </div>
  37.             <div>
  38.               <label for="emil">邮箱：</label>
  39.               <input
  40.                 type="email"
  41.                 name="email"
  42.                 id="email"
  43.                 required
  44.                 placeholder="ass@email.com"
  45.               />
  46.             </div>
  48.             <div>
  49.               <label for="psw"> 密码：</label>
  50.               <input
  51.                 type="password"
  52.                 id="psw"
  53.                 name="psw"
  54.                 required
  55.                 placeholder="建议密码包含大小写"
  56.               />
  57.             </div>
  58.           </fieldset>
  60.           <!-- 性别单选按钮 -->
  61.           <div>
  62.             <!-- 单选按钮 -->
  63.             <label for="secret">性别</label>
  64.             <input type="radio" name="gender" value="nan" /><label for=""
  65.               >男</label
  66.             >
  67.             <input type="radio" name="gender" value="nue" /><label for=""
  68.               >女</label
  69.             >
  70.             <input
  71.               type="radio"
  72.               name="gender"
  73.               value="secret"
  74.               checked
  75.               id="secret"
  76.             /><label for="">保密</label>
  77.           </div>
  78.           <div class="Habby">
  79.             <!-- 复选框  input type="checkbox"-->
  80.             <!-- 所有复选框的name属性标签必须写成数组格式 -->
  81.             <label for="game">爱好</label>
  82.             <input type="checkbox" name="Habby[]" id="game" checked /><label for="game">
  83.               游戏</label
  84.             >
  85.             <input type="checkbox" name="Habby[]" id="film" /><label for="film">
  86.               电影</label
  87.             >
  88.             <input type="checkbox" name="Habby[]" id="music" /><label for="music">
  89.               音乐</label
  90.             >
  91.             <input type="checkbox" name="Habby[]" id="read" /><label for="read">
  92.               阅读</label
  93.             >
  94.             <!-- input标签中 添加checked 属性则默认选中 -->
  95.           </div>
  97.           <div class="school">
  98.             <!-- 下拉列表 -->
  99.             <label for="">所在的学校:</label>
  100.             <select name="school" id="">
  101.               <option value="1">深圳大学</option>
  102.               <option value="1">北京大学</option>
  103.               <option value="1">清华大学</option>
  104.             </select>
  105.           </div>
  106.           <div>
  107.             <!-- 自定义下拉列表, select + input = datalist -->
  108.             <label for="">所属的社团:</label>
  109.             <input type="search" name="societies" list="societies" />
  110.             <datalist id="societies">
  111.               <option value="街舞社"></option>
  112.               <option value="魔术社"></option>
  113.               <option value="模特社"></option>
  114.             </datalist>
  115.           </div>
  116.           <div>
  117.             <button>提交</button>
  118.           </div>
  119.         </form>
  120.       </main>
  121.       <!-- 右边栏 -->
  122.       <aside class="right"></aside>
  123.     </div>
  125.     <!-- 页脚 -->
  126.     <footer class="yw">备注：请大家尽快注册,明天下午6点之前完成</footer>
  127.   </body>
  128. </html>

CSS样式表

zy.css

  1. @import url(main.css);
  2. @import url(footer.css);
  3. @import url(header.css);

main.css

  1. #container {
  2.     margin: 5px 0;
  4.     display: flex;
  5.     justify-content: center;
  6. }
  7. #container .left,
  8. #container .right {
  9.     min-width: 40%;
  10.     min-height: 600px;
  11. }
  12. #container .content {
  13.     flex: 1;
  14.     margin: 0 5px; 
  15. }
  16. #container div{
  18.  text-align: left;
  19. }
  20. /* 使用上下文选择器 对下拉框选择 */
  21. .school>select{
  22.     width: 180px;
  23. }
  24. .bd{
  25.   display:grid;
  26.   gap: 5em;
  28. }

header.css

  1. .zc{
  2. width: 100%;
  3. vertical-align: middle;
  4. text-align: center;
  5. font-size: 40px;
  6. }
  1. .yw{
  2.     width: 100%;
  3.     vertical-align: middle;
  4.     text-align: center;
  5.     font-size: 40px;
  6.     }

上下文选择器实例

  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>Document</title>
  8.     <style>
  9.         /* 后代选择器 子子孙孙都会选中 */
  10.     .sg li{
  11.     background-color: aquamarine;
  12.     }
  13.    .sg>li{
  14.        background-color: blue;
  15.    }
  16.    .cm+li{
  17.     background-color: blueviolet;
  18.    }     
  19.    .cm~li{
  20.        background-color: brown;
  21.    }
  22.     </style>
  23. </head>
  24. <body>
  25. <ul class="sg">
  26.   <li>苹果
  27.     <ul>
  28.         <li>大苹果</li>
  29.         <li>小苹果</li>
  30.     </ul>
  31.   </li>
  33.   <li>香蕉</li>
  34.   <li>西瓜</li>
  35.   <li class="cm">草莓</li>
  36.   <li>樱桃</li>
  37.   <li>龙眼</li>
  39. </ul>
  41. </body>
  42. </html>

总结

  • 学习了Form标签和input标签的应用，单选和多选框，下拉框和自定义下拉框的应用，结合前面所学的元素布局以及CSS的模块化如何应用在案例中

  • 熟悉了CSS的标签，属性和上下文选择器

上一条：购物车效果实现下一条：轮播图实现
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多