简体中文（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

博客列表 >注册表单、基本选择器及上下文选择器

注册表单、基本选择器及上下文选择器

酒馆读书人.
酒馆读书人.原创
2021年07月01日 22:59:57323浏览
  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.     <style>
  9.         .input{
  10.             padding:5px;
  11.         }
  12.         .btn{background: #007aff;color: #fff;border:none;}
  13.         ul li{color:red;}
  14.         .item{color:#007aff;}
  15.         #item2{color:yellow;}
  16.         ul .item3 + li{
  17.             color:blue;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <form action="">
  23.         <div>
  24.             <label for="username">用户名</label>
  25.             <input class="input" type="text" id="username" name="username" placeholder="请输入用户名" autofocus required>
  26.         </div>
  27.         <div>
  28.             <label for="password">密　码</label>
  29.             <input class="input" type="password" id="password" name="password" placeholder="请输入密码" required>
  30.         </div>
  31.         <div>
  32.             <label for="email">邮　箱</label>
  33.             <input class="input" type="email" id="email" name="email" placeholder="请输入邮箱">
  34.         </div>
  35.         <div>
  36.             <label for="aihao">VIP</label>
  37.             <select name="aihao" id="aihao">
  38.                 <option value="1" selected>普通会员</option>
  39.                 <option value="2">至尊会员</option>
  40.             </select>
  41.         </div>
  42.         <div>
  43.             <label for="search">搜索</label>
  44.             <input type="search" name="search" id="search" placeholder="请输入关键词" list="datalist">
  45.             <datalist id="datalist">
  46.                 <option value="html"></option>
  47.                 <option value="js"></option>
  48.                 <option value="jquery"></option>
  49.                 <option value="mysql"></option>
  50.                 <option value="php"></option>
  51.             </datalist>
  52.         </div>
  53.         <div>
  54.             <label for="man">性　别</label>
  55.             <input type="radio" checked name="radio" id="man" value="man"><label for="man">男</label>
  56.             <input type="radio" name="radio" id="woman" value="woman"><label for="women">女</label>
  57.             <input type="radio" name="radio" id="noman" value="noman"><label for="noman">人妖</label>
  58.         </div>
  59.         <div>
  60.             <label for="xq">兴趣</label>
  61.             <input type="checkbox" name="checkbox[]" id="meinv" value="1"><label for="meinv">美女</label>
  62.             <input type="checkbox" name="checkbox[]" id="video" value="2"><label for="video">电影</label>
  63.             <input type="checkbox" name="checkbox[]" id="lvyou" value="3"><label for="lvyou">旅游</label>
  64.             <input type="checkbox" name="checkbox[]" id="game" value="4"><label for="game">游戏</label>
  65.         </div>
  66.         <div>
  67.             <button type="submit" class="btn">注册</button>
  68.         </div>
  69.     </form>
  72.     <div>
  73.         <ul>
  74.             <li class="item">item1</li>
  75.             <li id="item2">item1</li>
  76.             <li class="item3">item1</li>
  77.             <li>item1</li>
  78.             <li>item1</li>
  79.         </ul>
  80.     </div>
  81. </body>
  82. </html>
上一条：前端作业-CSS1下一条：图标使用、盒模型、box-sizing、百分比布局vm vh
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多