-
자바스크립트 - Form 폼 (양식) / 예제프로그래밍/JavaScript 자바스크립트 2021. 10. 6.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function send() { var f = document.forms[0]; // elements : FORM 요소에 담긴 form 컨트롤(input, select, button, textarea 등) 배열 반환 for(var i=0; i<f.elements.length-1; i++) { if(! f.elements[i].value) { alert("필수 입력 사항 입니다."); f.elements[i].focus(); return; } } var s = f.elements[0].value +"," + f.elements[1].value; alert(s); } </script> </head> <body> <h3>form 접근 : 'document.forms'로 접근</h3> <form> <p> 이름 : <input type="text"> </p> <p> 과목 : <input type="text"> </p> <p> <button type="button" onclick="send()">등록하기</button> </p> </form> </body> </html>- 일단 var f = document.forms[0]; 을 통해서 0번째 인덱스 즉 첫번째 폼을 f에 담고
- 폼이 담긴 f에서 여러 form 컨트롤 요소들을 찾는다. (비어있는 칸을 찾기 위해서)
- form 요소들을 찾기위해서는 elements[i]를 사용해야하는데 이건 배열임
- for문으로 전체 요소 길이만큼 반복문 돌리고 for문 안에서 if문으로 확인을 거침 f.elements[i].value를 했을때 값이 있으면 true 없으면 false 반환
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function send() { var f = document.myForm; if(! f.name.value) { f.name.focus(); return; } if(! f.subject.value) { f.subject.focus(); return; } var s = f.name.value + "," + f.subject.value; alert(s); } </script> </head> <body> <h3>form 접근 : 'document.폼이름' 으로 접근</h3> <form name="myForm"> <p> 이름 : <input type="text" name="name"> </p> <p> 과목 : <input type="text" name="subject"> </p> <p> <button type="button" onclick="send()">등록하기</button> </p> </form> </body> </html>위랑 같은 개념이지만 폼에 접근하는 방식이 인덱스가 아니라 폼 이름으로 접근함
폼 이름으로 접근하는 방법이 더 안전하고 좋음
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>submit 버튼 - 유효성 검사를 하지 않는 경우</h3> <form action="request.jsp" name="myForm" method="post"> <p> 이름 : <input type="text" name="name"> </p> <p> 나이 : <input type="text" name="age"> </p> <p> <button type="submit">전송하기</button> <!-- 서버로 전송할수 있는 기능을 가지고 있는 버튼 : submit 버튼, image 버튼 --> <!-- <button>에서 type="submit"을 생략하면 submit 버튼 --> <!-- submit 버튼, image 버튼등은 form 태그 안에 있어야 함 --> </p> </form> </body> </html><%@ page contentType="text/html; charset=UTF-8"%> <% // 클라이언트가 서버로 보낸 정보의 문자 인코딩 request.setCharacterEncoding("utf-8"); // 클라이언트가 서버로 보낸 정보 받기 String name = request.getParameter("name"); int age = Integer.parseInt(request.getParameter("age")); String state = age >= 19 ? "성인" : "미성년자"; %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3>서버 - 결과</h3> <p>이름 : <%=name%></p> <p>나이 : <%=age%>, <span style="color: blue; font-weight: 700;"><%=state%></span> </p> </body> </html>form 태그 중에서 button은 type을 따로 주지 않으면 기본적으로 submit 속성을 가진다.
그리고 이 submit 버튼은 image 버튼과 마찬가지로 => 서버로 전송이 가능한 버튼 타입이다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function check() { var f = document.myForm; if(! f.name.value) { alert("이름을 입력 하세요"); f.name.focus(); return false; // 이벤트 취소 } if(! /^(\d)+$/.test(f.age.value)) { alert("나이는 숫자만 가능 합니다."); f.age.focus() event.preventDefault(); // 이벤트 취소 return; } return true; // 서버로 전송 // submit 버튼에서는 submit() 메소드를 호출하면 서버로 두번 전송되므로 절대로 호출해서는 안된다. // submit 버튼은 자바스크립트에 오류가 있는 경우 스크립트를 실행하지 않고 바로 서버로 전송하므로 주의해야 한다. } </script> </head> <body> <h3>submit 버튼 - 유효성 검사</h3> <form action="request.jsp" name="myForm" method="post" onsubmit="return check();"> <p> 이름 : <input type="text" name="name"> </p> <p> 나이 : <input type="text" name="age"> </p> <p> <button type="submit">전송하기</button> <!-- submit 버튼을 클릭하면 submit 이벤트가 발생한다. --> <!-- submit 이벤트는 false를 반환하거나 event.preventDefault()를 호출하면 이벤트가 취소 된다. --> </p> </form> </body> </html>서브밋 버튼은 조심해야 할 점이 많은데 서브밋 버튼을 누르면 서버로 전송이 일어나는데
만약 버튼에 메소드 호출까지 같이 달아놓으면 서버로 전송이 2번 되는것이고
또 자바스크립트에서 오류가 생기면 스크립트를 실행 안하고 그냥 바로 서버로 보내버린다.
그래서 submit 버튼을 쓸때는 주의를 해야하고, 서브밋 버튼을 눌렀을때 발생하는 서브밋 이벤트는 false를 반환 시키거나 event.preventDefault()를 호출해야지만 취소가 된다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function check() { var f = document.myForm; if(! f.name.value) { alert("이름을 입력 하세요"); f.name.focus(); event.preventDefault(); // 이벤트 취소. // 이 예제는 return false; 로는 이벤트가 취소 되지 않음 return; } if(! /^(\d)+$/.test(f.age.value)) { alert("나이는 숫자만 가능 합니다."); f.age.focus() event.preventDefault(); return; } } // form에 submit 이벤트 등록 /* window.onload = function(){ document.myForm.addEventListener("submit", check); }; */ window.onload = () => document.myForm.addEventListener("submit", check); </script> </head> <body> <h3>submit 버튼 - 유효성 검사</h3> <form action="request.jsp" name="myForm" method="post"> <p> 이름 : <input type="text" name="name"> </p> <p> 나이 : <input type="text" name="age"> </p> <p> <button type="submit">전송하기</button> </p> </form> </body> </html>여기서는 return false로는 취소를 못한다.
form에 submit 이벤트를 창이 열리면 추가되게 해놨으므로
이벤트 제거 메소드를 호출 해야한다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function send() { var f = document.myForm; if(! f.name.value) { alert("이름을 입력 하세요"); f.name.focus(); return; } if(! /^(\d)+$/.test(f.age.value)) { alert("나이는 숫자만 가능 합니다."); f.age.focus() return; } // submit 기능이 없는 컨트롤에서 서버로 전송할 경우 submit() 함수를 호출한다. f.submit(); // 서버로 전송 } </script> </head> <body> <h3>일반 버튼 - 서버로 전송</h3> <form action="request.jsp" name="myForm" method="post"> <p> 이름 : <input type="text" name="name"> </p> <p> 나이 : <input type="text" name="age"> </p> <p> <button type="button" onclick="send();">전송하기</button> </p> </form> </body> </html>이번에는 버튼에 submit 타입이 아니라 그냥 버튼 타입을 줬는데
자바스크립트에서 폼 자체를 submit() 함수로 보내 버릴 수 있다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function send() { var f = document.myForm; var s = ""; if(! f.name.value ) { f.name.focus(); return; } if(! f.age.value ) { f.age.focus(); return; } s = "<p>이름:"+f.name.value+"</p>"; s += "<p>나이:"+f.age.value+"</p>"; s += "<p>좋아하는 과목:"; // 동일한 이름이 2개 이상이면 배열로 처리해야 한다. for(var i = 0; i<f.subject.length; i++) { if( f.subject[i].value ) { s += f.subject[i].value +" "; } } s += "</p>" document.getElementById("layout").innerHTML = s; } </script> </head> <body> <form name="myForm"> <p> 이름 : <input type="text" name="name"> </p> <p> 나이 : <input type="text" name="age" value="0"> </p> <p> 과목 : <input type="text" name="subject"><br> <input type="text" name="subject"><br> <input type="text" name="subject"> </p> <p> <button type="button" onclick="send()">확인</button> </p> </form> <hr> <div id="layout"></div> </body> </html>자바스크립트 코드에서 이름과 나이가 입력 안되면 코드 멈추고 text칸 활성화 하는 if문 2개가 있다.
그리고 변수 s가 이제 HTML 에 쏴줄 코드인데
좋아하는 과목 같은 경우 입력하는 text 박스는 3개나 있지만
이 text 박스들의 name 속성이 전부 subject로 똑같다. 이걸 자바스크립트에서 처리 해줘야 한다.
subject의 총 길이를 가지고 인덱스를 나눠서 그걸 하나하나씩 반복문으로 뽑아서 s에 담아야한다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> window.onload = function(){ var f = document.myForm; // f.subject.value = "web"; // value 속성에 select 박스중 선택할 option의 value를 주면 선택됨 f.subject[3].selected = true; // subject[3] : subject에서 선택할 option의 위치 }; function send() { var f = document.myForm; var s = ""; if(! f.subject.value ) { alert("좋아하는 과목 선택은 필수입니다."); return; } s = "<p>이름:"+f.name.value+"</p>"; s += "<p>출신도:"+f.city.value+"</p>"; s += "<p>가장좋아하는과목:"+f.subject.value+"</p>"; s+= "<p>취미:"; for(var i=0; i<f.hobby.length; i++) { if( f.hobby[i].selected ) { // 선택된 경우 s += f.hobby[i].value + " "; } } s+="</p>"; document.getElementById("layout").innerHTML = s; } </script> </head> <body> <h3>select, option 요소</h3> <form name="myForm"> <p> 이름 : <input type="text" name="name"></p> <p> 출신도 : <select name="city"> <!-- <option value=''>text</option> value : 서버로 전송되는 값(value 속성이 없으면 text가 서버로 전송) text : 눈에 보이는 값 --> <option>서울</option> <option selected="selected">경기</option> <option>인천</option> <option>기타</option> </select> </p> <p> 가장 좋아하는 과목 : <select name="subject"> <option value="">::선택::</option> <option value="java">자바</option> <option value="oracle">오라클</option> <option value="web">웹</option> </select> </p> <p> 취미 : <select name="hobby" multiple="multiple" size="5"> <option value="게임">게임하기</option> <option value="축구">축구하기</option> <option value="음악">음악듣기</option> <option value="영화">영화보기</option> <option value="수영">수영하기</option> </select> </p> <p> <button type="button" onclick="send()">확인</button> </p> </form> <hr> <div id="layout"></div> </body> </html>
그리고 보통 서버로 전송할때 value값을 주지만 만약 value값이 없으면 text가 서버로 전송 된다.
취미 부분보면 value 부분이 서버 전송 값이고 태그가 감싸고 있는 text가 눈에보이는 그냥 텍스트다
f.subject[3].selected = true; 이건 선택박스에서의 기본값을 설정하는거다.
인덱스로 3번째 위치를 기본으로 보여주겠다 라는 뜻 보통은 0번 인덱스로 할듯
f.subject.value = "web"; 이렇게 인덱스가 아니라 값으로 선택박스의 기본값을 설정도 가능
예제)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <style type="text/css"> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 14px; font-family: "Malgun Gothic", "맑은 고딕", NanumGothic, 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; cursor: pointer; } a:active, a:hover { text-decoration: underline; color: #F28011; } .btn { color: #333; border: 1px solid #333; background-color: #fff; padding: 4px 10px; border-radius: 4px; font-weight: 500; cursor:pointer; font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .btn:hover, .btn:active, .btn:focus { background-color: #e6e6e6; border-color: #adadad; color:#333; } .boxTF { border: 1px solid #999; padding: 5px 5px; background-color: #fff; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .selectField { border: 1px solid #999; padding: 4px 5px; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .board { margin: 30px auto; width: 700px; } .title { width:100%; font-size: 16px; font-weight: bold; padding: 13px 0; } .table { width: 100%; border-spacing: 0; border-collapse: collapse; } .table th, .table td { padding: 10px 0; } .table-border tr { border-bottom: 1px solid #ccc; } .table-border thead tr:first-child { border-top: 2px solid #ccc; } .table-list thead tr:first-child{ background: #eee; } .table-list td { text-align: center; } .table-list td:nth-child(6n+3) { text-align: left; padding-left: 5px; } .table-list tbody tr:hover { background: #efffef; } .table-list .chk { width: 40px; color: #787878; } .table-list .num { width: 60px; color: #787878; } .table-list .subject { color: #787878; } .table-list .name { width: 100px; color: #787878; } .table-list .date { width: 100px; color: #787878; } .table-list .hit { width: 70px; color: #787878; } .paginate { clear: both; text-align: center; white-space: nowrap; font-size: 14px; } .paginate a { border: 1px solid #ccc; color: #000; font-weight: 600; text-decoration: none; padding: 3px 7px; margin-left: 3px; vertical-align: middle; } .paginate a:hover, .paginate a:active { color: #6771ff; } .paginate span { border: 1px solid #e28d8d; color: #000; font-weight: 600; padding: 3px 7px; margin-left: 3px; vertical-align: middle; } .paginate :first-child { margin-left: 0; } </style> <script type="text/javascript"> function check() { var f = document.listForm; // checkbox 이름이 nums 인 요소가 한개도 없는 경우 if( f.nums === undefined ) { // if(! f.nums) { return; } // checkbox 이름이 nums 인 요소가 한개인 경우 if( f.nums.length === undefined ) { // if(! f.nums.length) { f.nums.checked = f.chkAll.checked; return; } // checkbox 이름이 nums 인 요소가 두개 이상인 경우 // 동일한 이름의 요소가 두개 이상인 경우에만 length 속성이 존재한다. // checked 속성 : checkbox, radio 버튼을 선택/해제하거나 선택 유무를 true/false로 반환 for(var i = 0; i < f.nums.length; i++) { f.nums[i].checked = f.chkAll.checked; } } function deleteList() { var f = document.listForm; var cnt = 0; if( ! f.nums ) { return; } if( f.nums.length ) { // nums가 여러개인 경우 for(var i=0; i<f.nums.length; i++) { if(f.nums[i].checked) { cnt++; } } } else { // nums가 하나인 경우 if(f.nums.checked) { cnt++; } } if(cnt === 0) { alert("삭제할 게시물을 먼저 선택하세요"); return; } if( confirm("선택한 게시글을 삭제하시겠습니까 ? ") ) { alert("삭제 Ok..."); } } </script> </head> <body> <div class="board"> <div class="title"> <h3><span>|</span> 게시판</h3> </div> <table class="table"> <tr> <td align="left" width="50%"> <button type="button" class="btn" onclick="deleteList();">삭제</button> </td> <td align="right"> <select name="rows" id="rows" class="selectField"> <option value="5">5개씩 출력</option> <option value="10" selected="selected">10개씩 출력</option> <option value="20">20개씩 출력</option> <option value="30">30개씩 출력</option> <option value="50">50개씩 출력</option> </select> </td> </tr> </table> <form name="listForm" method="post"> <table class="table table-border table-list"> <thead> <tr> <th class="chk"> <input type="checkbox" name="chkAll" id="chkAll" onclick="check();" style="margin-top: 3px;"> </th> <th class="num">번호</th> <th class="subject">제목</th> <th class="name">작성자</th> <th class="date">작성일</th> <th class="hit">조회수</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="nums" value="2" style="margin-top: 3px;"></td> <td>2</td> <td> <a href="">HTML 강좌...</a> </td> <td>홍길동</td> <td>2017-03-03</td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="nums" value="1" style="margin-top: 3px;"></td> <td>1</td> <td> <a href="">자바 강좌...</a> </td> <td>김자바</td> <td>2017-01-10</td> <td>1</td> </tr> </tbody> </table> </form> <table class="table"> <tr height="50"> <td align="center"> <div class="paginate"> <span>1</span> <a href="#">2</a> <a href="#">3</a> </div> </td> </tr> </table> <table class="table"> <tr height="45"> <td width="100"> <button type="button" class="btn">새로고침</button> </td> <td align="center"> <form name="searchForm" action="" method="post"> <select name="condition" class="selectField"> <option value="all">제목+내용</option> <option value="name">작성자</option> <option value="regDate">등록일</option> <option value="subject">제목</option> <option value="content">내용</option> </select> <input type="text" name="keyword" value="" class="boxTF"> <button type="button" class="btn">검색</button> </form> </td> <td align="right" width="100"> <button type="button" class="btn">글올리기</button> </td> </tr> </table> </div> </body> </html>
게시판 기능 중 일부인 체크박스 체크 기능하고 / 체크박스 선택 유무에 따라 삭제 메세지 기능만 있음.
먼저 check() 메소드는 체크박스의 개수 유무에 따른 체크를 하기 위해 만든다.
체크박스들의 name은 전부 nums임
체크박스가 하나도 체크 안되었을 경우 => 그냥 리턴
체크박스 하나만 체크 되었을 경우(length로 구분 length는 0개 1개까지는 false) => 체크된 된 요소가 하나일 경우니까 그냥 전체 체크박스 클릭하면 얘가 클릭하게 함.
체크박스가 2개이상 체크 되었을 경우 => length로 for문 돌려서 다 체크 시켜주기.
리스트 기능은 여기서는 서버로 보내는 기능은 없으니까 그냥 cnt로 개수만 세준다.
cnt가 0일 경우는 삭제할 게시물을 하나도 선택 안한거고
여러개나 하나일 경우는 if문 하나로 해결이 가능하다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; cursor: pointer; } a:active, a:hover { text-decoration: underline; color: #F28011; } .btn { color: #333; border: 1px solid #333; background-color: #fff; padding: 4px 10px; border-radius: 4px; font-weight: 500; cursor:pointer; font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; /* 부모 요소의 기준선에 맞춤 */ } .btn:hover, .btn:active, .btn:focus { background-color: #e6e6e6; border-color: #adadad; color:#333; } .boxTF { border: 1px solid #999; padding: 5px 5px; background-color: #fff; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .selectField { border: 1px solid #999; padding: 4px 5px; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } textarea:focus, input:focus { outline: none; } .member { width: 600px; margin: 30px auto 25px; } .title { width:100%; font-size: 16px; font-weight: bold; padding: 13px 0; } .table { width: 100%; border-spacing: 0; border-collapse: collapse; } .table th, .table td { padding: 7px 0; } .table-border tr { border-bottom: 1px solid #ccc; } .table-border tr:first-child { border-top: 2px solid #ccc; } .table-form tr td:first-child{ background: #e6e6e6; text-align: center; width: 120px; } .table-form tr td:nth-child(2) { text-align: left; padding-left: 10px; } .table-form input[type=text]:focus, .table-form input[type=password]:focus { border: 1px solid tomato; } </style> <script type="text/javascript"> function isValidDateFormat(date) { if(date.length != 8 && date.length != 10) return false; var p = /(\.)|(\-)|(\/)/g; date = date.replace(p, ""); var format = /^[12][0-9]{7}$/; if(! format.test(date) ) return false; var y = parseInt( date.substr(0,4) ); var m = parseInt( date.substr(4,2) ); var d = parseInt( date.substr(6) ); if(m<1 || m>12) return false; var lastDay = (new Date(y,m,0)).getDate(); if(d<1 || d>lastDay) return false; return true; } function memberOk() { var f = document.memberForm; var s; // 아이디는 5~10자 이며 영문자로 시작하고 영숫자와_로 구성 if(! /^[a-zA-Z]\w{4,9}$/.test(f.userId.value)) { alert("아이디는 영문자로 시작하며, 5~10자이내의 영숫자로 구성합니다.") f.userId.focus(); return; } // 패스워드는 5~10자이며 영문자와 하나이상의 숫자 또는 특수문자를 포함해야함 s = f.userPwd.value if(! /^(?=.*[a-z])(?=.*[!@#$%^&*-=+]|.*[0-9]).{5,10}$/i.test(s)) { alert("패스워드는 5~10자이내로 영문자와 숫자 또는 특수문자로 구성합니다.") f.userPwd.focus(); return; } if(s != f.userPwd1.value) { alert("패스워드가 일치하지 않습니다."); f.userPwd.focus(); return; } // 이름은 한글 2~5자 이내이거나 영어 이름 : 이름(2~20) 성(2~20) // 이름은 한글 2~5자 이내 s = f.userName.value; if(! /^[가-힣]{2,5}$/.test(s)) { alert("이름을 입력하세요"); f.userName.focus(); return; } // 생년월일 if(! isValidDateFormat(f.birth.value) ) { alert("생년월일을 입력하세요"); f.birth.focus(); return; } if(! f.email1.value.trim() ) { alert("이메일을 입력하세요"); f.email1.focus(); return; } if(! f.email2.value.trim() ) { alert("이메일을 입력하세요"); f.email2.focus(); return; } if(! f.tel1.value ) { alert("전화번호 입력하세요"); f.tel1.focus(); return; } if(! /^\d{3,4}$/.test(f.tel2.value) ) { alert("전화번호 입력하세요"); f.tel2.focus(); return; } if(! /^\d{4}$/.test(f.tel3.value) ) { alert("전화번호 입력하세요"); f.tel3.focus(); return; } alert("회원 가입 성공 ^^"); } function changeEmail() { var f = document.memberForm; var s = f.selectEmail.value; if(s === "direct") { f.email2.value = ""; f.email2.readOnly = false; f.email1.focus(); } else { f.email2.value = s; f.email2.readOnly = true; f.email1.focus(); } } </script> </head> <body> <div class="member"> <div class="title"> <h3><span>|</span> 회원 가입</h3> </div> <form name="memberForm" method="post"> <table class="table table-border table-form"> <tr> <td>아 이 디</td> <td> <input type="text" name="userId" id="userId" maxlength="10" class="boxTF" style="width: 50%;"> </td> </tr> <tr> <td>패스워드</td> <td> <input type="password" name="userPwd" class="boxTF" maxlength="10" style="width: 50%;"> </td> </tr> <tr> <td>패스워드 확인</td> <td > <input type="password" name="userPwd1" class="boxTF" maxlength="10" style="width: 50%;"> </td> </tr> <tr> <td>이 름</td> <td> <input type="text" name="userName" maxlength="10" class="boxTF" style="width: 50%;"> </td> </tr> <tr> <td>생년월일</td> <td> <input type="date" name="birth" class="boxTF" style="width: 50%;"> </td> </tr> <tr> <td>이 메 일</td> <td> <select name="selectEmail" class="selectField" onchange="changeEmail();"> <option value="">선 택</option> <option value="naver.com">네이버 메일</option> <option value="hanmail.net">한 메일</option> <option value="hotmail.com">핫 메일</option> <option value="gmail.com">지 메일</option> <option value="direct">직접입력</option> </select> <input type="text" name="email1" maxlength="30" class="boxTF" style="width: 33%;"> @ <input type="text" name="email2" maxlength="30" class="boxTF" style="width: 33%;" readonly="readonly"> </td> </tr> <tr> <td>전화번호</td> <td> <select name="tel1" class="selectField"> <option value="">선 택</option> <option value="010">010</option> <option value="02">02</option> <option value="031">031</option> <option value="032">032</option> <option value="033">033</option> <option value="041">041</option> <option value="042">042</option> <option value="043">043</option> <option value="044">044</option> <option value="051">051</option> <option value="052">052</option> <option value="053">053</option> <option value="054">054</option> <option value="055">055</option> <option value="061">061</option> <option value="062">062</option> <option value="063">063</option> <option value="064">064</option> <option value="070">070</option> </select> <input type="text" name="tel2" maxlength="4" class="boxTF" style="width: 33%;"> - <input type="text" name="tel3" maxlength="4" class="boxTF" style="width: 33%;"> </td> </tr> <tr> <td>우편번호</td> <td> <input type="text" name="zip" maxlength="7" class="boxTF" readonly="readonly" style="width: 50%;"> <button type="button" class="btn">우편번호검색</button> </td> </tr> <tr> <td valign="top">주 소</td> <td> <label style="display: block;"> <input type="text" name="addr1" maxlength="50" class="boxTF" readonly="readonly" style="width: 96%;"> </label> <label style="display: block; margin-top: 2px;"> <input type="text" name="addr2" maxlength="50" class="boxTF" style="width: 96%;"> </label> </td> </tr> <tr> <td>직 업</td> <td> <input type="text" name="job" maxlength="10" class="boxTF" style="width: 50%;"> </td> </tr> </table> <table class="table"> <tr> <td align="center"> <button type="button" class="btn" onclick="memberOk();"> 회원가입 </button> <button type="reset" class="btn"> 다시입력 </button> <button type="button" class="btn"> 가입취소 </button> </td> </tr> <tr height="40"> <td align="center"> <span style="color: blue;"></span> </td> </tr> </table> </form> </div> </body> </html>
입력창들은 전부 자바스크립트에서 정규식으로 검토를 하는 모습이고
다른 특징은 테이블에 있는 text 칸들을 눌러서 활성화 하면 테두리가 변하는 효과를 줬는데
이건 style쪽에서 form에 줬던 클래스에게 text 박스 type이 text 인 애들에게만 주도록 한것.
input[type=text]:focus / input[type=password]:focus
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <style type="text/css"> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; cursor: pointer; } a:active, a:hover { text-decoration: underline; color: #F28011; } .btn { color: #333; border: 1px solid #333; background-color: #fff; padding: 4px 10px; border-radius: 4px; font-weight: 500; cursor:pointer; font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .btn:hover, .btn:active, .btn:focus { background-color: #e6e6e6; border-color: #adadad; color:#333; } .boxTF { border: 1px solid #999; padding: 5px 5px; background-color: #fff; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .selectField { border: 1px solid #999; padding: 4px 5px; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .boxTA { border:1px solid #999; height:150px; padding:3px 5px; border-radius:4px; background-color:#fff; resize : none; vertical-align: baseline; } textarea:focus, input:focus { outline: none; } .title { width:100%; font-size: 16px; font-weight: bold; padding: 13px 0; } .container { width: 400px; margin: 30px auto; } .table { width: 100%; border-spacing: 0; border-collapse: collapse; } .table th, .table td { padding: 7px 0; } .table-border tr { border-bottom: 1px solid #ccc; } .table-border tr:first-child { border-top: 2px solid #ccc; } </style> <script type="text/javascript"> function itemAdd() { var f = document.noteForm; var item = f.itemLeft; // select 요쇼에 option 요소 추가 item[item.length] = new Option("김자바", "kim"); // text, value item[item.length] = new Option("스프링", "spring"); item[item.length] = new Option("서블릿", "servlet"); item[item.length] = new Option("오라클", "oracle"); item[item.length] = new Option("이자바", "lee"); item[item.length] = new Option("홍자바", "hong"); item[item.length] = new Option("나대한", "na"); } window.onload = () => itemAdd(); // 선택된 option을 좌 또는 우로 이동 function itemMove(pos) { var f = document.noteForm; var source, target; if(pos==="left") { // right -> left source = f.itemRight; target = f.itemLeft; } else { // left -> right source = f.itemLeft; target = f.itemRight; } var len = source.length; for(var i=0; i<len; i++) { if( source.options[i].selected ) { // 선택된 항목만 target[target.length] = new Option(source.options[i].text, source.options[i].value); source[i] = null; // 삭제 i--; len--; } } } // 모든 option을 좌 또는 우로 이동 function itemAllMove(pos) { var f = document.noteForm; var source, target; if(pos==="left") { // right -> left source = f.itemRight; target = f.itemLeft; } else { // left -> right source = f.itemLeft; target = f.itemRight; } var len = source.length; for(var i=0; i<len; i++) { target[target.length] = new Option(source.options[0].text, source.options[0].value); source[0] = null; // 삭제 } } function sendOk() { var f = document.noteForm; if( f.itemRight.length === 0 ) { alert("받는 사람을 먼저 추가 하세요..."); f.itemRight.focus(); return; } if(! f.msg.value.trim() ) { alert("메시지를 입력하세요..."); f.msg.focus(); return; } // select 요소는 서버로 전송하기 위해서 반드시 항목들이 선택되어 있어야 한다. for(var i=0; i < f.itemRight.length; i++) { f.itemRight[i].selected = true; // select 항목 선택 } alert("메시지 전송..."); } </script> </head> <body> <div class="container"> <div class="title"> <h3><span>|</span> 쪽지 보내기</h3> </div> <form name="noteForm" method="post"> <table class="table"> <tr> <td width="150"><span>친구목록</span></td> <td width="100"> </td> <td width="150"><span>받는사람</span></td> </tr> <tr> <td style="padding-left: 10px;"> <select name="itemLeft" multiple="multiple" class="selectField" style="width:130px; height:120px;"></select> </td> <td align="center"> <button type="button" class="btn" onclick="itemMove('right');" style="display:block; width:80px;"> > </button> <button type="button" class="btn" onclick="itemAllMove('right');" style="display:block;width:80px;"> >> </button> <button type="button" class="btn" onclick="itemMove('left');" style="display:block;width:80px;"> < </button> <button type="button" class="btn" onclick="itemAllMove('left');" style="display:block;width:80px;"> << </button> </td> <td style="padding-left: 10px;"> <select name="itemRight" multiple="multiple" class="selectField" style="width:130px; height:120px;"> </select> </td> </tr> <tr> <td colspan="3"> <span>메시지</span> </td> </tr> <tr> <td colspan="3" style="padding-left: 10px;"> <textarea name="msg" class="boxTA" style="height:60px; width: 98%;"></textarea> </td> </tr> </table> <table class="table"> <tr> <td align="right" style="padding-right: 10px;"> <button type="button" class="btn" onclick="sendOk();"> 쪽지보내기 </button> </td> </tr> </table> </form> </div> </body> </html>
var f = document.noteForm;
var item = f.itemLeft;폼 이름으로 지정 해주고 폼의 itemLeft 즉 왼쪽 박스에 변수 지정하고
item[item.length] = new Option("김자바", "kim"); 등등
으로 왼쪽 박스에 Option의 객체 요소를 추가한다. 오른쪽의 kim은 value 값
- 창이 로드되면 itemAdd() 메소드 실행
선택된 옵션을 오른쪽에서 -> 왼쪽으로 이동하는 메소드
왼쪽 박스, 오른쪽 박스에 대응하는 변수를 만들어서 서로 바꿔준다.
만약 왼쪽에서 -> 오른쪽으로 가는 것도 하고싶으면 if문으로 한번에 묶으면 된다.
그리고 for문으로 반복문으로 시작해서 if문으로 선택된 항목을만 이동하게 한다.
옮겨지는 애들은 위에서 했던것 처럼 새로 Option 객체 요소를 만들면 된다.
그리고 옮겼다면 전에 있던 박스에서 삭제도 해야한다.
그리고 select 요소는 서버로 전송하기 위해서는 반드시 보낼 항목들이 선택이 되어 있어야한다.
선택 안하면 메세지만 전송이 될뿐 누구에게 전송이 될지는 안정했기 때문에 이상한 현상이 벌어짐
그래서 sendOk() 메소드에 선택된 애들만 보내질 수 있도록 코드를 짠다.
반응형'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글
자바스크립트 - DOM (0) 2021.10.06 자바스크립트 - 정규식 (0) 2021.10.06 자바스크립트 - Event 이벤트 핸들러 (0) 2021.10.02 자바스크립트 - navigator (0) 2021.10.01 자바스크립트 - 화면 좌표 찾기 (0) 2021.10.01
