티스토리 뷰

HTML

Form - radio & checkbox

baegofda_ 2021. 8. 16. 18:38

* radio

  • 선택지 중에 한가지만 고를 수 있다.
  • 연관된 선택지의 경우 name을 일치시키며 각 선택지에대한 value값을 부여한다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Form</title>
    </head>

    <body>
        <form action="" method="POST">
            <input
                type="radio"
                name="subscription"
                value="1"
                id="subscription"
            />
            <label for="subscription">구독</label>
            <input
                type="radio"
                name="subscription"
                value="0"
                id="unsubscription"
            />
            <label for="unsubscription">미구독</label>
            <button>확인</button>
        </form>
    </body>
</html>

선택지중 한가지만 선택이 가능하다

* checkbox

  • 선택지중 다중선택이 가능하다.
  • radio와 마찬가지로 연관된 선택지의 경우 name을 일치시키며 각 선택지에 value값을 부여한다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Form</title>
    </head>

    <body>
        <form action="" method="POST">
            <input type="checkbox" name="checkbox" value="1" id="apple" />
            <label for="apple">사과</label>
            <input type="checkbox" name="checkbox" value="2" id="banana" />
            <label for="banana">바나나</label>
            <input type="checkbox" name="checkbox" value="3" id="melon" />
            <label for="melon">메론</label>
            <button>확인</button>
        </form>
    </body>
</html>

선택지중 다중선택이 가능하다

저작자표시

'HTML' 카테고리의 다른 글

Form - textarea  (0) 2021.08.16
Form - select & option  (0) 2021.08.16
Form - input & label  (0) 2021.08.16
Form 태그란?  (0) 2021.08.16
Anchor (링크) & Image  (0) 2021.08.16
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함