search

博客列表 >表单以及选择器

表单以及选择器

杜谦
杜谦原创
2021年07月01日 18:24:14478浏览

制作一个用户注册表单

  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.   </head>
  9.   <body>
  10.     <h3>用户注册界面</h3>
  11.     <form action="1.php" method="GET"></form>
  12.     <div>
  13.       <label for="name">账号:</label>
  14.       <input type="text" name="name" id="name" autofocus required />
  15.     </div>
  17.     <div>
  18.       <label>密码:</label>
  19.       <input type="password" name="paw" id="paw" required />
  20.     </div>
  21.     <div>
  22.       <label for="fruit">水果:</label>
  23.       <input type="radio" name="" id="fruit" /><label>葡萄</label>
  24.       <input type="radio" name="" id="" /><label>香蕉</label>
  25.       <input type="radio" name="" id="" /><label>菠萝</label>
  26.     </div>
  27.     <div>
  28.       <label for="fru">水果:</label>
  29.       <input type="checkbox" name="" id="" /><label>葡萄</label>
  30.       <input type="checkbox" name="" id="" /><label>香蕉</label>
  31.       <input type="checkbox" name="" id="fru" /><label>菠萝</label>
  32.     </div>
  33.     <div>
  34.       <select name="" id="">
  35.         <option value="1">葡萄</option>
  36.         <option value="2" selected>香蕉</option>
  37.         <option value="3">菠萝</option>
  38.       </select>
  39.     </div>
  40.     <button>提交</button>
  41.   </body>
  42. </html>

基本选择器

  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=u, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       ol {
  10.         background-color: rebeccapurple;
  11.       }
  12.       li#apple {
  13.         background-color: rosybrown;
  14.       }
  15.       li.banana {
  16.         background-color: black;
  17.       }
  18.       li[id="pt"] {
  19.         background-color: chartreuse;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <ol>
  25.       <li id="apple">苹果</li>
  26.       <li class="banana">香蕉</li>
  27.       <li id="pt">葡萄</li>
  28.       <li>菠菜</li>
  29.       <li>西瓜</li>
  30.     </ol>
  31.   </body>
  32. </html>

上下文选择器

  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=u, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       ol li {
  10.         background-color: chartreuse;
  11.       }
  12.       body > ol > li {
  13.         background-color: chocolate;
  14.       }
  15.       #xg + li {
  16.         background-color: cornflowerblue;
  17.       }
  18.       #bc ~ li {
  19.         background-color: cyan;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <ol>
  25.       <li>苹果</li>
  26.       <li id="xg">香蕉</li>
  27.       <li>葡萄</li>
  29.       <ol>
  30.         <li id="bc">菠菜</li>
  31.         <li>西瓜</li>
  32.         <li>菠菜</li>
  33.       </ol>
  35.       <li>菠菜</li>
  36.       <li>西瓜</li>
  37.     </ol>
  38.   </body>
  39. </html>
上一条：实战简单的注册表单以及选择器的认识下一条：PHP快递查询接口api和快递单号智能判断PHP代码
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议