search

博客列表 >简单表单与css选择器实战案例

简单表单与css选择器实战案例

qwq
qwq原创
2021年07月02日 19:57:04666浏览

赶进度简写了，但源码不能减，赶上就好了

展示图

源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.   <!-- 设置背景颜色 -->
  10.   <body bgcolor="skyblue" hight="100%" width="100%">
  11.     <h2>用户名</h2>
  12.     <!-- action是动作，递交给谁 -->
  13.     <!-- method是默认提交方式 -->
  14.     <form
  15.       action="post.php"
  16.       method="GET"
  17.       style="display: grid; gap: 0.5em"
  18.       onsubmit="return false;"
  19.     >
  20.       <fieldset>
  21.         <!-- 表单分组 -->
  22.         <legend>必填项</legend>
  23.         <div>
  24.           <label for="username">帐号</label>
  25.           <input type="text" id="username" name="name" autofocus required
  26.           placeholder="请输入4位-11位的用户名" minlength="4" maxlength="11"
  27.         </div>
  28.         <!-- autofocus获取焦点 -->
  29.         <div>
  30.           <label for="password">密码:</label>
  31.           <input
  32.             type="password"
  33.             id="password"
  34.             name="password"
  35.             required
  36.             placeholder="请输入8-20位的密码"
  37.             minlength="8"
  38.             maxlength="20"
  39.           />
  40.         </div>
  41.         <div>
  42.           <label for="email">邮箱:</label>
  43.           <input
  44.             type="email"
  45.             id="email"
  46.             name="email"
  47.             required
  48.             placeholder="wang@iqwq.cn"
  49.           />
  50.         </div>
  51.       </fieldset>
  52.       <fieldset>
  53.         <!-- 表单再次分组 -->
  54.         <legend>非必填项目</legend>
  55.         <div>
  56.           <!-- radio是单选按钮，所有单选按钮的name值都要一致 -->
  57.           <label for="secret">身材</label>
  58.           <input type="radio" name="gender" value="yes" />
  59.           <label for="">好的</label>
  60.           <input type="radio" name="gender" value="no" />
  61.           <label for="">不好</label>
  62.           <input
  63.             type="radio"
  64.             name="gender"
  65.             value="secret"
  66.             checked
  67.             id="secret"
  68.           />
  69.           <label for="">保密</label>
  70.         </div>
  71.         <!-- checkbox是复选框，所有复选框的name值都要相同 -->
  72.         <div>
  73.           <label>喜欢游戏</label>
  74.           <input type="checkbox" name="game[]" value="wangzhe" checked />
  75.           <label for="wangzhe">王者荣耀</label>
  76.           <input type="checkbox" name="game[]" value="heping" />
  77.           <label for="heping">和平精英</label>
  78.           <input type="checkbox" name="game[]" value="qiuqiu" checked />
  79.           <label for="qiuqiu">球球大作战</label>
  80.           <input type="checkbox" name="game[]" value="feiche" />
  81.           <label for="feiche">QQ飞车</label>
  82.         </div>
  83.         <!-- <select></select>无论多少个值最后只会返回一个值，除非多选,selected下拉框的默认值 -->
  84.         <div>
  85.           <label for="" size="8px">王者段位</label>
  86.           <select name="ranking" id="">
  87.             <option value="1">倔强青铜</option>
  88.             <option value="2">秩序白银</option>
  89.             <option value="3">尊贵铂金</option>
  90.             <option value="4">永恒钻石</option>
  91.             <option value="5">最强王者</option>
  92.             <option value="6">荣耀王者</option>
  93.             <option value="7" selected>深渊王者</option>
  94.             <option value="8">黑洞王者</option>
  95.           </select>
  96.         </div>
  97.         <!-- <datalist>是数据列表格式</datalist> -->
  98.         <!-- list是绑定的id的工具 -->
  99.         <div>
  100.           <label for="">搜索关键字</label>
  101.           <input type="search" name="cearch" list="keywords" />
  102.           <datalist id="keywords">
  103.             <option value="浅忆"></option>
  104.             <option value="浅忆记录"></option>
  105.             <option value="浅忆雅舍"></option>
  106.             <option value="浅忆空间"></option>
  107.             <option value="浅忆笔录"></option>
  108.             <option value="浅忆学的慢"></option>
  109.           </datalist>
  110.         </div>
  111.       </fieldset>
  112.       <button>提交</button>
  113.     </form>
  114.   </body>
  115. </html>

css样式的理解

CSS用于修饰网页

css分为3种样式

  1. 行内样式（内嵌样式）
  2. 内部样式（内联样式）
  3. 外部样式（外联样式）
行内样式（内嵌样式）
例如：

<div style="color:red"></div>

内部样式（内联样式）

例如：
  1. <style>
  2.   bdoy{font-size:14px;} 
  3. </style>

外部样式（外联样式）

例如：

<link type="text/css" rel="stylesheet" href="css文件路径.css"/>

基础的选择器

展示图

源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.   </head>
  9.   <style>
  10.     /* 标签选择器 */
  11.     li {
  12.       background-color: #4b88b8;
  13.     }
  14.     /* 快捷方式id选择器 */
  15.     li#qy2 {
  16.       background-color: #ff0000;
  17.     }
  18.     li[id="qy3"] {
  19.       background-color: chocolate;
  20.     }
  21.     /* 快捷方式class选择器 */
  22.     li.qy4 {
  23.       background-color: chartreuse;
  24.     }
  25.     li[class="qy5"] {
  26.       background-color: chocolate;
  27.     }
  28.   </style>
  29.   <body>
  30.     <ul>
  31.       <li>浅忆好酷1</li>
  32.       <li id="qy2">浅忆好酷2</li>
  33.       <li id="qy3">浅忆好酷3</li>
  34.       <li class="qy4">浅忆好酷4</li>
  35.       <li class="qy5">浅忆好酷5</li>
  36.     </ul>
  37.   </body>
  38. </html>

上下文选择器

展示图

源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.       ul li {
  10.         background-color: red;
  11.       }
  12.       body > ul > li {
  13.         background-color: cyan;
  14.       }
  15.       .tongji + li {
  16.         background: rgb(26, 235, 106);
  17.       }
  18.       .xianglin ~ li {
  19.         background: rgb(172, 235, 26);
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <ul>
  25.       <li>qinayi</li>
  26.       <li class="xianglin">qinayi</li>
  27.       <li>qinayi</li>
  28.       <li>
  29.         qinayi
  30.         <ul>
  31.           <li>浅忆1</li>
  32.           <li>浅忆1</li>
  33.           <li class="tongji">浅忆1</li>
  34.           <li>浅忆1</li>
  35.         </ul>
  36.       </li>
  37.       <li>qinayi</li>
  38.       <li>qinayi</li>
  39.     </ul>
  40.   </body>
  41. </html>

哪里不对请多多指教，感谢老师！！！
勇敢浅忆，不怕困难

上一条：PHP Redis函数查询下一条：表单创建及CSS
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多