[Javascript] 폼 요소 접근

html 요소들을 접근 하는 방법들을 알아왔는데 그 중에서 폼(form) 요소에는 접근하는 방법이 또 따로 있습니다. 폼은 사용자로부터 직접 정보를 입력받는 공간이기때문에 따로 관리하면 편해지는 것이죠. 폼에 대한 설명은 이포스트에서 따로 다루지 않고 여기서는 접근법만 다루도록 하겠습니다.

 

2020.08.24 - [Programming/HTML,CSS] - [HTML] 폼 태그 1, 폼 요소 태그들 - 1

2020.08.25 - [Programming/HTML,CSS] - [HTML] 폼 태그 2, 폼 요소 태그들 - 2

2020.08.27 - [Programming/HTML,CSS] - [HTML] 폼 요소 3, 폼 요소의 속성들

2020.08.27 - [Programming/HTML,CSS] - [HTML] 폼 요소 4, 의 속성 값

---

1. 입력 폼

첫 번째 폼 요소는 입력 폼입니다. 입력 폼이라 하면, 우리가 id나 패스워드를 적는 공간, 기차예매 페이지의 날짜 선택란, 블로그의 댓글란 등 값을 입력할 수 있는 폼들을 통틀어서 입력 폼 이라고 합니다. 보통 입력 폼들은 입력란에 들어있는 값들만 빼와서 처리하면 되기 때문에 비교적 절차가 간단합니다.

 

이하 예시는 입력 폼을 취득하는 방법입니다. (예시에서는 취득하는 방법들만 다루겠습니다.)

<form>
	<input id="email" type="text" name="email">
    	<input id="btn" type="button" value="버튼">
</form>

document.getElementById('btn').addEventListener('click', function() {
	let email = document.getElementById('email');
}, false);

//참고로 email.value 처럼 프로퍼티를 통해 폼에 접근가능

 

 

 

 

2. 라디오 버튼과 체크 박스

라디오 버튼과 체크 박스는 여러개의 선택지 중에서 하나, 혹은 다수를 체크하여 선택하는 폼입니다. 만약 서론에 언급된 링크를 읽고 오지않은 분들을 위해 요약하자면 라디오 버튼은 여러개의 선택지 중에서 단 하나만 고르는 선택 상자이고 체크 박스는 한 개 이상을 선택 할 수 있는 선택 상자입니다.

위의 입력 폼처럼 버튼의 value를 가져오는 방법은 어렵지 않지만 언급했듯이 보통 '체크가 되어있는' 박스의 정보를 활용하게 됩니다. 그래서 체크된 상태를 확인하는 방법을 알아보려고 합니다.

 

<form>
    <div>
        <label><input type="checkbox" name="alphabet", value="a">a</label>
        <label><input type="checkbox" name="alphabet", value="b">b</label>
        <label><input type="checkbox" name="alphabet", value="c">c</label>
        <input id="btn" type="button" value="버튼">
    </div>
</form>

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('btn').addEventListener("click", function () {
        let alphabets = document.getElementsByName('alphabet');

        for (let i = 0; i < alphabets.length; i++) {
            let alphabet = alphabets.item(i);

            if (alphabet.checked) {
                console.log(alphabet.value + "가 체크되어 있음");
            }
        }
    });
});

우선 체크박스의 요소를 가져오는 let alphabets~ 구문까지는 문제가 없습니다. 이전 요소 추출법과 동일하기 때문이죠. 우리가 자세히 볼 부분은 for문 부터 시작하는 체크가 되어있는지를 확인하는 구간입니다.

 

for (let i = 0; i < alphabets.length; i++) {
            let alphabet = alphabets.item(i);

            if (alphabet.checked) {
                console.log(alphabet.value + "가 체크되어 있음");
            }
        }

item()을 통해 alphabets에 담긴 문자를 순서대로 검사하게됩니다. 이때 if문의 checked라는 구문이 현재 요소가 선택되어있는지를 확인해 줍니다. 그래서 현재 검사하고있는 요소가 체크되어 있는 요소라면 true를 반환하게 되어 if문을 실행합니다.

예시는 체크박스로 했지만 라디오 버튼도 똑같습니다. 단 위에서 언급했듯이 라디오버튼은 여러개의 선택지 중 단 하나만 선택이 가능하기 때문에 checked가 true를 반환했다면 추가적인 동작이 없도록 break 명령으로 반복을 빠져나오는 것이 좋은 프로그래밍 방법입니다.

 

 

 

 

 

3. 드롭다운 리스트

드롭다운 리스트는 여러개의 목록에서 하나를 선택하는 폼 요소입니다. <select>태그와 <option>태그를 사용하므로 위의 두가지 요소들과는 약간 다른 형식으로 취득합니다.

 

<form>
    <div>
        <select id='alphabet'>
            <option value='a'>a</option>
            <option value='b'>b</option>
            <option value='c'>c</option>
        </select>
    </div>
</form>

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('btn').addEventListener('click', function () {
        let options = document.getElementById('alphabet').options;

        for (let i = 0; i < options.length; i++) {
            let option = options.item(i);

            if (option.selected) {
                console.log(option.value + "옵션이 선택되었음");
            }
        }
    });

});

주목해야 할 점은 노드를 취득하는 과정에서 options 프로퍼티를 통해 <select>태그의 옵션들에 접근한다는 것과 선택을 확인하는 과정에서 checked가 아닌 selected가 사용되었다는 것입니다.

 

 

 

 

4. 파일 입력에 대해 접근하기

마지막 폼 요소는 파일 업로드입니다. 위의 친구들이 더 많이 쓰이겠지만 파일 업로드도 굉장히 많이 사용되고 있는 기능이기도 합니다.

 

파일은 File 객체를 통해 접근하는데 이 file프로퍼티도 정보가 많아 중요한것만 나열해봤습니다.

프로퍼티	설명
name	파일명
type	파일의 타입
size	파일 크기를 바이트 단위로 취득

 

let file = document.getElementById('file').files;

마찬가지로 똑같이 취득한 다음 .files를 통해 취득합니다.

---