表单元素及美化

最新推荐文章于 2022-12-13 15:04:48 发布

march on_6

最新推荐文章于 2022-12-13 15:04:48 发布

阅读量773

点赞数 2

文章标签：前端 html

本文链接：https://blog.csdn.net/yyh619/article/details/121776197

版权

表单元素

其下包含一系列元素，主要用于收集用户数据，其通常为行盒。

input元素

——为输入框元素，且其为空元素。

内部属性

type属性（输入框类型）

type: text——普通文本输入框

type：password——密码框

type: date,——日期选择框

type: search——搜索框

type: checkbox——多选框

type: radio——单选框

注意：当type值为checbox或radio时，要给对应框设置name来区分组别。

value属性(输入框的值)

placeholder属性(显示提示的文本，文本框没有内容时显示)

select元素

——下拉列表选择框元素

1.常见子元素：

通常和option元素配合使用，option作为其中选项。

2.内部可搭配属性：

selected属性（被选中的值）

multiple属性（多选，搭配可使其变为下拉多选框）

textarea元素

——文本域，多行文本框

button元素

——按钮键

内部可搭配属性

type属性设置：

type: reset——重置按钮

type：submit——呈递按钮（默认）

type: button——普通按钮

表单状态

readonly属性：布尔属性，是否只读——不会改变表单显示样式

disabled属性：布尔属性，是否禁用——会改变表单显示样式

配合表单元素的元素

label元素

——使字与按钮键产生关联，通常配合单选和多选框使用

注意：不能在内部加div盒子，可以加span元素

具体方式

显示关联，可以通过for属性，让label元素关联某一个表单元素，for属性下书写表单元素id的值
隐式关联，直接将其书写为引用元素父元素。例如：<label><input......></label>

fieldset元素

——表单分组元素，将对内容分组。

表单元素美化

两种伪类选择器

：focus

——元素聚焦时的样式

input:focus {

    outline:1px solid #008c8c;

    outline-offset:0;

}

：checked

——单选或多选框被选中的样式

文本框边缘到内容的距离

padding；——控制边缘的内边距
text-indent；——控制文本缩进

美化单选框：

<!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>
</head>
<style>
    label{
        color:cadetblue;
    }

    .radio{
        width: 12px;
        height: 12px;
        border: 1px solid rgb(34, 43, 163);
        border-radius: 50%;
        cursor: pointer;
        display: inline-block;
    }

    input:checked+.radio::after{
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        background-color: seagreen;
        margin-left: 3.5px;
        margin-top: 3.5px;
        border-radius: 50%;
    }

    input:checked+.radio{
        border: 1px solid seagreen;
    }
    
    input{
        /* visibility: hidden; */
        display: none;
    }

    input:checked~span{
        color: brown;
    }

</style>
<body>
    选择性别：
    <label>
        <input type="radio" name="choose">
        <span class="radio"></span>
        <span>男</span> 
    </label>
    <label>
        <input type="radio" name="choose">
        <span class="radio"></span>
        <span>女</span>
    </label>
   

</body>
</html>

march on_6

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
表单元素及美化

表单元素其下包含一系列元素，主要用于收集用户数据，其通常为行盒。 input元素 ——为输入框元素，且其为空元素。内部属性type属性（输入框类型）type: text——普通文本输入框type：password——密码框type: date,——日期选择框type: search——搜索框type: checkbox——多选框type: radio——单选框注意：当type值为checbox或radio时，要给对应框设置name来区分组别。val
复制链接

扫一扫