<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #1e1e1e;
}
.container {
width: 400px;
height: 700px;
border-radius: 10px;
background-color: #fff;
margin: 30px auto;
padding: 30px;
}
.container h1 {
text-align: center;
margin-bottom: 20px;
}
.form-item {
margin-bottom: 10px;
}
.txt {
outline: none;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
height: 40px;
font-size: 14px;
padding: 0 10px;
/* 首行缩进 */
/* text-indent: 10px; */
}
.txt:focus {
border-color: aqua;
}
select.txt {
height: 100px;
padding: 10px;
}
textarea.txt {
resize: none;
height: 100px;
padding: 10px;
}
button {
outline: none;
border: none;
border-radius: 5px;
width: 150px;
height: 40px;
font-size: 14px;
background-color: #1075cc;
color: #fff;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
/* 统一处理浮动 */
.left {
float: left;
}
.right {
float: right;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.yzm.txt{
width: 170px;
}
.title{
margin-right: 10px;
}
</style>
</head>
<body>
<form class="container">
<h1>用户注册</h1>
<div class="form-item">
<input
class="txt"
type="text"
placeholder="请输入手机号"
maxlength="11"
/>
</div>
<div class="form-item clearfix">
<input class="txt left yzm" type="text" placeholder="请填写验证码" />
<button disabled class="right">发送验证码</button>
</div>
<div class="form-item">
<input class="txt" type="password" placeholder="请设置密码" />
</div>
<div class="form-item">
<input class="txt" type="password" placeholder="请确认密码" />
</div>
<div class="form-item">
<select multiple="multiple" class="txt">
<option value="">爱好1</option>
<option value="">爱好2</option>
<option value="">爱好3</option>
<option value="">爱好4</option>
<option value="">爱好5</option>
<option value="">爱好6</option>
<option value="">爱好7</option>
<option value="">爱好8</option>
<option value="">爱好9</option>
<option value="">爱好10</option>
</select>
</div>
<div class="form-item clearfix">
<div class="title left">性别</div>
<div class="left">
<!-- 关联 -->
<input type="radio" name="sex" checked id="male" />
<label for="male">男</label>
<input type="radio" name="sex" id="female" />
<label for="female">女</label>
<!-- 还可以
<label>
<input class="txt" type="radio" name="sex" checked>
<span>男<span/>
<label/>
-->
</div>
</div>
<div class="form-item">
<textarea placeholder="请输入个人简介" class="txt"></textarea>
</div>
<div class="form-item">
<label>
<input type="checkbox" />
<span>同意注册</span>
</label>
</div>
<div class="form-item">
<button>立即注册</button>
<button type="reset">重置表单</button>
</div>
</form>
</body>
</html>
css表单
lionliu05192023-12-13 11:50
相关推荐
程序员_三木几秒前
Three.js入门-Raycaster鼠标拾取详解与应用顾平安1 小时前
Promise/A+ 规范 - 中文版本聚名网1 小时前
域名和服务器是什么?域名和服务器是什么关系?桃园码工1 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]沈剑心1 小时前
如何在鸿蒙系统上实现「沉浸式」页面?一棵开花的树,枝芽无限靠近你1 小时前
【PPTist】组件结构设计、主题切换m0_748237051 小时前
Chrome 关闭自动添加httpsprall1 小时前
实战小技巧:下划线转驼峰篇开心工作室_kaic2 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic川石教育2 小时前
Vue前端开发-缓存优化