前端 HTML form表單標簽 select標簽 option 下拉框

本文轉載自查看原文 2019-04-02 18:30 7915 前端html

select里面通常跟option配合使用

<!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">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                <!-- 下拉框 -->
                <select>
                    <option>廣州</option>
                    <option>深圳</option>
                    <option>山東</option>
                    <option>北京</option>
                </select>
            </div>
        </form>
    </div>
</body>
</html>

加上name屬性提交后台，讓他提交到后台在每個<option>里面加value

<!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">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                <!-- 下拉框 -->
                <select name="sel">
                    <option value="1">廣州</option>
                    <option value="2">深圳</option>
                    <option value="3">山東</option>
                    <option value="4">北京</option>
                </select>
            </div>
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

url上顯示提交的值

select的size屬性

size取值大於1的話，則為滾動列表，否則就是下拉選項框，默認size等於1

<!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">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                <!-- 下拉框 -->
                <select name="sel" size="3">
                    <option value="1">廣州</option>
                    <option value="2">深圳</option>
                    <option value="3">山東</option>
                    <option value="4">北京</option>
                </select>
            </div>
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

select的multiple屬性

multiple屬性設置多選，該屬性出現在<select>中,那么就允許多選(針對滾動列表)

按着ctrl選多個

<!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">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                <!-- 下拉框 -->
                <select name="sel" size="3" multiple>
                    <option value="1">廣州</option>
                    <option value="2">深圳</option>
                    <option value="3">山東</option>
                    <option value="4">北京</option>
                </select>
            </div>
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

提交后台拿到兩個選中值

select標簽的selected 設置默認值
selected預選中，注意：如果不設置selected屬性的話，那么選項框中的第一項會默認被選中。

<!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">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                <!-- 下拉框 -->
                <select name="sel">
                    <option value="1">廣州</option>
                    <option value="2">深圳</option>
                    <option selected value="3">山東</option>
                    <option value="4">北京</option>
                </select>
            </div>
            <input type="submit" value="提交">
        </form>
    </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">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                <!-- 下拉框 -->
                <select name="sel" size="3" multiple>
                    <option value="1">廣州</option>
                    <option value="2">深圳</option>
                    <option selected value="3">山東</option>
                    <option value="4">北京</option>
                </select>
            </div>
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

optgroup 下拉框分組功能

用optgroup標簽包着option標簽，optgroup label屬性為組名

<!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">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                 <!-- optgroup 下拉框分組功能 -->
                <select name="city" size="5" multiple="multiple">
                    <optgroup label="廣東省">
                        <option value="1">廣州</option>
                        <option value="2">深圳</option>
                    </optgroup>

                    <optgroup label="浙江省">
                        <option value="1">杭州</option>
                        <option value="2">溫州</option>
                    </optgroup>
                </select>
            </div>
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 select下拉框option的樣式修改 jquery實現select下拉框可輸入+聯想關聯option thymeleaf的下拉框(select option)回顯選中如何獲取select下拉框中option選中的文本值 select下拉框如何與接口配合動態生成option選項 html基本標簽表單實現交互原理，單選框，復選框，下拉框介紹 HTML:form表單總結，input，select，option，textarea，label HTML xm-select多選下拉框的使用 select下拉框不能賦值 select下拉框美化