表单常用标签如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单：前后端数据交互的接口</title></head><body><!-- ? 表单可交互，也危险。 --><!-- ! 用户注册 --><h2 class="title">用户注册</h2><!--* 1. action : 服务器上的表单处理脚本，如login.php* 2. method : 提交方式* 2.1 GET : 默认，数据在URL中，适用于"少量且公开"的数据，如分页，查询参数* 2.2 POST ： 数据在请求体中，适合于"大量的或隐私的"数据，如卡号* 3. enctype :* 3.1 application / x-www-form-urlencoded : 默认对值对的编码方案* 3.2 multipart/form-data ： 分块，原始数据，适用文件上传* 4. target : 与<a>相同，_self是默认，_blank新页面展示* 5. id : name现在已经废弃了，全用id来引用该表单* 6. onsubmit : 提交时执行的js，拦截提交操作，执行用户自定义提交行为--><form action="register.php" method="POST" enctype="multipart/form-data" target="_blank"><!-- 表单控件分组 --><fieldset><legend>基本信息</legend><!-- ? type="text" 单行文本框，明文 --><div class="username"><!-- ? label+input --><!-- ? label 与 input 绑定： label _for = input.id --><label for="uname">用户名：</label><!-- ? name + value : 名值对组合 --><!-- ? required : 布尔属性，必选项 --><!-- ? readonly : 只读，不能输入，但会被提交 --><!-- ? disabled : 禁用，只能看，不能改，不能提交 --><input type="text" id="uname" name="username" value="" placeholder="用户名不少6位" required readonly disabled/></div><!-- ? type = “password” 单行，密文 --><div class="password"><!-- ? label + input --><label for="psw">密码：</label><!-- ? name + value --><!-- ? placeholder 与 value 不能共存，否则以value为主，value是默认值 --><input type="password" name="password" id="psw" value="123456" /><button type="button" onclick="this.previousElementSiBling.type='text'">显示密码</button></div><!-- ? type = "email" 自带验证规则 --><div class="email"><label for=""></label><input type="email" id="email" name="email" value="" placeholder="user@email"></div><!-- ? type = number --><div class="age"><label for="age">年龄：</label><!--* 1. min : 最小值* 2. max : 最大值* 3. step ： 递增或者是递减的量--><input type="number" value="" min="18" max="80" step="10" />岁</div><!-- ? typr= "date" --><div class="brithday"><label for="birthday">生日：</label><input type="date" name="birthday" value="2022-10-18" id="birthday" min="1949-10-01" max="2000-1-1" /></div><!-- ? type = url --><div class="blog"><label for="blog">Blog:</label><input type="url" name="blog" placeholder="http://" /></div><!-- ? type = color --><div class="color"><label for="color">拾色器：</label><input type="color" name="color" value="#FFFF00" id="color" onchange="getColor(this)"><output>#FFFF00</output></div><!-- ? type = search --><div class="search"><label for="query">搜索：</label><input type="search" name="search" id="query" placeholder="输入关键字"><button type="button">查询</button></div></fieldset><fieldset><legend>其他信息</legend><!-- ? type = "file" --><div class="upload"><label for="upload">头像：</label><!-- ! 文件上传，必须将 form.enctype = "multipart/form-data,method="POSt" --><input type="file" name="user_pic" id="upload"><button type="button">上传</button></div><!-- ? type = "hidden" 隐藏域，页面不可见，但数据可以正常提交到服务器中 --><input type="hidden" name="uid" value="10102" /><!-- ? type = "range" 滑动块 --><div class="range"><label for="range">星级：:</label><input type="range" name="range" id="range" min="0" max="5" value="0" step="1" oninput="" /><!-- <span></span> --><output>0</output>星</div><!-- ? 进度条：是标签 --><div class="progress"><label>进度：</label><!-- min 不要给 --><progress name="progress" max="100" value="10"></progress><output>10%</output><button type="button">+1</button></div></fieldset><fieldset><legend>预置内容</legend><!-- 1.用户自行输入：具有很大的分享，需要不断地验证 --><!-- 2.预置内容，用户只要选择就可以：安全性高，但是失去了灵活性 --><!-- ? type = "radio" 单选按钮 --><div class="gender"><label for="secret"></label><!--* 1. name : 必须相同，以保证唯一性* 2. input.value = input.id = label.for* 3. checked : 默认选项* 4.总标签 label.for = checked--><input type="radio" name="gender" value="male" id="male" /><label for="male">男</label><input type="radio" name="gender" value="female" id="female" /><label for="female">女</label><input type="radio" name="gender" value="secret" id="secret" checked/><label for="secret">保密</label></div><!-- ? type = "checkbox" 复选框 --><div class="hobby"><label>爱好：</label><!--* 1. name : hobby[],数组的语法形式，用于保存一个或多个值* 2. input.value = input.id = label.for,其实只需要input.id = label.for 即可* 3. checked : 默认选项--><input type="checkbox" name="hobby[]" value="game" id="" checked><label for="game">游戏</label><input type="checkbox" name="hobby[]" value="trave" id=""><label for="trave">摄影</label><input type="checkbox" name="hobby[]" value="shoot" id=""><label for="shoot">编程</label><input type="checkbox" name="hobby[]" value="programe" id="" checked><label for="programe">旅游</label></div><!-- ? select + option :下拉列表 --><div class="edu"><label for="edu">学历：</label><!--* 1. name 与 value，名值，分布在两个标签中。select.name , option.value* 2. selected : 默认选项* 3. 选择过多，且有规律，建议分组展示：optgroup* 4. 为select家提示：selected + disable , 加到第一项之前* 5. multiple : 支持多选--><select name="" id=""><option value="0">文盲</option><optgroup label="义务教育"><option value="1">小学</option><option value="2" selected>初中</option></optgroup><optgroup label="高等教育"><option value="3">高中</option><option value="4">大学</option><option value="5">硕士</option><option value="6">博士</option></optgroup></select></div><!-- ? 自带联想提示：预定义 + 自定义，即可自己输入，也能从预置中选择：input + select --><!-- ? input + datalist + option --><div class="like"><label for="keyword">语言：</label><input type="search" name="language" list="details" id="keyword"><!-- 预置值列表 --><!-- ? input.list == detailst.id 进行绑定 --><datalist id="details"><option value="html">html</option><option value="css">css</option></datalist></div></fieldset><div><!-- 文本域：多行文本框，input:单行文本框 --><label for="comment">个人简介：</label><!-- ? textarea : 没有 value 属性，它的值位于textarea标签之间 --><textarea name="comment" id="comment" cols="30" rows="5">hello world</textarea></div><!-- ? form中的button，默认为提交 --><button>提交</button><!-- 等价于 --><button type="submit">提交</button><!-- ? type = "button" : 只是一个普通的按钮，没有预置行为，如提交，复位 --><button type="button">提交</button><!--* 如果想将表单的同步提交，改为异步提交（Ajax,Fetch）,有三种方式：* 1. <button type="button">* 2. 事件方法中： event.preventDefault(),禁用默认行为* 3. form.onsubmit = "return false",禁用当前表单默认提交行为--><!-- ! 每个表单控件都有一个表单属性，它永远指向当前的表单元素 --></form><script src="static/js/func.js"></script></body></html>
