form表单制作

编辑: 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=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <!-- action:处理表单数据脚本的url地址 -->
  11.     <!-- method:表单的提交方式 -->
  12.     <from action="register.php" method="post">
  13.         <!-- fieldset:表单空件的分组 -->
  14.         <fieldset style="display: inline-grid; gap: 1em">
  15.             <legend>用户注册</legend>
  16.             <div class="username">
  17.                 <label for="">用户名:</label>
  18.                 <!-- type="text":单行文本框 -->
  19.                 <!-- autofocus:页面初始化/加载成功时,焦点自动落入。 -->
  20.                 <!-- required:必填项,不写不能提交 -->
  21.                 <input type="text" id="username" name="username" value="" placeholder="不少于六位数" autofocus required>
  22.             </div>
  24.             <div class="email">
  25.                 <label for="email">邮箱:</label>
  26.                 <input type="email" id="email" name="email" placeholder="请输入正确的格式！" required>
  27.             </div>
  29.             <div class="password">
  30.                 <label for="">密码:</label>
  31.                 <input type="password" id="password" name="password" placeholder="输入不少于6位数的密码" required>
  32.                 <button>查看</button>
  33.             </div>
  35.             <div class="age">
  36.                 <label for="age">年龄:</label>
  37.                 <input type="number" id="age" name="age" min="18" max="80">
  38.             </div>
  40.             <div class="birthday">
  41.                 <label for="birthday">生日:</label>
  42.                 <input type="date" id="birthday" name="birthday" value="2008-08-08" min="1949-10-01">
  43.             </div>
  44.             <div class="sex">
  45.                 <label for="sex">性别:</label>
  46.                 <input type="radio" name="sex" value="male" id="male" checked><label for="male">男</label>
  47.                 <input type="radio" name="sex" value="male" id="female"><label for="male">女</label>
  48.                 <input type="radio" name="sex" value="male" id="secret"><label for="male">保密</label>
  49.             </div>
  50.             <div class="hobby">
  51.                 <label for="">爱好:</label>
  52.                 <input type="checkbox" name="hobby[]" value="trave" id="trave"><label for="trave">旅游</label>
  53.                 <input type="checkbox" name="hobby[]" value="trave" id="programe"><label for="programe">编程</label>
  54.                 <input type="checkbox" name="hobby[]" value="trave" id="shoot"><label for="shoot">摄影</label>
  55.                 <input type="checkbox" name="hobby[]" value="trave" id="food"><label for="food">美食</label>
  56.             </div>
  57.             <div class="education">
  58.                 <label for="">学历:</label>
  59.                 <select name="education"> 
  60.                     <option value="1">中学</option>
  61.                     <option value="2">高中</option>
  62.                     <option value="3">大学</option>
  63.                     <option value="4">研究生</option>
  64.                 </select>
  65.             </div>
  66.             <button>提交</button>
  67.         </fieldset>
  68.     </from>
  69. </body>
  70. </html>
【文章原创作者：东台网站设计公司 http://www.1234xp.com/dongtai.html 欢迎留下您的宝贵建议】
更多阅读