前端 HTML form表單標籤 input標籤 type屬性 checkbox 多選框

時間 2019-11-20

標籤前端 html form 表單標籤 input type 屬性 checkbox 欄目 HTML 简体版

原文原文鏈接

多選框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>
    <form action="http://www.baidu.com" method="get">
        <div>
            <!-- 複選框 -->
            <p>
                用戶愛好:
                羽毛球<input type="checkbox" value="1">
                籃球<input type="checkbox" value="2">
                足球<input type="checkbox" value="3">
                讀書<input type="checkbox" value="4">
            </p>

        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

name屬性設置爲同樣，這樣後臺就知道用戶選中了幾個ui

<!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>
    <form action="http://www.baidu.com" method="get">
        <div>
            <!-- 複選框 -->
            <p>
                用戶愛好:
                羽毛球<input type="checkbox" name="favor" value="1">
                籃球<input type="checkbox" name="favor" value="2">
                足球<input type="checkbox" name="favor" value="3">
                讀書<input type="checkbox" name="favor" value="4">
            </p>

        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

url上傳遞name屬性相同url

加上checked 讓這個選項默認被選中

<!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>
    <form action="http://www.baidu.com" method="get">
        <div>
            <!-- 複選框 -->
            <p>
                用戶愛好:
                羽毛球<input type="checkbox" name="favor" value="1" checked>
                籃球<input type="checkbox" name="favor" value="2">
                足球<input type="checkbox" name="favor" value="3">
                讀書<input type="checkbox" name="favor" value="4">
            </p>

        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。