代码+运行
![](https://i-blog.csdnimg.cn/blog_migrate/6fd09e5aba14fb92cb908c1b2ad7c88a.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../11月16日/text.css">
</head>
<body>
<div class="container">
<div class="item"> <h1 > 用户注册</h1>
<form action="#">
用户名:<input type="text" name="1" ><pre> <input type="text" placeholder="zhangsan" disabled></pre>
</br> 密码:<input type="password" name="2">
</br>
</br> 性别: <label>
<input type="radio" name="3" value="男" checked>男 </label>
<label>
<input type="radio" name="3" value="女">女
</label>
</br>
</br> 爱好: <label><input type="checkbox" name="4">唱 </label>
<label><input type="checkbox" name="4">跳 </label>
<label><input type="checkbox" name="4">Rap</label>
<label><input type="checkbox" name="4">打篮球</label>
</br>
</br> 邮箱:<input type="text" name="5" placeholder="请输入你的邮箱">
</br>
</br> 用户头像 <input type="button" name="6" value="选择文件" >
</br>
</br> 家庭地址 <input type="text" name="7" placeholder="请输入你的地址">
<select name="city" id="">
<option value="西安">西安</option>
<option value="南京" selected>南京</option>
<option value="上海">上海</option>
</select>
</br>
</br> <Iabel>收货地址:
<select name="pets" multiple size="4"><optgroup label="收货地址">
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<option value="江苏"disabled>江苏</option>
<option value="海南">海南</option>
</optgroup>
</select>
</br> 建议或意见<textarea name="8" cols="20" rows="2" placeholder="你的意见或建议"></textarea>
</br>
</br> 选择你喜欢的颜色<input type="color" spellcheck="false">
注册时间 <input type="datetime-local" name="9" id="">
</br>
</br> <pre> <button>注册</button> <button>重置</button></pre>
</form>
</div></div>
</body>
</html>
.container {
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.item{
width: 40em;
}
笔记
![](https://i-blog.csdnimg.cn/blog_migrate/2317462c662040b9bb1c2dd03f9d2338.jpeg)