Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单实战之用户注册
Blogger Information
Blog 28
fans 0
comment 0
visits 12959
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单实战之用户注册
手机用户1594223549
Original
436 people have browsed it

# 1.输出结果

2.代码部分

  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>表单实战之用户注册</title>
  8.   </head>
  10. <body>
  11.     <h2 >用户注册信息</h2>
  12.     <form action="register.php" method="POST" enctype="multipart/form-data" target="_blank" id="register" />
  13.     <fieldset>
  14.         <!-- ! 注册信息 -->
  15.         <legend>注册信息</legend>
  17.         <!-- ! 1.用户名 -->
  18.         <div class="username">
  19.             <label for="myname">用户名:</label>
  20.             <input 
  21.               type="text"
  22.               id="myame"
  23.               name="username"
  24.               value=""
  25.               placeholder="请输入您的用户名"
  26.               required
  27.             />
  28.         </div>
  30.         <!-- ! 2.密码 -->
  31.         <div class="password">
  32.             <label for="paword">密&emsp;码:</label>
  33.             <input 
  34.               type="password"
  35.               id="paword"
  36.               name="password"
  37.               value=""
  38.               placeholder="请输入您的密码"
  39.               required
  40.             />
  41.         </div>
  43.         <!-- ! 3.email -->
  44.         <div class="email">
  45.             <label for="myemail">邮&emsp;箱:</label>
  46.             <input 
  47.               type="email"
  48.               id="myemail"
  49.               name="email"
  50.               value=""
  51.               placeholder="XXXX@163.com"
  52.             />
  53.         </div>
  55.         <!-- ! 4.博客 -->
  56.         <div class="blog">
  57.             <label for="myblog">博&emsp;客:</label>
  58.             <input 
  59.               type="url"
  60.               id="myblog"
  61.               name="blog"
  62.               value=""
  63.               placeholder="http://"
  64.             />
  65.         </div>
  67.         <!-- ! 5.年龄 -->
  68.         <div class="age">
  69.             <label for="myage">年&emsp;龄:</label>
  70.             <input 
  71.               type="number"
  72.               id="myage"
  73.               name="age"
  74.               value="18"
  75.               min="18"
  76.               max="80"
  77.               step="2"
  78.             />岁
  79.         </div>
  81.         <!-- ! 6.生日 -->
  82.         <div class="birthday">
  83.             <label for="mybirthday">生&emsp;日:</label>
  84.             <input 
  85.               type="date"
  86.               id="mybirthday"
  87.               name="birthday"
  88.               value="2022-10-19"
  89.               min="1940-05-01"
  90.               max="2022-10-18"
  91.         </div>
  93.         <!-- ! 7.性别 -->
  94.         <div class="gender">
  95.             <label for="secret">性&emsp;别:</label>
  96.             <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
  97.             <input type="radio" name="gender" value="female" id="female" ><label for="female">女</label>
  98.             <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">保密</label>
  99.          </div>
  101.         <!-- ! 8.爱好 -->
  102.         <div class="hobby">
  103.             <label>爱&emsp;好:</label>
  104.             <input type="checkbox" name="hobby[]" value="music" id="music" checked><label for="music">音乐</label>
  105.             <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label>
  106.             <input type="checkbox" name="hobby[]" value="trave" id="trave"><label for="trave">旅游</label>
  107.             <input type="checkbox" name="hobby[]" value="sleep" id="sleep"><label for="sleep">睡觉</label>
  108.         </div>
  110.         <!-- ! 9.学历 -->
  111.         <div class="edu">
  112.             <label for="edu">学&emsp;历:</label>
  113.             <select name="edu" id="edu" form="">     
  114.               <option value="" selected disabled>--请选择--</option>
  115.               <option value="0">文盲</option>
  116.               <optgroup label="义务教育">
  117.                  <option value="1">小学</option>
  118.               <option value="2">初中</option>
  119.               <option value="3">高中</option>
  120.               </optgroup>
  121.              <optgroup label="高等教育">
  122.                <option value="4">专科</option>
  123.               <option value="5">本科</option>
  124.               <option value="6">硕士</option>
  125.               <option value="7">博士</option>
  126.              </optgroup>
  127.             </select>
  128.           </div>
  130.         <!-- ! 10.头像 -->
  131.         <div class="upload" >
  132.             <label for="upload">头&emsp;像:</label>
  133.             <input type="file" name="user_pic" id="upload" />
  134.             <button type="button">上传照片</button>
  135.        </div>
  137.         <!-- ! 11.自我评价 -->
  138.         <div>
  139.             <label for="comment">自我评价:</label></br>
  140.             <textarea name="comment" id="comment" cols="28" rows="4" maxlength="300" style="resize: none" placeholder="请写一个不少于50字的自我评价"></textarea>
  141.         </div>
  142.           <button type="submit">立即提交</button>
  143.     </fieldset>
  144.    </form>   
  145. </body>
  146. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：继续加油,完成的不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post