17-3. Form 브라우저 객체

2019. 5. 13. 17:31

Form요소에 접근하는 방법은 DOM을 이용하는 것.

단순히 Form의 값을 취하기 위한 것이라면 Form객체를 활용하는 것이 간단할 수 있음.

폼 요소의 접근 기본

formtest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form객체</title>
<script type="text/javascript">
function process(){
    var name = document.fm.name.value;
//var name = document.forms[0].elements[0].value
//var name = document.forms['fm'].elements['name'].value
//var name = document['fm']['name'].value
    window.alert('안녕하세요, ' + name + '씨！');
    return false;
}
</script>
</head>
<body>
<form name="fm" onsubmit="return process()">
이름：
<input type="text" name="name" size="10" />
<input type="submit" value="송신" />
</form>
</body>
</html>
Colored by Color Scripter

cs

Form 객체를 이용하여 form태그 요소에 접근하는 방법

form태그에 지정한 name속성에 할당된 값으로 접근
forms배열 객체를 이용하여 접근(forms는 문서에 포함된 모든 form태그를 가짐)
elements배열 객체를 이용하여 접근(elements는 폼 태그 하위에 지정된 모든 태그 요소를 가짐)

폼 태그 내의 요소에 차례대로 접근하는 경우 수치를 활용하여 반복하는 것도 가능

dynamictest.html

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form객체</title>
<script type="text/javascript">
function process(){
    var result = '';
    for(var i = 0; i<document.fm.elements.length; i++){
        result += document.fm.elements[i].name + '\n';
    }
    window.alert(result);
    return false;
}
</script>
</head>
<body>
<form name="fm" onsubmit="return process()">
<label>name1：
  <input type="text" name="name1" size="10" /></label><br />
<label>name2：
  <input type="text" name="name2" size="10" /></label><br />
<label>name3：
  <input type="text" name="name3" size="10" /></label><br />
<input type="submit" value="송신" />
</body>
</html>
Colored by Color Scripter

cs

Tip) 별도의 윈도우에 있는 요소에 접근하고자 할 경우

부모 - 자식

subwin.opener.document.fm.이름 -> 자식윈도우에서 부모 윈도우의 요소를 참조

subwin.document.fm.이름 -> 부모윈도우에서 자식 윈도우의 요소를 참조

폼 요소의 공통 프로퍼티/메서드

분류	요소이름	설명
텍스트	Text()	텍스트 입력 상자(싱글 라인)
	Password()	비밀번호 입력 상자(입력 문자는 * 문자로 표시)
	Textarea()	텍스트 입력 상자(멀티 라인)
라디오/체크	Radio()	라디오 버튼(단일 선택)
	Checkbox()	체크박스(복수 선택)
선택	Select()	선택 박스(단일 선택
	Select()	리스트 박스(복수 선택 지원)
버튼	Submit()	제출 기능(form요소의 입력 값 모두를 서버로 전송)
	Reset()	리셋(form요소에 입력 값을 모두 초기화)
	Button()	기본 버튼
기타	File()	파일 선택
	Hidden()	브라우저에서 표시하지 않는 필드

위 폼 요소들이 각각 가지는 프로퍼티나 메서드는 약간씩의 차이가 있으며 아래 내용은 공통으로 사용가능한 멤버이다.

멤버	설명
form	요소가 속하는 폼 객체
disabled	요소의 입력/선택 금지
*name	요소를 식별하는 이름
*type	요소의 종류
value	요소의 값(select에서는 이용불가)
focus()	요소에 포커스 지정
blur()	요소의 포커스 해제

*은 읽기 전용 값

form2test.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form객체</title>
<script type="text/javascript">
function process(f){
    window.alert('안녕하세요 ' + f.name.value + '씨！');
}
</script>
</head>
<body>
<form name="fm">
이름：
<input type="text" name="name" size="10" />
<input type="button" value="송신" onclick="process(this.form)" />
</form>
</body>
</html>
Colored by Color Scripter

cs

disabledtest.html

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form객체</title>
<script type="text/javascript">
function process(){
    var fmt = document.fm.fmt;
    for(var i = 0; i < fmt.length; i++){
        fmt[i].disabled = !document.fm.need.checked;
    }
}
</script>
</head>
<body>
<form name="fm">
  <label>
    메일 뉴스 송신을 희망：
    <input type="checkbox" name="need" value="1"
      checked="checked" onclick="process()" />
  </label>
  <br />
  <label><input type="radio" name="fmt" value="plain" />텍스트형식</label>
  <label><input type="radio" name="fmt" value="html" />HTML형식</label>
</form>
</body>
</html>
Colored by Color Scripter

cs

disabled는 Submit시 Submit버튼을 무효화 하여 이중 송신을 막는 경우에도 사용함.

만약 이중 전송을 막는 형태의 코드를 자바스크립트에서 적용했다면 이를 고려하는 서버측 처리 코드도 준비하도록 하는 것이 좋다.

텍스트 요소 조작하기

text, textarea, password에 대한 조작이다.

해당 요소들은 다음과 같은 멤버를 갖고 있다.

defaultValue : 기본 값

select() : 텍스트 선택 상태

texttest.html

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form객체</title>
<script type="text/javascript">
function chk(){
    var q = document.fm.old;
    if (q.value != null && q.value != ''){
        if (isNaN(q.value)){
            window.alert('연령은 수치로 입력해야 합니다');
            q.value = q.defaultValue;
            q.focus();
            q.select();
            return false;
        }
    }
}
</script>
</head>
<body>
<form name="fm" method="POST" action="" onsubmit="return chk()">
    <label>연령：<input type="text" name="old" value="20" size="3" />세</label>
    <input type="submit" value="송신" />
</form>
</body>
</html>
Colored by Color Scripter

cs

위와 같은 기능은 범용적인 개념이라 외부 라이브러리 형태로 따로 정의하는 것이 일반적이다.

여기서는 확인을 위해 작성한 예제임.

라디오 버튼/체크 박스 다루기

라디오 버튼 -> 단일 선택만 가능(한번 선택 시 다른 선택으로 변경은 가능하나 해제는 불가)

체크 박스 -> 복수 선택 가능(선택한 항목에 대한 단일 해제 가능)

checkboxtest.html

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form객체</title>
<script type="text/javascript">
function show(){
    var result = [];
    var f = document.fm.food;
    for(var i = 0; i < f.length; i++){
        if (f[i].checked){
            result.push(f[i].value);
        }
    }
    window.alert(result.toString());
    return false;
}
</script>
</head>
<body>
<form name="fm" method="POST" action="" onsubmit="return show()">
    좋아하는 음식은?：
    <label><input type="checkbox" name="food" value="라면" />라면</label>
    <label><input type="checkbox" name="food" value="만두" />만두</label>
    <label><input type="checkbox" name="food" value="불고기" />불고기</label>
    <input type="submit" value="송신" />
</form>
</body>
</html>
Colored by Color Scripter

cs

중요

같은 이름의 요소는 배열로 처리된다.
체크 상태를 나타내는 것은 checked 프로퍼티이다.

radiotest.html

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
32
33

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Window객체</title>
<script type="text/javascript">
function getRadio(elem){
    var result = '';
    for(var i = 0; i < elem.length; i++){
        if (elem[i].checked){
            result = elem[i].value;
            break;
        }
    }
    return result;
}
 
function show(){
    window.alert(getRadio(document.fm.food));
    return false;
}
</script>
 
</head>
<body>
<form name="fm" method="POST" action="" onsubmit="return show()">
    가장 먹고 싶은 음식은?：
    <label><input type="radio" name="food" value="라면" />라면</label>
    <label><input type="radio" name="food" value="만두" />만두</label>
    <label><input type="radio" name="food" value="불고기" />불고기</label>
    <input type="submit" value="송신" />
</form>
</body>
</html>
Colored by Color Scripter

cs

선택박스와 리스트박스 다루기

태그의 기본 기능이 선택 박스의 기능(단일 선택) 태그 사용 시 multiple="multiple"을 사용하면 리스트 박스

(다중 선택 가능)

선택박스에서 선택 여부 값을 가지는 프로퍼티는 selected이다.(checked는 라디오/체크박스에서 사용)

selecttest.html

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form객체</title>
<script type="text/javascript">
function show(){
    window.alert(document.fm.food.value);
    return false;
}
/*
function show(){
    var f = document.fm.food;
    window.alert(f.options[f.selectedIndex].value);
    //window.alert(f.options[f.selectedIndex].text);
    return false;
}
*/
</script>
</head>
<body>
<form name="fm" onsubmit="return show()">
    가장 좋아하는 음식은？：
    <select name="food">
        <option value="라면">라면</option>
        <option value="만두">만두</option>
        <option value="불고기">불고기</option>
    </select>
    <input type="submit" value="송신" />
</form>
</body>
</html>
Colored by Color Scripter

cs

리스트 박스일 경우

listtest.html

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
32
33
34
35
36

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form객체</title>
<script type="text/javascript">
function getList(elem){
    var result = '';
    for(var i = 0; i < elem.options.length; i++){
        if(elem.options[i].selected){
            result += elem.options[i].value + ',';
        }
    }
    return result;
}
 
function show(){
    window.alert(getList(document.fm.food));
    return false;
}
</script>
</head>
<body>
<form name="fm" onsubmit="return show()">
    가장 좋아하는 음식은？：
    <select name="food" multiple="multiple" size="4">
        <option value="라면">라면</option>
        <option value="만두">만두</option>
        <option value="불고기">불고기</option>
        <option value="메밀국수">메밀국수</option>
        <option value="피자">피자</option>
        <option value="우동">우동</option>
    </select>
    <input type="submit" value="송신" />
</form>
</body>
</html>
Colored by Color Scripter

cs

태그의 내부 속성을 변경하여면 다음과 같은 프로퍼티와 메서드를 사용한다.

멤버	설명
*name	폼 이름
method	전송 방법(GET/POST)
enctype	인코딩 방법
scrollIntoView(flag)	폼이 표시되도록 콘텐츠를 스크롤한다. (true: 윈도우 상단에 맞춤, false: 윈도우 하단에 맞춤)
submit()	폼의 내용을 submit(전송) 한다.
reset()	폼의 내용을 초기화한다.

*멤버는 읽기 전용

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

'교육자료 > Javascript' 카테고리의 다른 글

17-4. Document 브라우저 객체 (0)	2019.05.13
17-4. Location 브라우저 객체 (0)	2019.05.13
17-2. Window 브라우저 객체 (0)	2019.05.13
17-1. 브라우저 객체 모델 BOM(이벤트 드리븐 모델) (0)	2019.05.13
16-2. 자바스크립트에서 객체의 상속 (0)	2019.05.13

답이 없다가 정답이다.

17-3. Form 브라우저 객체

'교육자료 > Javascript' 카테고리의 다른 글

+ Recent posts

티스토리툴바