表单注册

1.用户注册

<title>表单注册</title>
  </head>
  <body>
    <form action="login.php" method="POST">
      <fieldset style="display: inline-grid; gap: 1em">
        <legend>用户注册</legend>

2.用户名

        <div class="username">
          <label for="uneme">用户名:</label>
          <input
            type="text"
            name="username"
            placeholder="username"
            id="uneme"
            required
            autofocus
          />
        </div>

3.邮箱

        <div class="my-email">
          <label for="my-email">邮 箱:</label>
          <input
            type="email"
            name="my_email"
            id="my-email"
            placeholder="A@email.com"
            required
          />
        </div>

4.密码

        <div class="psw">
          <label for="password">密 码:</label>
          <input
            type="password"
            name="password"
            id="psw"
            placeholder="******"
            required
            onkeydown="this.nextElementSibling.disabled=false"
          />
          <button type="button" disabled onclick="showPsw(this,this,form)">
            显示
          </button>
        </div>
        <button type="submit">注册</button>

5.年龄

        <div class="age">
          <label for="age">年龄:</label>
          <input
            type="number"
            name="age"
            id="age"
            value="20"
            min="18"
            max="70"
            step="1"
          />
        </div>

6.生日

        <div class="birthday">
          <label for="birthday">生日</label>
          <input
            type="date"
            name="birthday"
            id="birthday"
            value="1990-01-01"
            min="1949-10-10-01"
            max="2005-01-01"
          />
          <input type="month" />
          <input type="week" />
          <input type="time" />
          <input type="datetime-local" name="" id="" />
        </div>

7.博客


        <div class="url">
          <label for="blog">博客:</label>
          <input type="url" name="blog" id="url" placeholder="https://php.cn" />
        </div>

8.博客

        <div class="color">
          <label for="color">背景:</label>
          <input
            type="color"
            name="bgcolor"
            id="color"
            value="#ffff00"
            onchange="setBgcolor(this,this.form)"
          />
        </div>

9.搜索

        <div class="search">
          <label for="keywords">搜索:</label>
          <input
            type="search"
            name="keywords"
            id="search"
            placeholder="输入关键字"
          />
        </div>

10.头像

        <div class="upload">
          <label for="upload">头像:</label>
          <input
            type="file"
            name="user_pic"
            id="upload"
            accept="image/jpeg,image/png"
          />
          <button type="button" onclick="fileUploads(this.form)">上传</button>
        </div>

11.性别

        <div class="gender">
          <label for="secret">性别:</label>
          <input type="radio" name="gender" value="male" id="male" /><label
            for="male"
            >男</label
          >
          <input type="radio" name="gender" value="female" id="male" /><label
            for="female"
            >女</label
          >
          <input
            type="radio"
            name="gender"
            value="secret"
            id="secret"
            checked
          /><label for="secret">保密</label>
        </div>

12.爱好

        <div class="hobby">
          <label for="hobby">爱好</label>
          <input
            type="checkbox"
            name="hobby"
            value="game"
            id="game"
            checked
          /><label for="game">游戏</label>
          <input
            type="checkbox"
            name="hobby"
            value="trave"
            id="trave"
            checked
          /><label for="trave">旅游</label>
          <input
            type="checkbox"
            name="hobby"
            value="shoot"
            id="shoot"
            checked
          /><label for="shoot">摄影</label>
          <input
            type="checkbox"
            name="hobby"
            value="program"
            id="program"
            checked
          /><label for="program">编程</label>
        </div>
        <div class="edu">
          <label for="edu">学历:</label>
          <select name="edu" id="esu" form="">
            <option value="" selected disabled>--请选择--</option>
            <option value="0">文盲</option>
            <optgroup label="义务教育">
              <option value="1">小学</option>
              <option value="2">初中</option>
              <option value="3">高中</option>
            </optgroup>
            <optgroup label="高等教育">
              <option value="4">专科</option>
              <option value="5">本科</option>
              <option value="6">硕士</option>
              <option value="7">博士</option>
            </optgroup>
          </select>
        </div>

13.语言

        <div class="like">
          <label for="keyword">语言:</label>
          <input type="search" name="language" list="details" id="keyword" />
          <datalist id="details">
            <option value="html">html</option>
            <option value="css">css</option>
            <option value="js">js</option>
            <option value="php">php</option>
            <option value="vue">vue</option>
            <option value="node">node</option>
          </datalist>
        </div>

14.备注

        <div>
          <label for="comment">备注:</label>
          <textarea
            name="comment"
            id="comment"
            cols="30"
            rows="5"
            maxlength="200"
            style="resize: none"

1-17作业

表单注册

1.用户注册

2.用户名

3.邮箱

4.密码

5.年龄

6.生日

7.博客

8.博客

9.搜索

10.头像

11.性别

12.爱好

13.语言

14.备注

相关文章