【Web前端HTML+CSS——表单知识点及相关案例】

Nempohilist.

已于 2023-02-24 10:31:16 修改

阅读量684

点赞数 1

分类专栏：前端文章标签：前端 html css html5

于 2023-02-24 10:30:41 首次发布

本文链接：https://blog.csdn.net/weixin_64993156/article/details/129144657

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

表单元素

一系列元素，主要用于收集用户数据

input元素

输入框

type元素：输入框的类型

type：text，普通文本输入框
type：password，密码框
type:date，日期选择框，兼容性问题
type：search，搜索框，兼容性问题
type：number，数字输入框
type:checkbox，多选框
type：radio，单选框
type：file，选择文件

value属性：输入框的值；
placeholder属性：显示提示的文本，文本框没有内容时显示

input元素可以制作按钮

type取值为：submit button reset

select元素

下拉列表选择框

通常和option配合使用

textarea元素

文本域，多行文本框(例如：简介)

按钮元素

button

type属性：reset,submit,button,默认值:submit

表单状态(可替换元素不能完全控制)

readonly属性：布偶属性，是否只读，不会改变表单显示样式、
disabled属性：布偶属性，是否禁用，会改变表单样式

配合表单元素的其他元素

label

普通元素，通常配合单选和多选框使用

显示关联
可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值
隐式关联
label套在最外层

datalist(存在兼容性问题，了解即可)

通常与普通文本框连用，例如搜索时弹出来的框框，默认情况不显示，其他情况都可以进行修改，注意与搜索框不同，不能混淆，这个属性很少用，他有局限性。

form元素

通常情况下，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。

form元素对于开发静态页面，意义不大，后期学服务器配合

fieldset元素

表单分组

表单元素代码练习：

表单元素代码练习1——input元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 输入框 -->
    <p>
        <input type="text" placeholder="请输入账号">
    </p>
    <!-- 密码框 -->
    <p>
        <input type="password" placeholder="请输入密码">
    </p>
    <!-- 日期选择框 -->
    <p>
        <input type="date" name="" id="">
    </p>
    <!-- 搜索框 -->
    <p>
        <input type="search" name="" id="">
    </p>
    <!-- 滑块 -->
    <p>
        <input type="range" min="0" max="5">
    </p>
    <!-- 颜色选择框 -->
    <p>
        <input type="color">
    </p>
    <!-- 数字输入框 -->
    <p>
        <input type="number" min="0" max="10" step="2">
    </p>
    <!-- 多选框 -->
    <p>
        爱好：
        <input name="loves" type="checkbox">
        舞蹈
        <input name="loves" type="checkbox">
        音乐
        <input name="loves" type="checkbox">
        画画
        <input name="loves" type="checkbox">
        书法
    </p>
    <!-- 单选框 -->
    <p> 
        性别：
        <input name="gender" type="radio">
        男
        <input name="gender" type="radio">
        女
    </p>
    <!-- 选择文件 -->
    <p>
        <input type="file">
    </p>
    <!-- 按钮 -->
    <p>
        <input type="reset">
    </p>
    <p>
        <input type="button">
    </p>
    <p>
        <input type="submit">
    </p>
</body>
</html>

表单元素代码练习2——button datalist fieldset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <button type="button">
            这是一个按钮
        </button>
    </p>
</body>
</html>

表单元素代码练习3——datalist


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    请输入你想搜索的浏览器
    <p>
        <input list="userAgrent" type="text">
    </p>

    <datalist id="userAgrent">
        <option value="Chrome">谷歌浏览器</option>
        <option value="IE">IE浏览器</option>
        <option value="Operate">欧鹏浏览器</option>
        <option value="Apple">苹果浏览器</option>
        <option value="Fire">搜狐浏览器</option>
    </datalist>  
</body>
</html>

表单元素代码练习4——fieldset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>修改用户信息：</h1>
        <fieldset>
            <legend>账号密码</legend>
            <p>
                用户账号：
                <input type="text">
            </p>
            <p>
                用户密码：
                <input type="password">
            </p>
            <p>
                用户姓名：
                <input type="text">
            </p>
        </fieldset>
        <p>
            用户账号：
            <input type="text">
        </p>
        <p>
            用户密码：
            <input type="password">
        </p>
        <p>
            用户姓名：
            <input type="text">
        </p>
        <p>
            用户城市：
            <select name="" id="">
                <option value="">成都</option>
                <option value="">重庆</option>
                <option value="">江西</option>
                <option value="">厦门</option>
                <option value="">云南</option>
                <option value="">北京</option>
                <option value="">天津</option>
                <option value="">上海</option>
            </select>
        </p>
        <p>
            <button>
                提交修改
            </button>
        </p>


    </div>
</body>
</html>

表单元素代码练习5——select元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <select name="" id="">
            <option>成都</option>
            <option>北京</option>
            <option>云南</option>
            <option>重庆</option>
            <option>长沙</option>
            <option>三亚</option>
            <option>广西</option>
        </select>
    </p>

    <p>
        请选择你最想下载的软件
        <select name="" id="">
            <optgroup label="游戏">
                <option>英雄联盟</option>
                <option>魔兽世界</option>
                <option>和平精英</option>
                <option>王者荣耀</option>

            </optgroup>
            <optgroup label="娱乐">
                <option>QQ</option>
                <option>微信</option>
                <option>小红书</option>
                <option>Facebook</option>
                <option>抖音</option>

            </optgroup>
        </select>
    </p>

    <p>
        请选择你想要下载的软件：
        <select multiple>
            <optgroup label="游戏">
                <option>英雄联盟</option>
                <option>魔兽世界</option>
                <option>和平精英</option>
                <option>王者荣耀</option>

            </optgroup>
            <optgroup label="娱乐">
                <option>QQ</option>
                <option>微信</option>
                <option>小红书</option>
                <option>Facebook</option>
                <option>抖音</option>

            </optgroup>
        </select>
    </p>
</body>
</html>

表单元素代码练习6——label元素


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        请选择性别
        <input id="radMale" name="gender" type="radio">
        <label for="radMale">男</label>
        <input id="radWomale" name="gender" type="radio">
        <label for="radWomale">女</label>

    </p>
</body>
</html>

美化表单元素

新的伪类

focus

元素聚焦时的样式

tabindex 和 z-index 都可以应用数字来表示顺序

需要统一样式，就应该覆盖浏览器的默认样式

checked

单选和多选框都是可替换元素，一些样式不可以控制

单选和多选被选中的样式

text-align不是文本居中，而是行盒和行块盒居中

常见用法

重置表单元素的样式
设置多行文本框textarea是否允许调整尺寸

resize属性：

both：默认值，两个方向都可以调整尺寸
none：不能调整尺寸
horizoncal:水平方向可以调整尺寸
vertical：垂直方向可以调整尺寸

文本框边缘到内容的距离

两种方式：
用padding左右都可以设置；用text-indent只可以设置首行缩进

控制单选和多选的样式

美化表单练习代码1：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <a tabindex="3" href="">Lorem.</a>
    <p>
        <input tabindex="2" type="text">
    </p>
    <button tabindex="1" type="button">
        提交
    </button>
</html>

美化表单练习代码2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:checked+label{
            background-color:darksalmon;
        }
    </style>
</head>
<body>
    <p>
        <input id="radMale" name="gender" type="radio">
        <label for="radMale">男</label>
        <input id="radWomale" name="gender" type="radio">
        <label for="radWomale">女</label>
    </p>
</body>
</html>

美化表单练习代码3：（CSS代码没包含）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/myform.css">
</head>
<body>
    <select name="" id="">
        <option value="">lorem</option>
        <option value="">ipsum.</option>
        <option value="">lorem</option>
        <option value="">hjav</option>
        <option value="">dnwkd</option>
        <option value="">lekwd</option>
        <option value="">ljwd</option>
        <option value="">lodwdm</option>
        <option value="">hjhdda</option>
    </select>
    <p>
        <input type="text">
    </p>
    <p>
        <button type="button">提交</button>
    </p>
    <p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
</body>
</html>

美化表单练习代码4：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input,textarea{
            text-indent: 1em;
        }
    </style>
</head>
<body>
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

美化表单练习代码5：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漂亮的单选框</title>
    <style>
        .radio{
            position: relative;
            /* background-color: #fff; */
            outline: 2px solid #000;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
        }
        .radio.checked{
            background: #fff;
        }
        .radio.checked::after{
            display: block;
            background: #008c8c;
            position: absolute;
            content:"" ;
            width: 8px;
            height: 8px;
            outline: solid 1px #000;
            margin-top: 6px;
            margin-left: 6px;
            border-radius: 50%;
        }

    </style>
</head>
<body>
    <div class="radio checked">


    </div>
</body>
</html>

美化表单练习代码6：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>Document</title>
    <style>
        .radio-item .radio{
           display: inline-block;
            background-color: #fff;
            border: solid 1px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
        }

        .radio-item input:checked+.radio::after{
            display: inline-block;
            background: #008c8c;
            position: absolute;
            content:"" ;
            width: 8px;
            height: 8px;
            outline: solid 1px #000;
            margin-top: 6px;
            margin-left: 6px;
            border-radius: 50%;

        }

    </style>
</head>
<body>
    <p>
        请选择性别：
        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>男</span>
        </label>
        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </p>
</body>
</html>

进阶表单——完整案例(登录页面)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <form  class="contain">
        <h1>用户注册</h1>
        <div class="form-item">
            <input class="txt" type="text" placeholder="请输入账号" maxlength="11">
        </div>
        <div class="clearfix form-item">
            <input class="txt left captcha" type="text" placeholder="请输入验证码">
            <button class="right specific" type="button">发送验证码</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 class="txt" multiple>
                <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="clearfix form-item">
            <div class="title left">性别</div>
            <div class="left">
                <label>
                    <input type="radio" name="gender">
                    <span>男</span>
                </label>
                <label>
                    <input type="radio" name="gender">
                    <span>女</span>
                </label>
            </div>
            
        </div>
        <div class="form-item">
            <textarea class="txt" cols="30" rows="10" placeholder="请输入个人简历"></textarea>
        </div>
        <div class="form-item">
            <label>
                <input type="checkbox" checked>
                <span class="policy">同意本平台的一切相关策略</span>
            </label>   
        </div>
        <div class="form-item">
            <button disabled type="submit"><a href="../新空间/pageMaking.html">立即注册</a></button>
            <button type="reset">重置表单</button>
        </div>
    </form>
</body>
</html>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    background: #081620;
}

.contain{
    background: #fff;
    width: 400px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 20px;
    border-radius: 15px;
}

.contain h1{
    /* outline: 1px solid #000; */
    text-align: center;
    margin-bottom: 20px;
}

.form-item{
    margin-bottom: 10px;
}

.txt{
    outline: none;
    border: 1px solid #ccc;
    width: 100%;
    font-size: 14px;
    padding: 0 10px;
    border-radius: 10px;
    height: 40px;
}

.txt:focus{
    border-color: #5f8be8;
}

/* 单独处理文本框的样式 */
select.txt{
    height: 100px;
    padding: 10px;

}

textarea.txt{
    resize: none;
    height: 100px;
    padding: 10px;
}

/* 按钮的统一样式 */
button{
    width: 100px;
    height: 40px;
    background: #5f8be8;
    font-size: 14px;
    border: none;
    outline: none;
    border-radius: 5px;
    cursor: pointer;
    color: #000;
}

/* 按钮点击的样式 */
button:hover{
    background: #2864e6;
}

/* 禁止按钮的样式 */
/* button:disabled{
    background: #a8bdeb;
    cursor: not-allowed;
} */

.left{
    float:left;
}

.right{
    float: right;
}
/* 清除浮动 */
.clearfix::after{
    content: ;
    display: block;
    clear: both;
}
/* 特殊情况的处理 */
.captcha{
    width: 210px;
}

.specific{
    margin-right: 20px;
}

.title{
    margin-right: 8px;
}

.policy{
    font-size: 12px;
}

.policy span{
    vertical-align: 2px;
}

/* 单选框和多选框的选中状态 */
label{
    color: rgb(82, 80, 80);
}

label span{
    cursor: pointer;
}

label input:checked~span{
    color: rgb(20, 19, 19);
}
.txt::placeholder{
    color: rgb(92, 88, 88);
}

.txt:focus::placeholder{
    color:#333

}