<!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
相关推荐
fishmemory7sec3 分钟前
Electron 主进程与渲染进程、预加载preload.jsfishmemory7sec6 分钟前
Electron 使⽤ electron-builder 打包应用豆豆1 小时前
为什么用PageAdmin CMS建设网站?JUNAI_Strive_ving1 小时前
番茄小说逆向爬取看到请催我学习1 小时前
如何实现两个标签页之间的通信twins35202 小时前
解决Vue应用中遇到路由刷新后出现 404 错误qiyi.sky2 小时前
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)煸橙干儿~~2 小时前
分析JS Crash(进程崩溃)哪 吒2 小时前
华为OD机试 - 几何平均值最大子数(Python/JS/C/C++ 2024 E卷 200分)安冬的码畜日常2 小时前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法