案例效果图
以上界面的完整代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 align="center">用户注册</h1>
<p align="center">用户名：<input type="text"></p>
<p align="center">密码：<input type="password" autofocus></p>
<p align="center">请输入你的性别：<input type="radio" name="1">男<input type="radio" name="1">女</p>
<!-- 以上radio类型的按钮要取名字为一样的，不然不仅可以同时选，而且还取消不了 -->
<p align="center">
请选择你的爱好：
<input type="checkbox">lol
<input type="checkbox">王者荣耀
<input type="checkbox">刷抖音
<input type="checkbox">看韩剧
<input type="checkbox">吃美食
</p>
<p align="center">请输入你的邮箱：<input type="email" value="请输入你的邮箱："></p>
<p align="center">请选择你的用户头像：<input type="file" ></p>
<p align="center">
请选择家庭住址：
<select name="" id="">
<option value="" checked>重庆</option>
<option value="">福建</option>
<option value="">贵州</option>
<option value="">海南</option>
</select>
</p>
<p align="center">
请选择你的收货地址：
<select name="请选择你的收货地址：" id="" multiple>
<option value="" >重庆</option>
<option value="">福建</option>
<option value="">贵州</option>
<option value="">海南</option>
<option value="">重庆</option>
<option value="">福建</option>
<option value="">贵州</option>
<option value="">海南</option>
</select>
</p>
<p align="center">您的意见是：<textarea name="" id="" cols="30" rows="10">请输入你的意见</textarea></p>
<p align="center">您喜欢的颜色是：<input type="color"></p>
<p align="center">您注册的时间是：<input type="datetime-local"></p>
<p align="center">
<input type="submit" value="注册">
<input type="reset" value="重置">
</p>
</body>
</html>跳转
html
<form action="https://www.baidu.com/"method="post"name="register">
用户名：<input type="text"name="username"><br>
密码：<input type="password"name="password"><br>
<input type="submit"value="登入">
</form>点击登入按钮后会根据action中填写的相关路径跳转。