一次搞定注册表单常用元素与属性【附会员注册html实例】

表单在网站中是经常用到的，特别是在用户注册方面，是必不可少的，我把表单元素及其常用的属性都用一个会员注册的表单写在一起了，具体如下所示

展示效果（样式省略未写）：

代码部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>会员注册页面</title>
  </head>
  <body>
    <div
      class="container"
      style="width: 400px; height: auto; margin: 50px auto"
    >
      <h3>会员注册</h3>
      <form action="check.php" method="POST" enctype="multipart/form-data">
        <label for="username">用户名：</label>
        <input
          type="text"
          id="username"
          name="username"
          value=""
          placeholder="至少6位"
          autofocus
          required
        /><br />
        <label for="">性别：</label>
        <input type="radio" id="male" name="gender" value="male" /><label
          for="male"
          >男</label
        >
        <input type="radio" id="female" name="gender" value="female" /><label
          for="female"
          >女</label
        >
        <input
          type="radio"
          id="secret"
          name="gender"
          value="secret"
          checked
        /><label for="secret">保密</label><br />
        <label for="email">邮箱地址：</label>
        <input
          type="email"
          id="email"
          name="email"
          value=""
          placeholder="123456@qq.com"
          required
        /><br />
        <label for="user_url">你的网站：</label>
        <input
          type="url"
          id="user_url"
          name="user_url"
          value=""
          placeholder="https://www.baidu.com"
        />
        <br />
        <label for="hobby">你的爱好</label>
        <input type="checkbox" id="movie" name="hobby[]" value="movie" /><label
          for="movie"
          >看电影</label
        >
        <input
          type="checkbox"
          id="coding"
          name="hobby[]"
          value="coding"
        /><label for="coding">敲代码</label>
        <input type="checkbox" id="travel" name="hobby[]" value="travel" /><label
          for=travel""
          >旅游</label
        >
        <input type="checkbox" id="shoot" name="hobby[]" value="shoot" /><label
          for="shoot"
          >旅游</label
        >
        <br />
        <label for="lovecolor">喜欢的颜色：</label>
        <input type="color" id="lovecolor" name="lovecolor" value="" required />
        <br />
        <label for="bday">你的生日：</label>
        <input type="date" id="bday" name="bday" value="" required />
        <br />
        <label for="usrtel">你的电话：</label>
        <input type="tel" id="usrtel" name="usrtel" value="" required />
        <br />
        <label for="edu">你的学历：</label>
        <select name="edu" id="edu">
            <option value="1">高中</option>
            <option value="2">大专</option>
            <option value="3" selected>本科</option>
            <option value="4">研究生</option>
            <option value="5">家里蹲</option>
        </select>
        <br />
        <label for="usrpic">你的头像：</label>
        <input type="hidden" name="MAX_FILE_SIZE" value="1024">
        <input type="file" id="usrpic" name="usrpic" required />
        <br />
        <label for="resume">你的简历：</label>
        <input type="hidden" name="MAX_FILE_SIZE" value="10240">
        <input type="file" id="resume" name="resume" required />
        <br />
        <label for="usersign">个性签名：</label>
        <textarea name="usersign" id="usersign" cols="30" rows="10" placeholder="不要超过50个字！"></textarea>
        <br />
        <label for="pwd1">密码：</label>
        <input
          type="password"
          id="pwd1"
          name="pwd1"
          value=""
          placeholder="至少6位，由数字和字母构成"
          required
        /><br />
        <label for="pwd2">密码确认：</label>
        <input
          type="password"
          id="pwd2"
          name="pwd2"
          value=""
          placeholder="********"
          required
        /><br />
        <button type="reset">重置</button>
        <button>提交</button>
      </form>
    </div>
  </body>
</html>

展示效果（样式省略未写）：

代码部分：

相关文章