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>

更多相关文章

  1. PHP:【ThinkPHP】=> 通用后台管理，用户名，头像，判断是否为空
  2. 0513会话控制作业
  3. 4-30用户注册界面
  4. php之字符串实战注册页面
  5. jQuery常用操作； jQuery中的$.ajax方法； Vue基本术语与插值语法---
  6. Oracle建立表空间和用户
  7. Linux用户管理误操作处理——未完全删除用户该如何操作【CentOS
  8. html基础：form表单
  9. Safari 浏览器中自动填充用户名和密码功能介绍

随机推荐

  1. Android(安卓)adb shell启动应用程序的方
  2. Sqlite在Android上的一个Bug - 临时文件
  3. android 中targetSdkVersion和与target属
  4. Android 我的 Android Studio 配置文件
  5. android 嵌入服务端页面二 之WebView与页
  6. android 定义手势
  7. PC通过USB连接Android通信（Socket）
  8. android 各系统区别(android 1.5- androi
  9. android 处理鼠标滚轮事件
  10. Android 全屏显示的两种方法