Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 一次搞定注册表单常用元素与属性【附会员注册html实例】
Blogger Information
Blog 6
fans 0
comment 0
visits 8305
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
一次搞定注册表单常用元素与属性【附会员注册html实例】
导导的PHP学习笔记
Original
4221 people have browsed it

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

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

代码部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>会员注册页面</title>
  7.   </head>
  8.   <body>
  9.     <div
  10.       class="container"
  11.       style="width: 400px; height: auto; margin: 50px auto"
  12.     >
  13.       <h3>会员注册</h3>
  14.       <form action="check.php" method="POST" enctype="multipart/form-data">
  15.         <label for="username">用户名：</label>
  16.         <input
  17.           type="text"
  18.           id="username"
  19.           name="username"
  20.           value=""
  21.           placeholder="至少6位"
  22.           autofocus
  23.           required
  24.         /><br />
  25.         <label for="">性别：</label>
  26.         <input type="radio" id="male" name="gender" value="male" /><label
  27.           for="male"
  28.           >男</label
  29.         >
  30.         <input type="radio" id="female" name="gender" value="female" /><label
  31.           for="female"
  32.           >女</label
  33.         >
  34.         <input
  35.           type="radio"
  36.           id="secret"
  37.           name="gender"
  38.           value="secret"
  39.           checked
  40.         /><label for="secret">保密</label><br />
  42.         <label for="email">邮箱地址：</label>
  43.         <input
  44.           type="email"
  45.           id="email"
  46.           name="email"
  47.           value=""
  48.           placeholder="123456@qq.com"
  49.           required
  50.         /><br />
  52.         <label for="user_url">你的网站：</label>
  53.         <input
  54.           type="url"
  55.           id="user_url"
  56.           name="user_url"
  57.           value=""
  58.           placeholder="https://www.baidu.com"
  59.         />
  60.         <br />
  61.         <label for="hobby">你的爱好</label>
  62.         <input type="checkbox" id="movie" name="hobby[]" value="movie" /><label
  63.           for="movie"
  64.           >看电影</label
  65.         >
  66.         <input
  67.           type="checkbox"
  68.           id="coding"
  69.           name="hobby[]"
  70.           value="coding"
  71.         /><label for="coding">敲代码</label>
  72.         <input type="checkbox" id="travel" name="hobby[]" value="travel" /><label
  73.           for=travel""
  74.           >旅游</label
  75.         >
  76.         <input type="checkbox" id="shoot" name="hobby[]" value="shoot" /><label
  77.           for="shoot"
  78.           >旅游</label
  79.         >
  81.         <br />
  82.         <label for="lovecolor">喜欢的颜色：</label>
  83.         <input type="color" id="lovecolor" name="lovecolor" value="" required />
  84.         <br />
  86.         <label for="bday">你的生日：</label>
  87.         <input type="date" id="bday" name="bday" value="" required />
  88.         <br />
  90.         <label for="usrtel">你的电话：</label>
  91.         <input type="tel" id="usrtel" name="usrtel" value="" required />
  92.         <br />
  94.         <label for="edu">你的学历：</label>
  95.         <select name="edu" id="edu">
  96.             <option value="1">高中</option>
  97.             <option value="2">大专</option>
  98.             <option value="3" selected>本科</option>
  99.             <option value="4">研究生</option>
  100.             <option value="5">家里蹲</option>
  101.         </select>
  102.         <br />
  104.         <label for="usrpic">你的头像：</label>
  105.         <input type="hidden" name="MAX_FILE_SIZE" value="1024">
  106.         <input type="file" id="usrpic" name="usrpic" required />
  107.         <br />
  109.         <label for="resume">你的简历：</label>
  110.         <input type="hidden" name="MAX_FILE_SIZE" value="10240">
  111.         <input type="file" id="resume" name="resume" required />
  112.         <br />
  114.         <label for="usersign">个性签名：</label>
  115.         <textarea name="usersign" id="usersign" cols="30" rows="10" placeholder="不要超过50个字！"></textarea>
  116.         <br />
  118.         <label for="pwd1">密码：</label>
  119.         <input
  120.           type="password"
  121.           id="pwd1"
  122.           name="pwd1"
  123.           value=""
  124.           placeholder="至少6位，由数字和字母构成"
  125.           required
  126.         /><br />
  127.         <label for="pwd2">密码确认：</label>
  128.         <input
  129.           type="password"
  130.           id="pwd2"
  131.           name="pwd2"
  132.           value=""
  133.           placeholder="********"
  134.           required
  135.         /><br />
  136.         <button type="reset">重置</button>
  137.         <button>提交</button>
  138.       </form>
  139.     </div>
  140.   </body>
  141. </html>
Correcting teacher：天蓬老师天蓬老师

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