表单的理解与创建用户注册表单

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
表单的标签，元素，属性form.action：处理表单数据的脚本form.method: 表单提交的方式，get(默认),post（密文）fieldset: 表单控件的分组legend: 是一个标签，配合着fieldset来使用的，用来给fieldset设置一个标题文字lebel: 标签为 input 元素定义标注（标记）,标签的 for 属性应当与相关元素的 id 属性相同 元素中使用，用来声明允许用户输入数据的控件" class="reference-link">input:在<form> 元素中使用，用来声明允许用户输入数据的控件input.type: 单行文本框
  1.   input.type = "text" 明文
  2.   input.type = "password" 密文
  3.   input.type = "email" 邮箱(验证)
placeholder：显示可描述或输入字段的提示信息autofocus: 页面初始化/加载成功时,焦点自动落入required: 必填项, 不写不能提交只有名称没有值的属性叫:布尔属性(只要写上就是true,不写就是false)min:最小值max:最大值option：下拉列表selected：默认选中disabled:禁用checked：属性规定在页面加载时应该被预先选定的 input 元素以下是注册的表单代码
  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>
  9. <body>
  10.     <form action="register.php" method="post">
  11.     <fieldset style="display: inline-grid;gap: 2em;">
  12.         <legend>新用户注册</legend>
  13.         <div class="name">
  14.             <label for="uname">用户名：</label>
  15.             <input type="text" id="uname" name="nuame" value="" placeholder="字母+数字，不少于6位" autofocus required />   
  16.         </div>
  17.         <div class="psw">
  18.             <label for="psw">密码：</label>
  19.             <input type="password" name="password" id="psw" placeholder="不少于6位且不能全为数字" required />
  20.         </div>
  21.         <div class="email">
  22.             <label for="email">邮箱：</label>
  23.             <input type="email" id="email" name="email" placeholder="abcder@email.com" required />
  24.         </div>
  25.         <div class="sex">
  26.             <label for="male">性别:</label>
  27.             <input type="radio" id="male" name="sex" value="male" checked /><label for="male">男</label>
  28.             <input type="radio" id="female" name="sex" value="female" /><label for="female">女</label>
  29.         </div>
  30.         <div class="age">
  31.             <label for="age">年龄：</label>
  32.             <input type="number" name="age" id="age"  min="18" max="60" required />岁    
  33.         </div>
  34.         <div class="birthday">
  35.             <label for="birthday">出生年月：</label>
  36.             <input type="date" name="birthday" id="birthday" value="2008-08-08" min="1960-08-08" />
  37.         </div>
  38.         <div class="edu">
  39.             <label for="">学历：</label>
  40.             <select name="edu" id="">
  41.                 <option value="" selected disabled>--请选择--</option>
  42.                 <option value="1">初中</option>
  43.                 <option value="2">高中</option> 
  44.                 <option value="3">大专</option> 
  45.                 <option value="4">大学</option> 
  46.                 <option value="5">博士</option>    
  47.             </select>
  48.         </div>
  49.         <div class="hobby">
  50.             <label for="">兴趣爱好：</label>
  51.             <input type="checkbox" name="hobby" value="trave" id="trave" /><label for="trave">旅游</label>
  52.             <input type="checkbox" name="hobby" value="programe" id="programe" checked /><label for="programe">编程</label>
  53.             <input type="checkbox" name="hobby" value="sport" id="sport" /><label for="sport">运动</label>
  54.             <input type="checkbox" name="hobby" value="shoot" id="shoot" /><label for="shoot">摄影</label>
  55.         </div>
  56.         <button>提交</button>
  57.     </fieldset>
  58.     </form>
  59. </body>
  60. </html>
浏览器效果图：

【文章原创作者：香港显卡服务器 http://www.558idc.com/hkgpu.html 网络转载请说明出处】
更多阅读