Javascript/HTML form에 대하여 알아보자!

폼은 정보를 입력받는 요소들의 집합이라 볼 수 있습니다.

 

입력이 기본적으로 이루어지게끔 구성되어있기 때문에 입력한 값을 받아서 처리하는 메소드와 속성들이 존재합니다.

 

1. form태그의 구성

 

action : 폼을 전송할 서버 쪽 스크립트 파일

 

name : 폼을 식별하기 위한 이름

 

accept-charset : 폼 전송에 사용할 문자 인코딩

 

target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

 

method : 폼을 서버에 전송할 http 메소드 (get, post)

 

<form
 action = "http://localhost:8080/test"
 accept-charset="utf-8"
 name = "person_info"
 method = "get"> 
</form>

2. 엘리먼트 <fieldset>, <legend>

 

폼에서는 왠만한 input태그들을 모두 사용할 수 있습니다.

 

그런데 여기서 <fieldset>과 <legend>가 무엇일까요?

 

<fieldset> 태그는 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용합니다.

<legend> 태그는 그룹화한 폼 엘리먼트들을 목적에 맞게 이름을 지정합니다.

<form action = "#" accept-charset="utf-8" name = "info" method = "get">
 <fieldset name="userInfo">
  <legend>정보 입력</legend>
   이름 : <input type = "text" name = "name"/>
   나이 : <input type = "text" name = "age"/>
 </fieldset>
 <fieldset name="friend">
  <legend>친구 입력</legend>
   이름 : <input type = "text" name = "f_name"/>
   나이 : <input type = "text" name = "f_age"/>
 </fieldset>
 <input type = "submit" value = "submit"/>
 <input type = "reset" value = "reset"/>
</form>

위와 같은 방법으로 통해서 값을 전달하거나 바꿀 수 있습니다.

 

자바스크립트를 별도로 필요로 하지않지만 자바스크립트를 이용한다면 어떻게 사용하면 좋을까요?

<form name="userOnly">
 <fieldset name="userInfo">
  <legend>정보 입력</legend>
   이름 : <input type = "text" name = "name"/>
   나이 : <input type = "text" name = "age"/>
 </fieldset>
 <fieldset name="friend">
  <legend>친구 입력</legend>
   이름 : <input type = "text" name = "f_name"/>
   나이 : <input type = "text" name = "f_age"/>
 </fieldset>
 <input type = "submit" value = "submit"/>
 <input type = "reset" value = "reset"/>
</form>

const userForm = document.form.userOnly;

userForm.addEventListener('submit', e => {
 // e.preventDefault(); // 요청을 보냈을때 서버의 응답에따라 화면을 갱신하지 않겠다. 는 의미 메서드
 userForm.method = 'GET';
 userForm.submit();
}

위와 같이 활용할 수 있겠네요. preventDefault메서드가 존재하는데 혹시나 궁금하실까해서 적어두었습니다.

 

폼에는 여러가지의 기능들을 넣을 수 있습니다.

 

기본적인 input textarea select 등 기본적인 태그에 대해서는 따로 설명을 하지 않겠습니다.

 

전달 되는 값은 name에 적혀있는 변수로 전달이 되며 서버와 일치 시킨다면 알아서 입력이 될 것입니다.