[Javascript] Form

JavaScript 로 다양한 form element 들의 '값을 가져 올수도' 있어야 한며,
반대로 '값을 입력해야 할수도' 있다.

JavaScript 는 form element 들을 접근할수 있는
다양한 방법들을 제공한다.  (특히 name 값 활용!)

 ★ form 에서 읽어온 값은 무조건 string 이다!

 

* <form> 객체 가져오기

1. 일반적인 input 값   .value

2. checkbox 의 값   .checked 로 판단

 

3. checkbox 동일 name 이 여럿인 경우

 

4. radio : 이 또한 동일 name 으로 구성.  3. 과 유사.

 

5. <select> : 단일 .value 사용

result += "좋아하는차1: " + frm['cars'].value + "<br>";

 

 

6. <select> : multiple 3. 과 유사 .selected 사용

 

7. <textarea> : .innerHTML 혹은 .value로 값을 가져올수 있다

.value : '현재' 사용자가 입력한 값
.innerHTML :  'HTML' content 값.

 

 result += "메모: " + frm['message'].innerHTML + "<br>";
 result += "메모: " + frm['message'].value + "<br>";

 

 

아래와 같이 form 표시 가능

 

* input
  frm['username'].value = '홍길동';

* checkbox
frm['drive'].checked = false;
frm["music"].checked = true;
frm["sports"].checked = true; 
  
* checbox(동일 name)
frm['skill'][0].checked = false;
frm["skill"][1].checked = true;
frm["skill"][2].checked = true;  

* radio button
  frm['gender'][0].checked = true;

* select (단일)
  frm['cars'].value = 'fiat';

* select (multiple)
frm['cars2'][0].selected = true;
frm["cars2"][1].selected = false;
frm["cars2"][2].selected = true;
frm["cars2"][3].selected = false;  

* textarea : .value, .innerHTML 가능.
  frm['message'].value = '안녕하세요';