다음 form을 구성하는 HTML elements에 대해서 알아보자.
- form
- input
- label
- textarea
- fieldset
- select
- button
form element는 다른 input이나 button elements들을 담는 element이다. form에는 action과 method, 두가지 attributes를 넘겨야 한다. action attribute는 그 form의 data를 어디로 submit할지를 정한다. method attribute는 그 form의 data를 get으로 보낼지, post로 보낼지를 정한다. 일반적으로 get method는 query string으로 표현되므로 unsecured data를 다룰 때 사용되고, post는 secure data를 다룰 때, 또는 많은 양의 data를 다룰 때 사용된다. 다음과 같은 형식이다.
input element는 text input field, radio buttons, checkboxes를 만든다. type과 name attribute가 필요하다. type attribute는 입력의 type을 정한다. name attribute는 form을 submit할 때 구분할 unique name을 정한다. form data는 key-value pairs로 구성되는데, 이 때 키가 되는 것이 name이고, 해당하는 값이 value가 된다.
text type의 예제는 다음과 같다. maxlength attribute로 최대 길이를 정할 수 있다.
E-mail의 입력에는 email type을 사용할 수 있다.
password의 입력에는 password type을 사용할 수 있다.
checkboxes를 사용할 때는 checkbox type을 사용한다. name에 unique한 값을 주고, 각 checkbox의 value에도 unique한 값을 준다.
radio buttons를 사용할 때는 radio type을 사용한다. 모든 name에 같은 값을 주고, 각 button의 value에 unique한 값을 준다.
label element는 input elements들과 연관된 text를 줄 때 사용한다. 예를 들면 위에서 “이름 :” 같은 것들. 스크린리더를 사용하는 사람들에게 도움이 된다. label element는 input의 id attribute와 연관되는 for attribute를 가진다.
textarea element는 여러 줄의 text 입력을 위해 사용한다. rows와 cols attributes로 size를 지정할 수 있다.
fieldset element는 여러 form 내의 elements들을 그룹짓고 싶을 때 사용한다.
select element는 select boxes를 만든다. 매우 긴 list의 옵션 중 하나를 선택할 때 쓴다. select element 안에 option element의 list를 넣어서 만든다.
button element는 form을 submit할 때 사용한다. type attribute로 세가지 값을 사용할 수 있다. 첫번째로 아무 행동도 안하는 것, 두번째로 “reset”, 이걸 누르면 form 값들이 모두 리셋된다. 마지막으로 “submit”, 클릭하면 submit한다.