![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：代码内容可以写在代码块中，结果也可以添加一个实例效果图
Collection
Collection
<!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>
<!-- 1018form属性 -->
<!--
* 1.action:服务器上的表单处理脚本，
* 2method:提交方式
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="reg.php"
method="post"
enctype="application/x-www-form-urlencoded"
target="_blank"
>
<fieldset>
<legend style="font-size: 20px">用户基本信息</legend>
<!-- type="text" 单行文本框，明文 -->
<div class="username">
<!-- label + input 绑定label.for =input.id-->
<!-- required:布尔值 ，必选项 -->
<label for="username">用户名</label>
<input
type="text"
name="username"
id="username"
value=""
required
placeholder="输入用户名"
/>
</div>
<div class="userpass">
<!-- name + value -->
<!-- placeholder 与 value 不能共存 -->
<label for="userpass">用户密码</label>
<input
type="password"
name="userpass"
id="userpass"
value=""
required
placeholder="密码不能少于8位"
min="8"
max="25"
/>
<button
type="button"
onclick="this.previousElementSibling.type='text'"
>
显示密码
</button>
</div>
<div class="useremail">
<!-- type="email" 自带验证规则 -->
<label for="useremail">Email:</label>
<input
type="email"
name="useremail"
id="useremail"
value=""
placeholder="user@admin.com"
/>
</div>
<div class="nianling">
<label for="nianling">年龄：</label>
<input
type="number"
name="nianling"
id="nianling"
value="18"
min="18"
max="80"
step="1"
/>岁
</div>
<div class="shengri">
<label for="shengri">生日：</label
><input
type="date"
name="shengri"
id="shengri"
value="2022-10-18"
min="1949-10-01"
max="2022-10-18"
placeholder=""
/>
</div>
<div class="yanse">
<label for="yanse">颜色：</label
><input
type="color"
name="yanse"
id="yanse"
value="#000000"
onchange="getColor(this)"
/>
<output>#000000</output>
</div>
<div class="search">
<label for="search">搜索：</label>
<input
type="search"
name="search"
id="search"
placeholder="输入关键字"
/>
<button type="button">查询</button>
</div>
</fieldset>
<fieldset>
<legend>其他信息</legend>
<div class="upload">
<!-- type="file" -->
<!-- ! 文件上传必须将form.enctype="multipar/form-data" -->
<label for="upload_pic">上传头像：</label
><input type="file" name="upload_pic" id="upload_pic" />
<button type="button">上传</button>
</div>
<div class="range">
<label for="range">等级：</label
><input
type="range"
name="range"
id="range"
value="0"
min="0"
max="100"
step="1"
oninput="getStatus(this)"
/>
<output>0</output>星
</div>
<!-- 进度条 是标签 min不要给 -->
<div class="progrss">
<label>进度：</label>
<progress
name="pprogress"
id="pprogress"
max="100"
value="0"
step="10"
></progress>
<output>0%</output>
<button type="button" onclick="handle(this)">+10</button>
</div>
</fieldset>
<fieldset>
<legend>预置内容</legend>
<!-- 1.用户自行输入具有风险，需要验证 -->
<!-- 2.预置内容用户只要选择就可以 -->
<!-- ? type="radio" 单选按钮 -->
<div class="gender">
<label for="secret">性别：</label>
<input type="radio" name="radio01" id="male" value="male" /><label
for="male"
>男</label
>
<input type="radio" name="radio01" id="feamle" value="feamle" /><label
for="feamle"
>女</label
>
<input
type="radio"
name="radio01"
id="secret"
value="secret"
checked
/><label for="secret">保密</label>
</div>
<!-- type='checkbox' 复选框 -->
<div class="checkbox">
<label for="checkbox02"> 爱好：</label>
<input
type="checkbox"
name="checkbox01[]"
id="checkbox01"
value="旅游"
/>
<label for="checkbox01">旅游</label>
<input
type="checkbox"
name="checkbox01[]"
id="checkbox02"
value="电影"
checked
/>
<label for="checkbox02">电影</label>
<input
type="checkbox"
name="checkbox01[]"
id="checkbox03"
value="游戏"
/>
<label for="checkbox03">游戏</label>
<input
type="checkbox"
name="checkbox01[]"
id="checkbox04"
value="编程"
checked
/>
<label for="checkbox04">编程</label>
</div>
<!-- ? type="select" 下拉列表
*1. name与option 分布在两个标签中 select.name ,option.value
*2. selected 默认选项
*3. optgroup 分组选项
*4. select 不能加提示 ,想加怎么办 select + disabled,加到第一项之前 ，且不能提交
*5. mutiple 实现多选
*6.
*7.
-->
<div class="select">
<select name="edu" id="edu" multiple>
<option value="" selected disabled>—请选择—</option>
<optgroup label="义务教育"></optgroup>
<option value="0">学前班</option>
<option value="0">小学毕业</option>
<option value="0">初中毕业</option>
<optgroup label="中学教育"></optgroup>
<option value="0">高中毕业</option>
<optgroup label="高等教育"></optgroup>
<option value="0">大专毕业</option>
<option value="0">本科毕业</option>
<option value="0">研究毕业</option>
<optgroup label="深研教育"></optgroup>
<option value="0">硕士毕业</option>
<option value="0">博士毕业</option>
</select>
</div>
<!-- 自带联想提示，可以自己输入，也可以预置中选择 -->
<!-- 语法 input + datalist + option 组合实现 list-->
<!-- 预置列表
input.list = datalist.id进行绑定
-->
<div class="datelselect">
<label for="keyword">语言：</label>
<input type="search" name="language" list="datals" id="keyword" />
<datalist id="datals">
<option value="html">html</option>
<option value="css">CSS</option>
<option value="JS">JS</option>
<option value="php">php</option>
<option value="java">java</option>
</datalist>
</div>
</fieldset>
<fieldset>
<legend>个个简介</legend>
<!--
文本域 textarea：多行文本框 ，input :单行文本框，
textarea 没有value属性 ，位于textarea标签之间
maxlength 限制输入最多字符
style="resize:nane; 控制文本框不能拉大缩小"
-->
<div class="textarea">
<textarea
name="textarea01"
id="textarea01"
cols="50"
rows="6"
maxlength="200"
style="resize: none"
>
个人简历</textarea
>
</div>
</fieldset>
<input type="hidden" name="uid" value="1018" />
<!-- form 中的button ，默认为提交
type= "button" 只是一个普通按扭，没有提交功能
type="submit" 默认为提交
！每个表单控件都有一个form属性
-->
<button type="submit">提交</button>
</form>
<script src="func.js"></script>
</body>
</html>
