表单元素

最新推荐文章于 2024-08-21 22:36:29 发布

wkxjhngw

最新推荐文章于 2024-08-21 22:36:29 发布

阅读量101

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_50945128/article/details/113086728

版权

笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

表单元素

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

input元素

输入框

type属性：输入框类型

type: text，普通文本输入框
type：password，密码框
type: date, 日期选择框，兼容性问题

    <p>
        <!-- 普通文本输入框 -->
        <input type="text" placeholder="请输入账号">
    </p>

    <p>
        <!-- 密码框 -->
        <input type="password" placeholder="请输入密码">
    </p>

    <p>
        <!-- 日期选择框 -->
        <input type="date">
    </p>

在这里插入图片描述

type: search, 搜索框，兼容性问题
type：range，滑块
type：color，颜色选择
type: number，数字输入框

    <p>
        <!-- 搜索框 -->
        <input type="search">
    </p>

    <p>
        <!-- 滑块 -->
        <input type="range" min="0" max="5">
    </p>

    <p>
        <!-- 颜色选择 -->
        <input type="color">
    </p>

    <p>
        <!-- 数字输入框 -->
        <input type="number" min="0" max="100" step="20">
    </p>

在这里插入图片描述

type: checkbox，多选框（默认选中：checked ）
type: radio，单选框
type：file，选择文件

<p>
    <!-- 多选框 -->
    <input type="checkbox">a
    <input type="checkbox">b
    <input type="checkbox">c
</p>
<p>
    <!-- 单选框 -->
    <input type="radio">x
    <input type="radio">y
</p>
<p>
    <!-- 选择文件 -->
    <input type="file">
</p>

在这里插入图片描述

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

input元素可以制作按钮

当type值为reset（重置）、button（普通）、submit（提交）时，input表示按钮。

<p>
    <input type="reset" value="这是一个重置按钮">
    <input type="button" value="这是一个普通按钮">
    <input type="submit" value="这是一个提交按钮">
</p>

在这里插入图片描述

select元素

下拉列表选择框

通常和option元素配合使用

默认选中：selected(布尔属性)

<p>
    请选择你喜欢的歌曲
    <!-- multiple->多选（布尔属性） -->
    <select multiple>
        <optgroup label="英文歌">
            <option selected>Say So</option>
            <option >for him</option>
            <option >Yellow Hearts</option>
        </optgroup>
        <optgroup label="中文歌">
            <option >情非得已</option>
            <option >他不懂</option>
        </optgroup>   
    </select>
</p>

在这里插入图片描述

optgroup：表示分组 <optgroup label=""></optgroup>
label：表示分组的名字

textarea元素

文本域，多行文本框

cols表示列，rows表示行，一般建议使用css书写textarea的宽高

<p>
    请填写简介：
    <textarea style="width:200px;height:100px;" placeholder="请输入简介"></textarea>
</p>

在这里插入图片描述

无空白折叠

按钮元素

button

type属性：reset、submit、button，默认值submit

表单状态

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

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

<p>
    用户账号：
    <input readonly type="text" value="abc">
</p>
<p>
    用户账号：
    <input disabled type="text" value="abc">
</p>

在这里插入图片描述

配合表单元素的其他元素

label

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

显示关联

可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值

<input id="radMale" name="gender" type="radio">
<label for="radMale">男</label>

隐式关联

<label>
    <input name="gender" type="radio">
    女
</label>

在这里插入图片描述

label里面不允许放div元素

datalist

数据列表

该元素本身不会显示到页面，通常用于和普通文本框配合

<p>
    请输入你常用的浏览器
    <input list="userAgent" type="text">
</p>
<datalist id="userAgent">
    <option value="Chrome">谷歌浏览器</option>
    <option value="IE">IE浏览器</option>
    <option value="Fire fox">火狐浏览器</option>
    <option value="Safari">苹果浏览器</option>
</datalist>

在这里插入图片描述（不太会用，有兼容性问题

form元素

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

form元素对开发静态页面没有什么意义。

<form action="" method=""></form>

action：提交表单的地址（不写即提交到当前页面）
method：表示提交方式

表单元素要写name属性，否则数据不会提交到服务器
提交的是value值

fieldset元素

表单分组

<div>
    <h1>修改用户信息</h1>
    <fieldset>
        <legend>账号信息</legend>
        <p>
            用户账号：
            <input type="text" placeholder="请输入账号">
        </p>
        <p>
            用户密码：
            <input type="password" placeholder="请输入密码">
        </p>
    </fieldset>

    <fieldset>
        <legend>基本信息</legend>
        <p>
            用户姓名：
            <input type="text">
        </p>
        <p>
            城市：
            <select name="" id="">
                <option value="">Lorem.</option>
                <option value="">Vel!</option>
                <option value="">Dolore?</option>
                <option value="">Autem?</option>
                <option value="">Nulla?</option>
                <option value="">Aliquam?</option>
                <option value="">Obcaecati!</option>
                <option value="">Nulla!</option>
                <option value="">Totam.</option>
                <option value="">Ipsum.</option>
            </select>
        </p>
    </fieldset>
    <p>
        <button>提交修改</button>
    </p>
</div>

在这里插入图片描述

美化表单元素

新的伪类

focus

元素聚焦时的样式

outline: -webkit-focus-ring-color auto 1px;

outline：表示外边框
第一个是颜色，auto表示外边框的style是自动的，而不是实现实线或者其他，当设为auto之后，后面的1px就没有用

outline-offset表示外边框的偏移量，可以为正也可以为负

checked

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

常见用法

重置表单元素样式
设置textarea是否允许调整尺寸

textarea的css属性：resize

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

文本框边缘到内容的距离

1）使用padding，设置内边距
2）使用text-indent表示首行缩进

控制单选和多选的样式

<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>

<style>
    .radio-item .radio {
        width: 12px;
        height: 12px;
        border: 1px solid #999;
        border-radius: 50%;
        cursor: pointer;
        display: inline-block;
    }

    .radio-item input:checked+.radio{
        border-color: #008c8c;
    }

    .radio-item input:checked~span{
        color:#008c8c;
    }

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

    .radio-item input[type="radio"]{
        display: none;
    }
</style>