CSS 表单样式

Vvc_b

已于 2024-10-16 23:19:03 修改

阅读量816

点赞数 31

分类专栏： CSS 文章标签： css 前端开发语言 web

于 2024-10-16 23:01:30 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74897683/article/details/142993143

版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

html简介

HTML表单的精粹：构建交互式网页

基础结构：一个基本的表单由 <form> 元素包裹，其中包含各种输入字段，如文本框( <input type="text"> )、电子邮件输入( <input type="email"> )、密码输入( <input type="password"> )、单选按钮( <input type="radio"> )、复选框( <input type="checkbox"> )、下拉菜单( <select> )和按钮( <input type="submit"> )等。

效果展示

表单样式效果

注意：在设置表单内元素布局时，记得用<div>包一包，会更好布局，第一次做的时候，虽然包了，但是包的范围太大了，设置样式的时候费老劲啦~~

代码展示

<!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>
<link rel="stylesheet" href="style.css">
<body>
    <div class="container">
        
        <div class="header"><h3>User Register</h3></div>
        <form action="">
            <div class="reg-options">
                <input type="text" id="name" placeholder="用户名">
            </div>
            <div class="reg-options">
                <input type="text" id="pwd" placeholder="密码">
            </div>
            <div class="reg-options">
                <input type="text" id="confirm-pwd" placeholder="确认密码">
            </div>
            <div class="reg-options">
                <input type="text" id="phone" placeholder="联系电话">
            </div>
            <div class="reg-options">
                <input type="text" id="email" placeholder="电子邮箱"><br>
            </div>
            
            <div class="reg-options-radio">
                <div class="options-radio">
                    <label for="gender">性别：</label>
                    <label for="sex">男</label><input type="radio" name="gender" id="man">
                    <label for="sex">女</label><input type="radio" name="gender" id="woman">
                </div>
            </div>
            <div class="reg-register">
                <input type="button" value="注册">
            </div> 
            <div class="reg-reset">
                <input type="reset" value="重填">
            </div>    
        </form>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(175, 199, 244);
}
.container{
    width: 298px;
    height: 548px;
    margin: 100px auto; 
    background-color: #dcdef4;
    border-radius: 10px;
    cursor: pointer;
    /* padding-top: 50px; */
}
.header{
    width: 100%;
    height: 100px;
    overflow: hidden;
}
.header h3{
    margin: 55px 0 0 0;
    text-align: center;
}
.container .reg-options{
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
}
.container .reg-options input{
    outline: none;
    padding-left: 8px;
    width: 210px;
    height: 33px;
    border: 2px solid black;
}
.container .reg-options-radio{
    height: 50px;
    width: 100%px;
    line-height: 50px;
}
.options-radio{
    width: 220px;
    height: 33px;
    margin: 0 auto;
    line-height: 33px;
}
.reg-register{
    width: 100%;
    height: 50px;
    text-align: center;
}
.reg-register input{
    background-color: rgb(150, 163, 236);
    width: 220px;
    height: 37px;
    border: 2px solid black;
    color: white;
}
.reg-reset{
    width: 100%;
    height: 50px;
    text-align: center;
}
.reg-reset input{
    background-color: rgb(150, 163, 236);
    width: 220px;
    height: 37px;
    border: 2px solid black;
    color: white;
}