안녕, 세상!

7. 입력 양식 객체 본문

It공부/JavaScript

7. 입력 양식 객체

dev_Lumin 2020. 7. 29. 16:38

입력 양식 객체는 Document 객체 중의 하나이며 사용자로부터 입력받은 데이터를 처리할 수 있는 객체로 입력받은 데이터에 대해 확인, 취소, 전송 등의 기능을 수행합니다.

입력 양식 객체는 클라이언트 측의 사용자가 자바스크립트 프로그램에 입력 자료를 전달하게 함으로써 웹페이지의 행동을 동적으로 변경할 수 있도록 지원하며, 이를 통해 서버 의존도를 최소화할 수 있기 때문에 서버의 부담을 줄여줄 수 있습니다.

 

입력 양식 객체의 종류는 다음과 같습니다.

객체  설명
form 객체 <form> 태그가 HTML 문서에 삽입되어 있을 때 생성되는 객체
text 객체 <input type="text">가 HTML 문서에 삽입되어 있을 때 생성되는 객체 
password 객체 <input type="password">가 HTML 문서에 있을 때 생성되는 객체
file upload 객체 <input type="file>가 HTML 문서에 있을 때 생성되는 객체
radio 객체 <input type="radio>가 HTML 문서에 있을 때 생성되는 객체
checkbox 객체 <input type="checkbox">가 HTML 문서에 있을 때 생성되는 객체
button 객체 <input type="button">가 HTML 문서에 있을 때 생성되는 객체
submit 객체 <input type="submit">가 HTML 문서에 있을 때 생성되는 객체
reset 객체 <input type="reset">가 HTML 문서에 있을 때 생성되는 객체
textarea 객체 <textarea>가 HTML 문서에 있을 때 생성되는 객체
select 객체 <select> 가 HTML 문서에 있을 때 생성되는 객체

 

 

 

(1) Form 객체

<form> 태그 내에 기술된 폼 양식을 제어하고 관리할 수 있는 객체로 자바스크립트에서는 폼 객체가 HTML의 <FORM> 태그와 상호작용을 할 수 있도록 지원하고 있습니다.

자바스크립트에서 폼 객체는 document 객체의 속성으로 받아들여지므로 document.forms[ ] 배열을 통해 접근할 수 있으며 하나의 폼 객체는 폼 객체를 처리하기 위한 속성, 메소드, 이벤트 핸들러를 가지고 있습니다.

 

HTML에서 폼 태그의 형식은 다음과 같으며, 폼 태그와 폼 객체의 속성을 다음과 같이 제공합니다.

 

① 폼 태그 형식

 

<form name = "폼의 이름" action="nothing" method="post 또는 get">

...

</form>

 

 

 

 

② 폼 객체의 속성

document.name.속성

 

name : name 속성에 기록된 정보를 보관

action : action 속성에 기록된 정보를 보관   // action은 서버로 제출될 때 해당 데이터가 도착하는 URL을 명시함

method : method 속성에 기록된 정보를 보관

elements : 입력 폼의 요소의 텍스트, 버튼, 체크박스, 라이도 버튼, 보내기 버튼, 리셋 버튼 등 폼 양식 배열로 저장encoding : encoding 속성에 기록된 정보를 보관

target : target 속성에 기록된 정보를 보관

length : 폼 양식의 개수

 

 

 

③ 폼 객체에 대한 메소드

submit() :입력된 데이터를 서버에 전송하는 메서드. 이벤트를 발생하지 않고 마우스를 클릭하는 것과 같은 효과를 가짐.

 

  <input type="submit" value="전송">     // "전송" 부분은 사용자가 기호에 맞게 수정

 

reset() : 입력 폼을 리셋시키는 메소드  <input type="reset" value="리셋">        // "리셋" 부분은 사용자가 기호에 맞게 수정

 

 

 

 

다음은 form 객체를 사용한 예제입니다.

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
37
38
39
40
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <script language="javascript">
  function showform(){
    var str;
    str="form.name: "+document.daum.name +"\n";
    str+="form.action: "+document.daum.action+"\n";
    str+="form.method: "+document.daum.method+"\n";
    str+="form.target: "+document.daum.target+"\n";
    str+="form.encoding: "+document.daum.encoding+"\n";
    str+="form.length: "+document.daum.length+"\n";
    str+="form.element[0].type: "+document.daum.elements[0].type+"\n";
    str+="form.element[0].value: "+document.daum.elements[0].value+"\n";
    str+="form.element[1].type: "+document.daum.elements[1].type+"\n";
    str+="form.element[1].value: "+document.daum.elements[1].value+"\n";
    str+="form.element[2].type: "+document.daum.elements[2].type+"\n";
    str+="form.element[2].value: "+document.daum.elements[2].value;
    alert(str);
    }
    function sf(){
      document.daum.submit();
      alert("전송이 완료되었습니다.");
    }
    function rf(){
      document.daum.reset();
      alert("초기화가 되었습니다. 다시 입력하십시오.");
    }
  </script>
  </head>
<body>
  <form name="daum" action="http://www.daum.net" method="post">
    <input type="button" value="폼 정보 확인" onClick="showform()"> <br>
    아이디: <input type="text"><br>
    비&nbsp&nbsp&nbsp&nbsp번: <input type="text"><br>
    <input type="submit" name="sb" value="서버로 전송" onclick="sf()">
    <input type="button" name="rb" value="초기화" onclick="rf()">
  </form>
 </body>
</HTML>
 cs

아이디와 비번을 채워놓은 상태에서 '폼 정보 확인' 버튼을 누르면 다음과 같이 결과를 확인할 수 있습니다.

 

submit() 메소드를 이용한 '서버로 전송'도 alert() 경고 상자로 잘 실행이 됩니다.

육안으로 확인할 수는 없지만 action을 www.daum.net  으로 설정했기 때문에 해당 url로 폼의 정보가 전송됩니다.

 

'초기화' 버튼을 누르면 텍스트 상자에 써놓았던 글자들이 사라지고 초기화됩니다.

 

 

 

 

 

(2) Text와 TextAream 객체

① Text 객체

text 객체는 HTML 파일의 텍스트 입력 양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공하고 있습니다.

사용자로부터 데이터를 입력받거나 데이터를 출력해 주는 기능을 가지며 <input> 태그를 사용하여 text객체를 생성합니다.

형식은 다음과 같습니다.

 

<input type="text" name="id" size=10 value="성명">

 

 

(1) text 객체의 속성

name : 텍스트 입력 상자의 이름

type : type에 입력해주는 값

defaultvaule : 텍스트 입력 상자에 입력된 초기값

value : 텍스트 입력 상자에 입력되는 내용

form : 텍스트 입력 상자를 포함하는 폼 객체

 

(2) text 객체의 메소드

blur() : 텍스트 입력 상자에서 커서를 제거

focus() : 텍스트 입력 상자에 커서를 넣어주는 기능

select() : 텍스트 입력상자에 있는 값을 블록으로 선택해 주는 기능

 

 

(3) text 객체의 이벤트 핸들러

onBlur() : 텍스트 필드에서 커서를 빠져나가게 할 때 발생하는 이벤트 핸들러

onFocus() : 텍스트 필드에서 커서를 넣을 때 발생하는 이벤트 핸들러

onSelect() : 텍스트 필드에서 텍스트 값을 선택했을 때 실행되는 이벤트 핸들러

onChange() : 텍스트 필드에 있는 텍스트 값을 변경해 주는 이벤트 핸들러

 

 

 

다음은 간단한 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <script language="javascript">
  function indata(data){
    d1.innerText=data;
  }
  </script>
  </head>
<body>
  <form>
    <input type="text" size=40 onfocus="indata('커서가 텍스트 안에 있습니다.')" onblur="indata('커서가 텍스트 안에 없습니다')">
  </form>
  <div size=30 id=d1></div>
 </body>
</HTML>
 cs

텍스트 상자에 커서를 놓으면 설정한 문장이 나타나고 커서를 빼면 '커서가 텍스트 안에 없습니다'라고 나옵니다.

 

 

 

'흐르는글자입니다.' 라는 문구가 텍스트 상자 내에서 왕복으로 계속 움직이는 코드입니다.

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
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <script language ="javascript">
  var vel=4;   //이동거리
  var dir=2;   // 방향 (1: 좌->우 2:우->좌)
  var size=50; // text박스크기가 아닌 대략 " "길이 적당하게 맞춘 값
  var pos =size; 
  message="흐르는글자입니다.";
  function flow(){
    var space="";  //빈공간
    if(dir==2) pos-=vel;  // 우->좌
    else       pos+=vel;  // 좌->우
    if(pos<1) { dir=1; pos=1;}
    if(pos>size){dir=2; pos=size;}
    for(var i=1;i<pos;i++) space+=" ";  //빈공간 생성
    document.fn.tx1.value=space+message;
    setTimeout('flow()',100);
  }
  </script>
  </head>
<body onload="flow()">
<form name="fn">
  <input type="text" size=40 name="tx1"><br>
  <input type="text" size=40>
</form>
 </body>
</HTML>
 
 cs

처음에는 " " 46번 한 구간에서부터 '흐르는글자입니다.' 라는 문구가 출력되고 우->좌로 이동한 후 다시 좌->우 로 계속 왕복하면서 문구가 움직입니다.

 

 

 

 

 

② Textarea 객체

여러 줄을 입력할 수 있는 텍스트 입력 양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공하고 있습니다.

형식은 다음과 같습니다.

 

 

<textarea name="abc" row="행수" col="열수" value="초기내용"></textarea>

 

 

textarea 객체의 속성

name : textarea 입력 상자의 이름

type : type에 입력해 주는 값

defaultvalue : textarea 입력 상자에 입력된 초기값

value : textarea 입력 상자에 입력되는 내용

defaultvalue : textarea 입력상자에 입력되는 초기 내용

form : textarea 입력 상자를 포함한 폼 객체

 

 

textarea 객체의 메소드

blur() : 텍스트 입력 상자에서 커서를 제거

focus() : 텍스트 입력 상자에서 커서를 넣어주는 기능

select() : 텍스트 입력상자에 있는 값을 블록으로 선택해 주는 기능

 

 

 

 

③ Password 객체

password 객체는 html 파일의 암호 입력 상자를 처리하는 속성, 메소드, 이벤트를 지원합니다.

텍스트 상자와 다른 점은 입력한 텍스트가 보이지 않는다는 점이 다릅니다.

 

password 객체의 속성

defaultvalue : 최초로 설정된 문자열 값

name : 암호의 이름

type : 객체의 타입 구분

value : 암호명을 위해 이용되는 문자열의 값

 

 

password 객체의 메소드

blur() : 패스워드 필드로부터 커서 제거

focus() : 패스워드 필드에 커서를 넣어주는 기능

select() : 패스워드를 작성한 문자열을 선택하는 메소드

 

 

다음은 암호 입력 시 문자 길이를 확인하여 8~10자를 벗어나면 경고창을 출력하고 커서를 암호 입력 부분으로 위치시키는 예제입니다.

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
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <script language="javascript">
  function pwconfirm(pwn, pwi){
    var pwlength = pwi.value.length;
    if((pwlength>=8)&&(pwlength<=10)){
      alert(pwn.value+"님 어서오세요.");
    }
    else{
      alert("암호는 8자 이상 10자 이내로 입력하세요.");
      pwi.value="";
      pwi.focus();  // 암호 입력부분으로 커서 위치시키게 하기
    }
  }
  </script>
  </head>
<body>
  <form name=pwform>
    I&nbsp&nbsp&nbspD: <input type="text" name="id" maxlength=15 size=15><br>
    암호: <input type="password" name="pw" maxlength=10 size=10> <br>
    <input type="button" value="확인" onclick="pwconfirm(pwform.id,pwform.pw)">
  </form>
 </body>
</HTML>
 cs

 

조건 미충족 시
조건 충족 시

 

 

 

 

④ Button, Radio, Checkbox 객체

(1) button 객체

사용자가 버튼을 클릭하거나 버튼 객체의 click() 메소드를 실행할 때 버튼 객체가 호출됩니다.

 

button 객체의 속성

name : 버튼을 정의하는 이름

type : 객체의 타입 선택

value : 버튼명을 위해 이용되는 문자열의 값

 

button 객체의 메소드

blur() : 버튼으로부터 커서 제거

focus() : 버튼으로부터 커서를 넣어주는 기능

click() : 버튼의 클릭을 확인하는 메소드

 

형식 

<input type="button" .... >

 

 

(2) radio 객체

html 파일의 radio 버튼 입력 양식에 대한 속성, 메소드, 이벤트를 지원하며, 여러 개의 라디오 버튼 그룹 안에서 한 개의 라디오 버튼만을 선택할 수 있습니다.

 

radio 객체의 속성

name : radio 버튼을 정의하는 이름

type : 객체의 타입 선택

value : radio 버튼명을 위해 이용되는 문자열의 값

checked : radio 버튼이 체크되었는지를 확인

length : 그룹 안에 들어 있는 radio 버튼의 수

 

radio객체의 메소드

blur() : radio 버튼으로부터 커서 제거

focus() : radio 버튼으로부터 커서를 넣어주는 기능

click() : radio 버튼의 클릭을 확인하는 메소드

 

형식

<input type="radio" ....>

 

 

 

(3) checkbox 객체의 속성

한번 선택하면 체크되고, 다시 한번 선택하면 체크가 사라지고 여러 개 선택이 가능합니다.

checkbox 객체는 html 파일의 checkbox 입력 양식에 대한 속성, 메소드, 이벤트를 지원합니다.

 

checkbox 객체의 속성

name : checkbox 버튼을 정의하는 이름

type : 객체의 타입 선택

value : checkbox 버튼명을 위해 이용되는 문자열의 값

checked : 체크 박스 체크되었는지를 확인

 

checkbox 객체의 메소드

blur() : checkbox 버튼으로부터 커서 제거

focus() : checkbox 버튼으로부터 커서를 넣어주는 기능

click() : checkbox 버튼의 클릭을 확인하는 메소드

 

형식 

<input type="checkbox" ....>

 

 

 

 

⑤ Submit, Reset 객체

submit 객체는 사용자가 입력한 데이터들을 서버로 전송하는 역할을 하며 주로 reset버튼과 함께 사용되는 버튼입니다.

 

submit, reset 객체의 속성

name : 버튼을 정의하는 이름

type : 객체의 타입 선택

value : 버튼명을 위해 이용되는 문자열

 

submit, reset 객체의 메소드

blur() : 버튼으로부터 커서 제거

focus() : 버튼으로부터 커서를 넣어주는 기능

click() : 버튼의 클릭을 확인하는 메소드

 

형식

<input type="submit" ....>

<input type="reset" .....>

 

 

 

 

⑥ select 객체

select 객체는 체크박스, 라디오 버튼 기능과 유사하며 <select> 태그와 <option> 태그를 이용하여 리스트를 나타냅니다.

 

 

select 객체의 속성

name : 선택 리스트 박스의 이름

multiple : 사용자가 한 개 이상의 리스트를 선택할 수 있도록 하는 속성

size : 스크롤 시 한 번에 출력할 수 있는 리스트의 수

selectedindex : 객체의 타입 구분

 

select 객체의 메소드

blur() : select 리스트로부터 커서 제거

focus() : select 리스트로 커서를 넣어주는 기능

 

형식

<select .....>

    <option value="....">

     ....

</select>

 

 

 

 

⑦ file 객체

file 객체는 버튼을 이용하여 필드와 시스템 디렉터리를 검색하여 업로드하고 싶은 파일을 선택하면 선택한 파일의 정보가 브라우저 화면에 나타납니다.

 

file 객체의 속성

name : 파일 업로드 필드에서 지정되는 파일 이름

type : 업로드할 파일

value : 파일 업로드 필드에 업로드시킨 파일

selectedindex : 객체의 타입 구분

 

file 객체의 메소드

blur() : 파일 업로드 필드로부터 커서 제거

focus() :파일 업로드 필드에 커서를 넣어주는 기능

 

 

다음은 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <script language="javascript">
  function filesearch(file){
    alert(file.filename.value+" 파일이 업로드 됩니다.");
  }
  </script>
  </head>
<body>
  <form name="fileform">
    업로드할 파일 선택: <br>
    <input type="file" name="filename" size=30><br>
    <input type="button" value="올리기" onclick="filesearch(this.form)">
  </form>
 </body>
</HTML>
 
 cs

 

 

 

 

저작자표시 비영리 변경금지

'It공부 > JavaScript' 카테고리의 다른 글

6. 웹브라우저 내장객체  (0) 2020.07.28
5. 이벤트와 이벤트 핸들러  (0) 2020.07.27
4. 객체  (0) 2020.07.26
3. 함수  (0) 2020.07.24
2. 연산자와 제어 구조  (0) 2020.07.24
'It공부/JavaScript' Related Articles more
Comments