<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
<link rel="stylesheet" href="static/css/cart.css">
<style>
form{
margin: 0 auto;
width:400px;
}
</style>
</head>
<body>
<form action="register.php" method="POST" enctype="application/x-www-form-urlencoded" target="_blank"
id="register">
<!-- 表单控件分组 -->
<!-- required 必选项 -->
<fieldset>
<legend>基本信息</legend>
<div class="username">
<label for="unname">用户名</label>
<input id="unname" type="text" name="username" value="" placeholder="用户名最少2位,最大不能10位" required minlength="2" maxlength="10" />
</div>
<div class="password">
<label for="psw">密码</label>
<input type="password" name="password" value="" id="psw" placeholder="显示密码" />
<button type="button" onclick="this.previousElementSibling.type='text'">显示密码</button>
</div>
<div class="email">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" value="" placeholder="user@email.com" />
</div>
<div class="age">
<label for="age">年龄</label>
<input type="number" value="18" min="18" max="80" step="1" />
</div>
<div class="birthday">
<label for="date"></label>
<input type="date" name="birthday" value="2022-10-18" id="birthday" min="1949-10-01"
max="2022-10-19" />
</div>
<div class="blog">
<label for="blog">Blog</label>
<input type="url" name="blog" placeholder="http://www.shangpingou.vip" />
</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>查询</button>
</div>
</fieldset>
<fieldset>
<legend>其他信息</legend>
<div class="upload">
<label for="upload">头像:</label>
<input type="file" name="user_pic" id="upload" />
<button type="button">上传</button>
</div>
<input type="hidden" name="uid" value="10102" />
<div class="range">
<label for="range">星级:</label>
<input type="range" name="range" min="0" max="5" value="0" step="1" oninput="getStatus(this)" />
<output>0</output>星
</div>
<div class="progress">
<label>进度</label>
<progress name="progress" max="99" value="80"></progress>
<output>80%</output>
<button type="button" onclick="handle(this)">+1</button>
</div>
</fieldset>
<fieldset>
<legend>预制内容</legend>
<div class="gender">
<label for="secret">性别:</label>
<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="female">保密</label>
</div>
<div class="hobby">
<label>爱好:</label>
<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>
<div class="edu">
<label for="edu">学历</label>
<select name="edu" id="edu" form="">
<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>
<div class="like">
<label for="keyword">语言:</label>
<input type="search" name="language" list="detalist"/>
<datalist id="detalist">
<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>
<textarea name="comment" id="comment" cols="30" rows="5" maxlength="200" style="resize: none;">黑崎一护</textarea>
<button>提交</button>
<button type="submit"> 提交</button>
<button type="submit">提交</button>
</fieldset>
</form>
</body>
<script src="static/js/func.js"></script>
</html>