一个实用的表单元素

- 作者：霏梦

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单</title>
    <script>
      function showPwd(ele) {
        document.querySelector("#pwd-1").type = "text";
      }
    </script>
    <style>
        body{
            color: lightsteelblue;
        }
        h3{
            text-align: center;
        }
        form{
            width: 450px;
            margin: 30px auto;
            border-top: 1px solid #aaa;
        }
        form fieldset{
            border: 1px solid lightgreen;
            background-color: lightcyan;
            margin: 10px;
        }
        form fieldset legend{
            background-color:lightcyan;
            color: mediumaquamarine;
            padding: 5px 15px;
            border-radius: 10px;
        }
        form div{
            margin: 10px;
        }
        form p{
            text-align: center;
        }
        input:focus{
            background-color: lightpink;
        }
        form .btn:hover{
            background-color: coral;
            color: white;
            cursor: pointer;
        }
    </style>
  </head>
  <body>
    <h3>用户注册</h3>
    <!-- form+input -->
    <form action="" method="POST">
      <!-- 控件组 --filedse与legend成对出现>
      <fieldset>
        <legend>员工基本信息（必填）</legend>
        <div>
          <label for="username">账号：</label>
          <input
            type="text"
            id="username"
            name="username"
            placeholder="6-15位字符"
            autofocus
            required
          />
        </div>
        <div>
          <label for="email-id">邮箱：</label>
          <input
            type="email"
            name="email"
            id="email-id"
            placeholder="demo
            @example.com"
            required
          />
        </div>
        <div>
          <label for="pwd-1">密码：</label>
          <input
            type="password"
            name="password"
            id="pwd-1"
            placeholder="不少于8位且字母和数字"
          />
          <button onclick="showPwd()" id="btn" type="button">查看密码</button>
        </div>
        <div>
          <label for="pwd-2">确认：</label>
          <input type="password" name="password2" id="pwd-2" />
        </div>
      </fieldset>
      <fieldset>
        <legend>扩展信息（选填）</legend>
        <div>
          <label for="date-id"
            >出生日期： <input type="date" name="birthday" id="date-id"
          /></label>
        </div>
        <div>
          <!-- 单选按妞 -->
          <label>性别：</label>
          <input type="radio" name="male" id="male" /><label for="male"
            >男</label
          >
          <input type="radio" name="female" id="female" /><label for="female"
            >女</label
          >
          <input type="radio" name="secret" id="secret" checked /><label
            for="secret"
            >保密</label
          >
        </div>
        <div>
          <!-- 复选框  laber for与ID必须一致-->
          <label for="programme">我的爱好</label>
          <input
            type="checkbox"
            name="hobby[]"
            id="game"
            value="game"
          /><label></label>
          <input
            type="checkbox"
            name="hobby[]"
            id="shoot"
            value="shoot"
          /><label for="shoot">摄像</label>
          <input
            type="checkbox"
            name="hobby[]"
            id="programme"
            value="programme"
            checked
          /><lable for="programme">编程开发</label>
        </div>
        <div>
            <!-- 选项列表 -->
            <label for="brand">手机品牌</label>
            <input type="search" list="phone" name="brand" id="brand">
            <datalist id="phone">
                <option value="apple"> </option>
                <option value="huawei"> </option>
                <option value="xiaomi"> </option>
                <option value="lenove" label="小米"> </option>
            </datalist>    
        </div>
      </fieldset>
      <fieldset>
          <legend>其它信息</legend>
          <div>
              <label for="file-id">文件上传</label>
              <input type="file" name="filename" id="file-id" accept="image/jpeg,image/jpg,image/png">
          </div>
          <div>
              <label for="area-id">备注</label>
              <textarea name="area" id="area-id" placeholder="请输入你的内容，100字内" cols="30" rows="10">
- 作者：霏梦

相关文章
