简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 用户注册信息表单
Blogger Information
Blog 9
fans 0
comment 0
visits 4794
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
用户注册信息表单
兰博
Original
483 people have browsed it

  1.   <body>
  2.       <h2>用户注册</h2>
  3.           <!--
  4.         * 1. action: 是服务器上的表单处理脚本，比如`login.php`,`regiter.php`等
  5.         * 2. method：提交方式
  6.             * 2.1 GET：默认方式，数据都在URL中，只适用于“少量且公开的数据”，比如分页，查询参数等。
  7.             * 2.2 POST: 数据在请求体中,适合于"大量的或隐私"的数据
  8.             * http://127.0.0.1:5500/1017/register.php?username=admin
  9.             * http://127.0.0.1:5500/1017/register.php?username=peter+zhu
  10.         * 3. enctype:
  11.             * 3.1 application/x-www-form-urlencoded: 默认键值对的编码方案
  12.             * 3.2 multipart/form-data: 分块,原始数据,适用文件上传
  13.         * 4. target: 与<a>相同,_self是默认,_blank新页面
  14.         * 5. id: name现在已废弃不推荐,全用id来引用该表单
  15.         * 6. onsubmit: 事件属性, 提交时执行的js,拦截提交操作,执行用户自定义提交行为
  16.      -->
  17.      <from action="register.php" method="post" enctype="application/x=www-form-urlencoded" target="_blank" id="register">
  18.      <!-- 表单控件分组 -->
  19.         <fieldset>  
  20.           <legend>用户注册信息</legend>  
  21.           <!-- ? type="text" 单行文本框, 明文 -->
  22.           <div class="mobile" >
  23.           <!-- ? label + input  -->
  24.           <!-- ? label 与 input 绑定:  label.for = input.id  -->
  25.           <label for="mobile">手机号:</label>
  26.           <!-- ? name + value : 名值对组合  -->
  27.           <!-- ? required: 布尔属性,必选项 -->
  28.           <!-- ? readonly: 布尔属性,只读,只能看,不能改,但会被提交 -->
  29.           <!-- ? disabled: 布尔属性,禁用,只能看,不能改,不能提交 -->
  30.           <input type="text" id="moile" namen="mobile" value="" placeholder="请输入11位数手机号" required  form="" />
  31.           </div>
  32.           <div class="psaaword">
  33.             <!-- ? label.for = input.id  -->
  34.             <label for="psaaword">密 &nbsp &nbsp码:</label>
  35.             <!-- ? name + value  -->
  36.             <!-- placeholder 与 value 不能共存,否则value为主, value 默认值 -->
  37.             <input type="text" id="psaaword" namen="psaaword" value="" placeholder="密码不能少于6位" required  minlength="6" maxlength="15" />
  38.             <!-- <button type="button" onclick="this.previousElementSibling.type='text'">显示密码</button> -->
  39.           </div>
  40.          <!-- ? type="email" 自带验证规则 -->
  41.           <div class="email">
  42.           <label for="email">邮 &nbsp &nbsp箱:</label>
  43.           <input type="email" id="email" name="email" value="" placeholder="user@email.com" />
  44.           </div>
  45.           <!-- ? type="number" -->
  46.           <div class="age">
  47.             <label for="age">年 &nbsp &nbsp龄:</label>
  48.           <!--
  49.             * 1. min: 最小值
  50.             * 2. max: 最大值
  51.             * 3. step: 步长,递增/递减的量
  52.            -->
  53.             <input type="number" value="16" min="16" max="85" step="1" />岁
  54.           </div> 
  56.           <!-- ? type="file" -->
  57.           <div class="upload">
  58.             <label for="upload">头 &nbsp &nbsp像:</label>
  59.             <!-- ! 文件上传,必须将 form.enctype="multipart/form-data",method="POST" -->
  60.             <input type="file" name="user_pic" id="upload" />
  61.             <button type="button">上传头像</button>
  62.           </div>
  64.           <div class="gender">
  65.             <label for="secret">性 &nbsp &nbsp别:</label>
  66.             <!--
  67.               * 1. name: 必须相同,以保住唯一性
  68.               * 2. input.value <=> input.id <=> label.for
  69.               * 3. checked: 默认选项
  70.               * 4. 总标签label.for <=> checked
  71.              -->
  72.             <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
  73.             <input type="radio" name="gender" value="female" id="female" ><label for="female">女</label>
  74.             <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">保密</label>
  75.           </div>
  77.           <!-- ? type="checkbox" 复选框 -->
  78.           <div class="hobby">
  79.             <label>爱 &nbsp &nbsp好:</label>
  80.             <!--
  81.               * 1. name: hobby[], 数组的语法形式,用于保存一个或多个值
  82.               * 2. input.value <=> input.id <=> label.for,其实只需要input.id <==> label.for
  83.               * 3. checked: 默认选项
  84.              -->
  85.             <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">游戏</label>
  86.             <input type="checkbox" name="hobby[]" value="trave" id="trave" checked><label for="trave">旅游</label>
  87.             <input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">看书</label>
  88.             <input type="checkbox" name="hobby[]" value="program" id="program"><label for="program">高尔夫</label>
  89.           </div>
  91.         </fieldset>
  92.               <!-- 等价于 -->
  93.         <button type="submit">提交</button>
  94.      </form>
  95.   </body>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！