【HTML5】-06 表单单选多选、下拉选项_html5表单单选

作者：繁依Fanyi0 | 2024-03-17 04:24:19

踩

html5表单单选

内容1：label

内容2：input type：radio单选； checkbox多选

内容3：select、option 下拉


<!DOCTYPE html>
 
 
<!-- 使用label为input标签穿上衣服 -->
 
<!-- label标签不会向用户呈现任何特殊效果，
它的作用是为鼠标用户改进了可用性。
如果你在 label 标签内点击文本，就会触发此控件。
就是说，当用户单击选中该label标签时，
浏览器就会自动将焦点转到和标签相关的表单控件上
（就自动选中和该label标签相关连的表单控件上）。 -->
 
<html>
    <head>
        <meta charset="UTF-8">
        <title> 表单学习 </title>
    </head>
 
    <body>
        <br>
        <h4>label单标签学习：</h4>
        <form action="">
            <!-- label for="控件id名称"> -->
            <label for="uname">名称</label>
            <input type="text" id="uname" placeholder="enter your name">
            <br><br>
            <label for="pass">密码</label>
            <input type="password" id="pass" placeholder="enter your password">
        </form>
        <br>
        <hr>
        <!-- input的另外两个type学习 -->
        <h4>选择复选框学习：input 的 type 为radio（单选框）；checkbox（复选框）</h4>
        <form action="save.php" method="post">
            （单选）你是否喜欢吃火锅<br>
            <!-- checked 是默认选项被选中 -->
            <input type="radio" name="radiolove" value="喜欢" checked="checked">喜欢
            <input type="radio" name="radiolove" value="不喜欢">不喜欢
            <input type="radio" name="radiolove" value="我不知道">我不知道
 
            <br><br>
            （多选）你喜欢以下哪种乐器<br>
            <input type="checkbox" name="lovecity" value="小提琴">小提琴
            <input type="checkbox" name="lovecity" value="钢琴" checked="checked">钢琴
            <input type="checkbox" name="lovecity" value="吉他">吉他
 
        </form>
        <br>
        <hr>
        <h4>下拉菜单学习：select 和 option 标签对</h4>
        <p>注意：select标签对中只能放置一个或多个 option 选项</p>
    
        <form>
            选择语言：<br>
            <select name="" id="">
                <option value="中文">中文</option>
                <option value="Englishi">English</option>
            </select>
        </form>
    </body>
</html>

效果：

select 的name id 有什么用？或者说这些标签的name id的用处是什么呢？

后面会学习，能利用不同的id控制不同的对象

学习：html5+css3：https://www.imooc.com/learn/9

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/253998