【HTML入门】第十五课 - form表单（下）表单控件们（二）

最新推荐文章于 2024-09-24 11:22:03 发布

经海路大白狗

最新推荐文章于 2024-09-24 11:22:03 发布

阅读量463

点赞数 13

分类专栏： WEB前端小白从这里出发文章标签： html 前端服务器

本文链接：https://blog.csdn.net/xingyu_qie/article/details/140553102

版权

WEB前端小白从这里出发专栏收录该内容

33 篇文章 9 订阅

订阅专栏

上一小节我们说了文本输入框，密码输入框，数值型输入框，还有大的文本域。这一小节，我们继续说form表单中的一些常用的控件们。

1 单选按钮

2 复选框

3 下拉列表选择

1 单选按钮

单选按钮，就是说一组按钮中，我们只能选择一个，比如性别，只能选择男或者女，比如让我们挑选一个最喜欢的水果，那么我们就只能选择其中的一个。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <label for="name">性别:</label>
            <input type="radio" name="sex" value="male">男 &nbsp;&nbsp;
            <input type="radio" name="sex" value="female">女 &nbsp;&nbsp;
            <hr/>
        </form>
    </body>
</html>

这就是所谓的单选按钮，可以试着点一点，男或者女，只能选中其中一个。但单选按钮也是成组出现的，归类组别的属性是 name 。我们看，刚才这两个单选按钮呢，是通过 sex 属性值来归类的。

那么我们再添加一个组别呢，试一下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <label for="name">性别:</label>
            <input type="radio" name="sex" value="male">男 &nbsp;&nbsp;
            <input type="radio" name="sex" value="female">女 &nbsp;&nbsp;
            <input type="radio" name="fruit" value="apple">苹果 &nbsp;&nbsp;
            <input type="radio" name="fruit" value="pear">鸭梨 &nbsp;&nbsp;
            <hr/>
        </form>
    </body>
</html>

看，虽然看上去这些单选按钮像是一个组的，排列在一起了。但是，我们通过设定了不同的 name 属性值，使得这里可以归纳为2个组。我们可以分别对男女 苹果鸭梨 进行分组选择。

2 复选框

复选框呢，就是，不做单一的选择，而是可以多选择。比如我喜欢吃的水果，怎么可能只喜欢一种呢，对吧，比如体育运动，怎么可能只喜欢一种呢。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <label for="name">性别:</label>
            <input type="radio" name="sex" value="male">男 &nbsp;&nbsp;
            <input type="radio" name="sex" value="female">女 &nbsp;&nbsp;
            <input type="radio" name="fruit" value="apple">苹果 &nbsp;&nbsp;
            <input type="radio" name="fruit" value="pear">鸭梨 &nbsp;&nbsp;
            <hr/>
            <label for="name">喜欢的汽车:</label>
            <input type="checkbox" name="car" value="bc">奔驰 &nbsp;&nbsp;
            <input type="checkbox" name="car" value="bm">宝马 &nbsp;&nbsp;
            <input type="checkbox" name="car" value="ad">奥迪 &nbsp;&nbsp;
        </form>
    </body>
</html>

看上图可知，我们可以通过复选框，达到多选的效果。比如这3种汽车，我都喜欢，不知道你喜不喜欢呢。

3 下拉列表选择

下拉选择呢，有点类似单选按钮，但这是一种不同的展现形式。甚至，在项目开发中，下拉列表不光有单选的，还可以做成多选的。总之就是产品场景多种多样，我们需要将所学的知识灵活运用，以完成各种场景的项目开发，从而达到挣工资的效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <label for="name">性别:</label>
            <input type="radio" name="sex" value="male">男 &nbsp;&nbsp;
            <input type="radio" name="sex" value="female">女 &nbsp;&nbsp;
            <input type="radio" name="fruit" value="apple">苹果 &nbsp;&nbsp;
            <input type="radio" name="fruit" value="pear">鸭梨 &nbsp;&nbsp;
            <hr/>
            <label for="car">喜欢的汽车:</label>
            <input type="checkbox" name="car" value="bc">奔驰 &nbsp;&nbsp;
            <input type="checkbox" name="car" value="bm">宝马 &nbsp;&nbsp;
            <input type="checkbox" name="car" value="ad">奥迪 &nbsp;&nbsp;
            <hr/>
            <label for="grade">年级:</label>
            <select name="grade">
                <option value="1">一年级</option>
                <option value="2">二年级</option>
                <option value="3">三年级</option>
                <option value="4">四年级</option>
            </select>
        </form>
    </body>
</html>