form0313

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网 
  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=, initial-scale=1.0">
  7.     <title>注册表单</title>
  8. </head>
  9. <body>
  10.     <form action="register.php" method="post">
  11.         <legend>新用户注册</legend>
  12.         <fieldset style="display: inline-grid; gap: 1em">
  13.             <div class="username">
  14.                 <label for="uname">用户名</label>
  15.                 <input type="text" id="uname" name="uname" value="" placeholder="请输入用户名(不少于6位)" required autofocus>
  16.             </div>
  18.             <div class="email">
  19.                 <label for="email">邮箱：</label>
  20.                 <input type="email" name="email" id="email" placeholder="username@email.com">
  21.             </div>
  23.             <div class="psw">
  24.                 <label for="psw">密码：</label>
  25.                 <input 
  26.                     type="password" 
  27.                     onkeydown="this.nextElementSibling.disabled=false"
  28.                     name="password" 
  29.                     id="psw"
  30.                     placeholder="不少于6位"
  31.                     required>
  32.                     <button type="button" onclick="showPsw(this, this.form,true)" disabled>查看</button>
  33.             </div>
  35.             <div class="age">
  36.                 <label for="age">年龄：</label>
  37.                 <input type="number" id="age" name="age" min="18">岁
  38.             </div>
  40.             <div class="birthday">
  41.                 <label for="birthday">生日：</label>
  42.                 <input type="date" id="birthday" name="birthday" value="2020-02-22" min="1949-10-01">
  43.             </div>
  45.             <div class="sex">
  46.                 <label for="male">性别：</label>
  47.                 <!-- input.type中的name是提交到服务器的 -->
  48.                 <input type="radio" name="sex" value="male" id="male" checked><label for="male">男</label>
  49.                 <input type="radio" name="sex" value="female" id="female"><label for="female">女</label>
  50.                 <input type="radio" name="sex" value="secret" id="secret"><label for="secret">保密</label>
  51.             </div>
  53.             <div class="hobby">
  54.                 <label for="">爱好：</label>
  55.                 <!-- checkbox的name不能相同，返回的是数组 -->
  56.                 <input type="checkbox" name="hobby[]" value="trave" id="trave"><label for="trave">旅游</label>
  57.                 <input type="checkbox" name="hobby[]" value="program" id="program" checked><label for="program">编程</label>
  58.                 <input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">摄影</label>
  59.                 <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">游戏</label>
  60.             </div>
  62.             <div class="edu">
  63.                 <label for="">学历：</label>
  64.                 <select name="edu" id="">
  65.                     <option value="1" selected disabled>---请选择---</option>
  66.                     <option value="1">中学</option>
  67.                     <option value="2">大学</option>
  68.                     <option value="3">研究生</option>
  69.                 </select>
  70.             </div>
  71.             <button>提交</button>
  72.         </fieldset>
  73.     </form>
  75.     <script>
  76.         // 显示密码
  77.         function showPsw(ele, form){
  78.             const psw = form.password
  79.             if(psw.type=='password'){
  80.                 psw.type = 'text'
  81.                 ele.textContent = '隐藏'
  82.             }else if(psw.type =='text'){
  83.                 psw.type = 'password'
  84.                 ele.textContent = '显示'
  85.             }else{
  86.                 return false
  87.             }
  88.         }
  89.     </script>
  90. </body>
  91. </html>

注册表单0313

总结：

表单入手不难，难在精通，要多用多练，挺期待下节课的CSS的。

【文章原创作者：滨海网页制作公司 http://www.1234xp.com/binhai.html 欢迎留下您的宝贵建议】
更多阅读