반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
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 31
Tags
more
Archives
Today
Total
관리 메뉴

비전공개미 개발노트

HTML/JavaScript - input입력 / select선택 / radio선택 / checkbox선택 되어있는지 체크하기 본문

프론트엔드/HTML

HTML/JavaScript - input입력 / select선택 / radio선택 / checkbox선택 되어있는지 체크하기

비전공개미 2022. 10. 4. 17:29
반응형
SMALL
<!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.0">
    <title>testForm.html</title>
    <style>
        /* * {font-size: 16pt;}*/
    </style>
    <script>
        function check(){
            //이름입력체크
            let namechk = document.joinForm.user_name.value;
            if(namechk == ""){
                alert("이름을 입력해주세요");
                document.joinForm.user_name.focus();
                return false;
            }
            //비밀번호입력체크
            let pwdchk = document.joinForm.user_passwd.value;
            if(pwdchk == ""){
                alert("비밀번호를 입력해주세요");
                document.joinForm.user_passwd.focus();
                return false;
            }
            //성별체크여부
            let genderchk = document.getElementsByName('gender');
            let genderChecked = null;
            for(var i=0; i<genderchk.length; i++){
                if(genderchk[i].checked == true){
                    genderChecked = genderchk[i].value;
                }
            }
            if(genderChecked == null){
                alert("성별을 체크해주세요");
                //genderchk.focus();
                return false;
            }
            //취미체크여부
            let hobbychk = document.getElementsByName('hobby');
            let hobbyChecked = null;
            for(var i=0; i<hobbychk.length; i++){
                if(hobbychk[i].checked == true){
                    hobbyChecked = hobbychk[i].value;
                    break;
                }
            }
            if(hobbyChecked == null){
                alert("취미를 체크해주세요");
                //hobbychk.focus();
                return false;
            }
            //직업체크여부
            let jobchk = document.getElementById('job');
            let jobval = jobchk.options[jobchk.selectedIndex].value;
            
            if(jobval == ""){
                alert("직업을 선택해주세요");
                jobchk.focus();
                return false;
            }
            //내용체크
            let memochk = document.joinForm.memo.value;
            if(memochk == ""){
                alert("내용을 적어주세요");
                document.joinForm.memo.focus();
                return false;
            }
        }

    </script>
</head>
<body>
    <h2>입력폼화면생성</h2>
    <div style="width:400px">
        <form name="joinForm" action="" onsubmit="return false;">
            <fieldset>
                <legend>입력화면 test</legend>
                <div class="input_group">
                    <label>이름 : </label>
                    <input type="text" name="user_name">
                </div>
                <div class="input_group">
                    <label>비번 : </label>
                    <input type="password" name="user_passwd">
                </div>
                <div>
                    <label>성별 : </label>
                    <label><input type="radio" name="gender" value="M">남자</label>
                    <label><input type="radio" name="gender" value="F">여자</label>
                </div>
                <div>
                    <label>취미 : </label>
                    <label><input type="checkbox" name="hobby" value="soccer">축구</label>
                    <label><input type="checkbox" name="hobby" value="golf">골프</label>
                    <label><input type="checkbox" name="hobby" value="movie">영화</label>
                    <label><input type="checkbox" name="hobby" value="game">게임</label>
                </div>
                <div>
                    <label>직업 : </label>
                    <select id="job" name="job">
                        <option value="">---직업을 선택해주세요---</option>
                        <option value="dev">개발자</option>
                        <option value="dba">DBA</option>
                        <option value="pub">Web퍼블리셔</option>
                        <option value="network">Network관리자</option>
                    </select>
                </div>
                <div>
                    <label>파일 : </label>
                    <input type="file" name="myfile" size="20">
                </div>
                <div>
                    <label>내용 : </label>
                    <div>
                        <textarea name="memo" cols="30" rows="3"></textarea>                    
                    </div>
                </div>
                <div>
                    <input type="submit" value="데이터등록" onclick="check();">
                    <input type="reset" value="입력취소">
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>
testForm.html

입력폼화면생성

입력화면 test

 

 

 

input text

input radio

input checkbox

select

textarea

 

입력폼마다 각각 값이나 선택항목이 체크되어있는지 확인하고 넘기기

반응형
LIST
저작자표시 (새창열림)

'프론트엔드 > HTML' 카테고리의 다른 글

HTML/JavaScript - [문제풀이] drag & drop으로 사진옮기기  (1) 2022.10.04
HTML 2일차 - 태그유형, 자바스크립트 사용방법  (0) 2022.09.30
HTML 1일차 - [문제풀이] 테이블만들기  (0) 2022.09.29
HTML 1일차 - 기본구성 및 태그  (0) 2022.09.29
'프론트엔드/HTML' Related Articles more
Comments