티스토리 뷰

수업/└HTML&CSS

라디오 타입과 이벤트

onlyun 2022. 1. 11. 21:51 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 이벤트 : 라디오 버튼 </title>
</head>
<body>
    <form action="a.jsp" method="post" name="frm">
        Sex : 
        <input type="radio" name="gender" value="female">female
        <input type="radio" name="gender" value="male">male
        <br>
        Hobby
        <input type="checkbox" name="hobby" value="game" checked>game
        <input type="checkbox" name="hobby" value="baseball">baseball
        <input type="checkbox" name="hobby" value="travel">travel
        <br>
        <input type="button" value="submit" onclick="checkForm()">
    </form>

    <script>
        function checkForm() {
            if(frm.gender[0].checked == false && frm.gender[1].checked == false) {
                alert('성별을 선택해주세요');
                frm.gender.focus();
            }
            if (frm.hobby[0].checked == false
                && frm.hobby[1].checked == false
                && frm.hobby[2].checked == false) {
                    alert('취미를 선택해주세요.');
                    frm.hobby.focus();
            }
            frm.submit();
        }
    </script>
</body>
</html>
저작자표시 (새창열림)

'수업 > └HTML&CSS' 카테고리의 다른 글

[화면구현과 설계]웹사이트 구현 과제_epilogue  (0) 2022.01.17
<form>태그와 이벤트 복습  (0) 2022.01.11
<label>  (0) 2022.01.10
<figure>  (0) 2022.01.10
함수 : 선언, 리턴,  (0) 2022.01.06
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/06   »
일 월 화 수 목 금 토
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
글 보관함