【无标题】用html制作一个简单的注册页面（无功能）

最新推荐文章于 2024-10-15 13:31:06 发布

叮叮当697123

最新推荐文章于 2024-10-15 13:31:06 发布

阅读量730

点赞数 8

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_61931410/article/details/142219469

版权

在D盘新建一个自己学号命名的文件夹；
新建三个文件夹，分别命名为：images、js、css；
将提供的图片素材复制一份到images文件夹下；
启动hbuilder工具——文件——打开目录——打开自己的学号文件夹；
左hbuilder窗口左侧学号文件夹上右击——新建一html文件，命名为regist.html；
代码附上
<!DOCTYPE html>

<html>

<head>

<title>注册页面</title>

<style>

body {

background-image: url('images/bjt.jpg');

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

}

</style>

</head>

<body>

<h1>REGISTER</h1>

<form>

<label for="username">用户名称：</label><input type="text" id="username"><br>

<label for="password">用户密码：</label><input type="password" id="password"><br>

<label for="confirmPassword">确认密码：</label><input type="password" id="confirmPassword"><br>

<label for="userType">用户类型：</label>

<select id="userType">

<option value="企业用户">企业用户</option>



</select><br>

<label>用户性别：</label>

<input type="radio" name="gender" value="男">男

<input type="radio" name="gender" value="女" checked>女<br>

<label for="hobbies">兴趣爱好：</label>

<input type="checkbox" value="游泳">游泳<br>

<label for="birthdate">出生日期：</label><input type="date" id="birthdate"><br>

<label for="email">电子邮件：</label><input type="email" id="email"><br>

<label for="intro">自我简介：</label><textarea id="intro"></textarea><br>

<input type="submit" value="注册">

</form>

</body>

</html>
上面插入的图片要选择自己images里面的哦
效果图放如下