JAVASCRIPT STEP 26 - FORM 예제 — Developer Story House

728x90

★ 문제 1

아래와 같은 문서를 생성하시오.
조건
- 새창을 띄운 뒤 우편 번호 검색을 하시오.
- 우편번호, 주소 : 새창에서 선택하면 자동 채우기
- 상세주소 : 포커스 맞추기

■ HTML 코드

<form name="form1">
    <h1>우편 번호 검색</h1>
    <table id="tbl1">
        <tr>
            <td>우편번호</td>
            <td>
                <input type="text" id="zip" name="zip" readonly />
                <input type="button" value=" 우편번호검사하기" onclick="search();" />
            </td>
        </tr>
        <tr>
            <td>주소</td>
            <td><input type="text" id="address1" name="address1" readonly /></td>
        </tr>
        <tr>
            <td>상세주소</td>
            <td><input type="text" id="address2" name="address2" /></td>
        </tr>
    </table>
</form>

■ css 코드

<style>
    #tbl1 {
        border: 1px solid gray;
        border-collapse: collapse;
        width: 600px;
    }

    #tbl1 td {
        border: 1px solid gray;
        padding: 10px;
    }

    #tbl1 td:first-child {
        background-color: #DEDEDE;
        width: 100px;
        text-align: center;
    }

    input {
        border: 1px solid gray;
        padding-left: 3px;
    }

    #zip {
        width: 60px;
    }

    #address1, #address2 {
        width: 98%;
    }
</style>

■ JavaScript

<script type="text/javascript">
    function search() {

        window.open("008_search.html", "search", "width=300, height=200");		

    }
</script>

■ 008search.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.0">
    <title>Document</title>
    <style>
        input {
            display:block;
            margin : 10px;
        }
    </style>
</head>
<body>
    <input type="button" name="btn1" value="서울시 강남구 역삼동">
    <input type="button" name="btn2" value="서울시 강남구 대치동">
    <input type="button" name="btn3" value="서울시 강남구 도곡동">
    
    <script>
        document.all.btn1.onclick = m1;
        document.all.btn2.onclick = m2;
        document.all.btn3.onclick = m3;

        function m1() {
            opener.document.form1.zip.value = '06232';
            opener.document.form1.address1.value = '서울시 강남구 역삼동';
            opener.document.form1.address2.focus();
			window.close();
        }

        function m2() {
            opener.document.form1.zip.value = '06291';
            opener.document.form1.address1.value = '서울시 강남구 대치동';
            opener.document.form1.address2.focus();
			window.close();
        }

        function m3() {
            opener.document.form1.zip.value = '06267';
            opener.document.form1.address1.value = '서울시 강남구 도곡동';
            opener.document.form1.address2.focus();
			window.close();
        }
    </script>
</body>
</html>

■ 실행 결과

우편번호 검사하기 -> 주소 선택지창 -> 선택 시, 해당 우편주소와 주소가 부모 페이지에 기입

★ 문제 2

아래와 같은 문서를 생성하시오.
조건
- 주문하시는 분 정보를 받으시는 분으로 복사하시오.

■ HTML 코드

<h1>주문하기</h1>

<fieldset>
    <legend>주문하시는 분</legend>
    이름 : <input type="text" name="txtName1" autofocus /><br />
    주소 : <input type="text" name="txtAddress1" />
</fieldset>

<div style="margin: 15px;">
    <input type="checkbox" name="cb1" id="cb1" onclick="copy();" /> <label for="cb1">주문하시분과 정보과 동일합니다.</label>
</div>

<fieldset>
    <legend>받으시는 분</legend>
    이름 : <input type="text" name="txtName2" autofocus /><br />
    주소 : <input type="text2" name="txtAddress2" />
</fieldset>

■ CSS 코드

■ JavaScript

<script>
    function copy() {

        var name1 = document.all.txtName1;
        var address1 = document.all.txtAddress1;
        var name2 = document.all.txtName2;
        var address2 = document.all.txtAddress2;
        var cb1 = document.all.cb1;

        if (cb1.checked) {
            name2.value = name1.value;
            address2.value = address1.value;
        } else {
            name2.value = "";
            address2.value = "";
            name2.focus();
        }

    }
</script>

■ 실행 결과

★ 문제 3

아래와 같은 문서를 생성하시오.
조건
- 주민번호 입력 시 나머지 컨트롤(생년월일, 성별) 제어를 하시오.
- 주민등록 번호 앞자리 입력 완료 -> 뒷자리 자동 포커스
- 주민등록 번호 앞자리 입력 완료 -> 생년월일 자동 완성
- 주민등록 번호 뒷자리 첫 숫자 입력 -> 성별 자동 체크

■ HTML 코드

<form name="form1">
    <h1>회원 가입</h1>
    <table id="tbl1">
        <tr>
            <td>주민번호</td>
            <td>
                <input type="text" id="first-number" name="firstnumber" onkeyup="check(this);" >
                - 
                <input type="text" id="last-number" name="lastnumber" onkeyup="check2(this);" >
            </td>
        </tr>
        <tr>
            <td>생년월일</td>
            <td>
                <input type="text" id="born1" name="born1">년
                <input type="text" id="born2" name="born2">월
                <input type="text" id="born3" name="born3">일
            </td>
        </tr>
        <tr>
            <td>성별</td>
            <td>
                <input type="radio" id="man" name="man">남자
                <input type="radio" id="women" name="women">여자
            </td>
        </tr>
    </table>
</form>

■ CSS 코드

<style>
    #tbl1 {
        border: 1px solid gray;
        border-collapse: collapse;
        width: 600px;
    }

    #tbl1 td {
        border: 1px solid gray;
        padding: 10px;
    }

    #tbl1 td:first-child {
        background-color: #DEDEDE;
        width: 100px;
        text-align: center;
        font-weight: bold;
    }

    input {
        border: 1px solid gray;
        padding-left: 3px;
    }

    #first-number, #last-number {
        width : 70px;
    }

    #born1 {
        width : 50px;
        margin-right : 5px;
    }

    #born2, #born3 {
        width : 30px;
        margin-right : 5px;
    }

</style>

■ JavaScript

<script>
    function check(first) {

        var born1 = document.all.born1;
        var born2 = document.all.born2;
        var born3 = document.all.born3;

        var last = document.all.lastnumber;

        if (first.value.length == 6) {
            born1.value = "19" + first.value.substring(0, 2);
            born2.value = first.value.substring(2, 4);
            born3.value = first.value.substring(4, 6);
            last-number.focus();
        }
    }

    function check2(last) {
        var man = document.all.man;
        var women = document.all.women;

        if (last.value.length == 1) {
            if (parseInt(last.value) % 2 == 1) {
                man.checked = true;
                women.checked = false;
            } else {
                women.checked = true;
                man.checked = false;
            }
        }
    }

</script>

■ 실행 결과

★ 문제 4

아래와 같은 문서를 생성하시오.
조건
- 셀렉트 박스의 항목을 좌우로 이동시키시오.

■ HTML 코드

<table id="tbl1">
    <tr>
        <td>
            <h4>차단된 친구</h4>
            <select name="leftList" size="10" ondblclick="add2();">
                <option value="1">권예진</option>
                <option value="2">권준혁</option>
                <option value="3">김동식</option>
                <option value="4">김세진</option>
                <option value="5">김여정</option>
                <option value="6">노형준</option>
                <option value="7">박민선</option>
                <option value="8">백강현</option>
                <option value="9">변기현</option>
            </select>
        </td>
        <td>
            <input type="button" value="Add ▷" onclick="add2();" class="btn" />
            <input type="button" value="◁ Remove" onclick="remove2();" class="btn" />
            <input type="button" value="Add All ▷▷" onclick="addAll();" class="btn" />
            <input type="button" value="◁◁ Remove All" onclick="removeAll();" class="btn" />
        </td>
        <td>
            <h4>허용된 친구</h4>
            <select name="rightList" size="10" ondblclick="remove2();"></select>
        </td>
    </tr>
</table>

■ CSS 코드

<style>
    #tbl1 {
        border: 1px solid gray;
        width: 500px;
        margin: 10px auto;
        border-collapse: collapse;
    }

    input {
        display: block;
        margin: 10px auto;
        padding: 5px;
    }
    
    #tbl1 td {
        border: 1px solid gray;
        text-align: center;
        padding: 15px;
    }

    h4 {
        margin: 0;
    }
    
    select {
        width: 150px;
        margin: 15px;
        height: 340px;
    }

    select option {
        padding: 5px;
    }

    .btn {
        width: 100%;
    }
</style>

■ JavaScript

<script>

    var leftList, rightList;

    window.onload = function () {
        leftList = document.all.leftList;
        rightList = document.all.rightList;
    };

    function add2() {
        moveOne(leftList, rightList);
    }

    function remove2() {
        moveOne(rightList, leftList);
    }

    function moveOne(left, right) {
        var selOption = left.options[left.selectedIndex];

        //rightList.options.add(selOption);

        right.options.add(new Option(selOption.text, selOption.value));

        left.options.remove(selOption.index);
    }

    function addAll() {
        moveAll(leftList, rightList);
    }

    function removeAll() {
        moveAll(rightList, leftList);
    }

    function moveAll(left, right) {
        for (i=0; i<left.options.length; i++) {
            var op = left.options[i];
            right.options.add(new Option(op.text, op.value));
        }

        var count = left.options.length;

        for (i=0; i<count; i++) {
            left.options.remove(0);
        }
    }

</script>

■ 실행 결과

ADD, Remove를 클릭시, 해당 선택한 항목이 좌우로 이동. Add All, Remove All 클릭시, 모든 항목이 좌우로 이동.

★ 문제 5

아래와 같은 문서를 생성하시오.
조건
- 체크박스를 사용해 텍스트 박스를 제어하시오.
- 각각의 텍스트 박스의 입력/잠금 상태를 제어하시오.
- 체크박스 : 텍스트 박스를 읽기 전용으로 만든다.(readonly)
- 입력 후 엔터를 치면 자동으로 잠금 상태가 된다.
- 텍스트 박스를 더블클릭하면 입력 상태가 된다.

■ HTML 코드

<h2>입력하기</h2>

<table id="tbl" class="table">
    <tr>
        <th>번호</th>
        <th>입력</th>
        <th>잠금</th>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text" name="txt" class="txt" data-no="0"></td>
        <td><input type="checkbox" name="cb" class="cb" data-no="0"></td>
    </tr>
    <tr>
        <td>2</td>
        <td><input type="text" name="txt" class="txt" data-no="1"></td>
        <td><input type="checkbox" name="cb" class="cb" data-no="1"></td>
    </tr>
    <tr>
        <td>3</td>
        <td><input type="text" name="txt" class="txt" data-no="2"></td>
        <td><input type="checkbox" name="cb" class="cb" data-no="2"></td>
    </tr>
    <tr>
        <td>4</td>
        <td><input type="text" name="txt" class="txt" data-no="3"></td>
        <td><input type="checkbox" name="cb" class="cb" data-no="3"></td>
    </tr>
    <tr>
        <td>5</td>
        <td><input type="text" name="txt" class="txt" data-no="4"></td>
        <td><input type="checkbox" name="cb" class="cb" data-no="4"></td>
    </tr>
    <tr>
        <td>6</td>
        <td><input type="text" name="txt" class="txt" data-no="5"></td>
        <td><input type="checkbox" name="cb" class="cb" data-no="5"></td>
    </tr>
    <tr>
        <td>7</td>
        <td><input type="text" name="txt" class="txt" data-no="6"></td>
        <td><input type="checkbox" name="cb" class="cb" data-no="6"></td>
    </tr>
    <tr>
        <td>8</td>
        <td><input type="text" name="txt" class="txt" data-no="7"></td>
        <td><input type="checkbox" name="cb" class="cb" data-no="7"></td>
    </tr>
    <tr>
        <td>9</td>
        <td><input type="text" name="txt" class="txt" data-no="8"></td>
        <td><input type="checkbox" name="cb" class="cb" data-no="8"></td>
    </tr>
    <tr>
        <td>10</td>
        <td><input type="text" name="txt" class="txt" data-no="9"></td>
        <td><input type="checkbox" name="cb" class="cb" data-no="9"></td>
    </tr>
</table>

■ CSS 코드

<style>
    #tbl {
        width: 600px;
    }
    #tbl th {
        font-size: 1em;
        padding: 7px;
    }
    #tbl td {
        text-align: center;
    }
    #tbl .txt {
        width: 450px;
        border: 1px solid #999;
        background-color: white;
        padding: 3px;
    }
    #tbl .txt:read-only {
        cursor: not-allowed;
        background-color: #eee;
    }
</style>

■ JavaScript

<script>

    var txt = document.all.txt;
    var cb = document.all.cb;

    for (var i=0; i<cb.length; i++) {
        cb[i].onchange = function() {
            if (event.srcElement.checked) {
                txt[event.srcElement.dataset["no"]].readOnly = true;
            } else {
                txt[event.srcElement.dataset["no"]].readOnly = false;
            }
        };

        txt[i].onkeydown = function() {
            if (event.keyCode == 13) {
                cb[event.srcElement.dataset["no"]].click();
            }
        };

        txt[i].ondblclick = function() {
            cb[event.srcElement.dataset["no"]].click();
        };
    }

</script>

■ 실행 결과

728x90

저작자표시 비영리 변경금지 (새창열림)

'웹페이지' 카테고리의 다른 글

JAVASCRIPT STEP 28 - Variable (0)	2023.04.25
JAVASCRIPT STEP 27 - Timer (0)	2023.04.25
JAVASCRIPT STEP 25 - FORM2 (0)	2023.04.25
JAVASCRIPT STEP 24 - FORM (0)	2023.04.24
JAVASCRIPT STEP 23 - 응용 예제2 (0)	2023.04.24

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

JAVASCRIPT STEP 26 - FORM 예제

'웹페이지' 카테고리의 다른 글

'웹페이지' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역