收藏
PHPz批改状态：合格
老师批语：实现效果和课件上很相似,继续加油
<!DOCTYPE html><html lang="zh-CN"><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>表单: 前后端数据交互的接口-2</title></head><body><h2>用户注册表</h2><!--* 1. action: 服务器上的表单处理脚本,如`login.php`* 2. method: 提交方式* 2.1 GET: 默认,数据在URL中,适用于"少量且公开"的数据,如分页,查询参数* http://127.0.0.1:5500/1017/register.php?username=admin* http://127.0.0.1:5500/1017/register.php?username=peter+zhu* 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" id="register"><fieldset><legend>基本信息</legend><div class="username"><label for="uname">用户名：</label><input type="text" name="username" id="uname" name="username" value="" placeholder="用户名不少于6位"></div><div class="password"><label for="password">用户密码：</label><input type="password" name="password" id="password" value="" placeholder="不少于6位" required><button type="button" onclick="this.previousElementSibling.type='text'">显示密码</button></div><div class="email"><label for="email">用户邮箱：</label><input type="email" name="email" id="email" value="" placeholder="user@email.com"></div><div class="age"><!--* 1. min: 最小值* 2. max: 最大值* 3. step: 步长,递增/递减的量--><label for="age">年龄：</label><input type="number" name="age" id="age" value="" min="18" max="80" step="10"></div><div class="birthday"><label for="birthday">生日</label><input type="date" name="birthday" id="birthday" value="" min="1949-10-01" max="2000-01-01"></div><div class="blog"><label for="blog">Blog:</label><input type="url" name="blog" placeholder="http://" /></div><div class="color"><label for="color">拾色器:</label><input type="color" name="color" value="#FFFF00" id="color" onchange="getColor(this)" /><output>#FFFF00</output></div><div class="search"><label for="query">搜索:</label><input type="search" name="search" id="query" placeholder="输入关键字" /><button type="button">查询</button></div></fieldset><fieldset><legend>其他信息</legend><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" /><div class="range"><label for="range">星级:</label><input type="range" name="range" id="range" min="0" max="5" value="0" step="1" oninput="getStatus(this)" /><output>0</output>星</div><!-- ? 进度条,是标签 --><div class="progrss"><label>进度:</labe><!-- min 不要给 --><progress name="progress" max="100" value="10"></progress><output>10%</output><button type="button" onclick="handle(this)">+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="game" checked><label for="game">游戏</label><input type="checkbox" name="hobby[]" value="trave" id="trave"><label for="trave">旅游</label><input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">摄影</label><input type="checkbox" name="hobby[]" value="program" id="program" checked><label for="program">编程</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 + disabled, 加到第一项之前* 5. multiple: 支持多选--><!-- select.form="指向当前表单元素" --><select name="edu" id="edu" form=""><!-- <select name="edu" id="edu" multiple> --><!-- select 标签不能加提示, 想加怎么办 --><!-- 加提示 --><option value="selected disabled" >--请选择--</option><option value="0">文盲</option><optgroup label="义务教育"><option value="1">小学</option><option value="2">初中</option><option value="3">高中</option></optgroup><optgroup label="高等教育"><option value="4">专科</option><option value="5">本科</option><option value="6">硕士</option><option value="7">博士</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 <==> datalist.id 进行绑定 --><datalist id="details"><option value="html">html</option><option value="css">css</option><option value="js">js</option><option value="php">php</option><option value="vue">vue</option><option value="node">node</option></datalist></div></fieldset><div><!-- 文本域: 多行文本框, input: 单行文本框 --><label for="comment">个人简介:</label><!-- ? textarea: 没有 value 属性,它的值位于textarea标签之间 --><!-- ? maxlength: 最大长度 --><textarea name="comment" id="comment" cols="30" rows="5" maxlength="200" style="resize: none">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属性, 它永远指向当前控件所性的表单元素 --></fieldset></form><script src="static/js/func.js"></script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
