<!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>
<!-- method="POST" 数据在请求体中提交-->
<!-- method="GET" 数据在url地址中提交 -->
<form action="" style="display: grid; gap: 0.5em" method="POST">
<!-- fieldset表单分组标签 -->
<fieldset>
<!-- legend表单分组标题项 -->
<legend>必填项：</legend>
<!-- 文本输入框 -->
<div>
<!-- 点击账号实现输入焦点落到username输入框中 for属性与id属性相同即可 -->
<label for="username">账号：</label>
<!-- autofocus 刷新页面后，焦点第一时间落在的位置 -->
<!-- required 必填项 placeholder="提示语" -->
<input
type="text"
id="username"
name="username"
autofocus
required
placeholder="请填写你的账号名"
/>
</div>
<!-- 密码输入框 -->
<div>
<!-- 输入框内容自动打星，符号可以自已定义 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password" />
</div>
<!-- 单选按钮：多选一 -->
<div>
<!-- 这里点击性别自动到默认方法：将for的值 与对应的默认选项中id属性相等即可 -->
<label for="baomi">性别：</label>
<input type="radio" id="nan" name="gender" value="nan" />
<label for="nan">男</label>
<input type="radio" id="nv" name="gender" value="nv" />
<label for="nv">女</label>
<input type="radio" id="baomi" name="gender" value="baomi" checked />
<label for="baomi">保密</label>
</div>
<!-- 手机输入框 -->
<div>
<label for="tel">手机号：</label>
<input type="number" id="tel" name="tel" required />
</div>
<!-- 日期入框 -->
<div>
<label for="datetime-local">出生年月：</label>
<input type="date" id="datetime" name="datetime" />
</div>
<!-- 邮箱输入框 -->
<div>
<!-- 自带邮箱验证功能 -->
<label for="email">邮箱：</label>
<input
type="email"
id="email"
name="email"
required
placeholder="如：xxx@qq.com"
/>
</div>
</fieldset>
<!-- fieldset表单分组标签 -->
<fieldset>
<!-- legend表单分组标题项 -->
<legend>兴趣爱好：</legend>
<!-- 复选按钮：多选 -->
<div>
<!-- 这里点击性别自动到默认方法：无法实现 -->
<label>爱好：</label>
<!-- 因为允许同时提交多个值，所以name属性要写成数组格式 -->
<input
type="checkbox"
id="programmer"
name="hobby[]"
value="programmer"
checked
/><label for="programmer">编程</label>
<input type="checkbox" id="game" name="hobby[]" value="game" /><label
for="game"
>游戏</label
>
<input
type="checkbox"
id="trave"
name="hobby[]"
value="trave"
/><label for="trave">旅游</label>
<input type="checkbox" id="shot" name="hobby[]" value="shot" /><label
for="shot"
>摄影</label
>
</div>
<!-- 颜色输入框 -->
<div>
<label for="color">幸运色：</label>
<input type="color" id="color" name="color" />
</div>
<!-- 拉杆范围拖动条 -->
<div>
<label for="range">拉杆：</label>
<input type="range" id="range" name="range" />
</div>
</fieldset>
<!-- 图片提交 -->
<div>
<label for="image">上传头像：</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg" />
<input name="upload" type="submit" value="上传" />
</div>
<!-- URL提交 -->
<div>
<label for="urlweb">个人网站：</label>
<input type="urlweb" id="urlweb" name="urlweb" />
</div>
<!-- 下拉列表 -->
<div>
<label>会员级别：</label>
<select name="level" id="">
<option value="1">铜牌会员</option>
<option value="2">银牌会员</option>
<option value="3">金牌会员</option>
<option value="4">钻石会员</option>
</select>
</div>
<!-- datalist -->
<!-- 相当于输入框 + 下拉列表 -->
<div>
<label for="">关键字：</label>
<!-- type=search,选择后，在选择项后有一个X图标 -->
<input type="search" name="search" id="" list="my-key" />
<datalist id="my-key">
<option value="html"></option>
<option value="CSS"></option>
<option value="PHP"></option>
<option value="JAVA"></option>
</datalist>
</div>
<!-- 按钮 -->
<div>
<button type="submit">提交</button>
</div>
</form>
</body>
</html>