简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 简单表单与css选择器实战案例
Blogger Information
Blog 4
fans 0
comment 0
visits 2997
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
简单表单与css选择器实战案例
qwq
Original
665 people have browsed it

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

展示图

源码

  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>

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

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！