前端学习13 | 表单扩展进阶

最新推荐文章于 2024-09-09 21:14:24 发布

printfbaozw

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量140

点赞数

文章标签：前端学习 html

本文链接：https://blog.csdn.net/printfbaozw/article/details/129339090

版权

系列文章目录

文章目录

系列文章目录
前言
一、单选框
二、复选框（多选功能）
三、上传文件
四、下拉菜单
五、文本域（文本输入框）
六、字段集
总结

前言

这里是对表单做一个相对扩展。

一、单选框

我们可以通过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>
    <h1>你的评价是？</h1>
    <div>
        <input type="radio" name="aaa" id="good">
        <label for="good">非常满意</label>
    </div>
    <div>
        <input type="radio" name="aaa"  checked="checked">非常满意
    </div>
    <div>
        <input type="radio" name="aaa">非常满意
    </div>
    <div>
        <input type="radio" name="aaa">非常满意
    </div>
</body>
</html>

运行后，查看结果为：
在这里插入图片描述
接下来我们对代码进行解释：

type=“radio” ：是指单选框前面的圆圈，用于点击选中，单击就会点亮。
name=“aaa” ：aaa是笔者自定义的变量，意思是在aaa组中，代表的是aaa中只能选一个。
checked=“checked” ：是指默认点亮，放在哪个选项，哪个选项就会在刷新之后自动点亮。
label标签：需要配合input标签的id属性，在for中填入id，就可以实现单击文字选择选项。
disable：在input中加入disable可以禁用该选项。

二、复选框（多选功能）

复选框与单选框基本相同，这里只列举代码，不做过多说明：

<!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>
        *{
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>你的爱好是？</h1>
    <div>
        <div>你的爱好有</div>
        <div>
            <input type="checkbox" name="aaaa" id="1">
            <label for="1">1111</label>
            <input type="checkbox" name="aaaa" id="2">
            <label for="2">2222</label>
            <input type="checkbox" name="aaaa" id="3">
            <label for="3">3333</label>
        </div>
    </div>
</body>
</html>

运行结果为：
在这里插入图片描述
与单选框相比，只有type="checkbox"发生了改变，由圆点变成了方框。

三、上传文件

代码示例如下：

<!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>
        *{
            padding: 5px;
        }
    </style>
</head>
<body>
    <div>
        <div>上传文件：</div>

        <div>
            <input type="file" name="" id="">
        </div>

        <div>上传图片：</div>
        <form>
            <input type="image" src="图片链接" height="100px" width="100px">
        </form>

        <div>隐藏按钮</div>
        <div>
            <input type="hidden">
        </div>
        
    </div>
</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>
    <style>
        .a{
            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <h1 class="a">下拉菜单部分</h1>
    <div class="a">
        <div>你是哪个省的</div>
        <select size="1">
            <option>妈妈生的</option>
            <option>吉林</option>
            <option>辽宁</option>
            <option>广东</option>
            <!--
                multiple：代表多选，用在select中

                option:
                1. value,提供给后端需要用到的值
                2. select， 默认选中
            -->
        </select>
    </div>
</body>
</html>

multiple：代表多选，用在select中

option:

value，提供给后端需要用到的值
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>
    <style>
        *{
            position: relative;
            top: 10px;
            left: 10px;
        }
        textarea{
            resize: none;
        }
    </style>
</head>
<body>
    <h1>多行文本输入框</h1>
    <div>
        <textarea cols="30" rows="10" placeholder="请输入你想说的话"></textarea>
    </div>
</body>
</html>

运行后查看结果：
在这里插入图片描述
其中，resize的值可以为vertical，horizontal，both，none，分别代表允许竖直，允许水平，任意拉伸，禁止拉伸。

六、字段集

示例代码如下：

<!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>
        fieldset{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h1>字段集</h1>
    <fieldset>
        <legend>个人信息</legend>
        <input type="radio" name="aa">man
        <br>
        <input type="radio" name="aa">woman
    </fieldset>
</body>
</html>