HTML form은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중
중요한 기술 중에 하나이다. form은 사용자가 웹사이트 데이터를 전송하는 것을 허용한다.
일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위해 사용할 수도 있다.
form은 하나 이상의 위젯으로 만들어 진다.
위젯은 텍스트 필드, 셀렉 박스, 버튼, 체크박스, 라디오 버튼 등이 될 수 있다.
폼을 사용하면 폼에 의해 수집된 데이터를 웹서버에 전송한다. 이런 경우
데이터를 받거나 처리하는 웹서버를 설정해야한다.
폼을 디자인할 때
사용자 경험 관점에서 폼이 많을수록 사용자들이 더 줄어든다는 사실을 기억하라.
폼 디자인은 사이트나 어플리케이션을 만드는 과정 중 중요한 단계이다.
예시
<form action="/my-handling-form-page" method="post">
</form>위 예시는 폼의 공식적인 형태이다. 폼은 action 속성과 method 속성을 필수적으로 설정해야 한다.
action 속성은 데이터를 보낼 URL을 지정한다.
method 속성은 어떤 HTTP방식을 사용할 것인지 지정한다.(GET or POST)
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" />
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>div 태그는 코드를 편하게 구성하고 스타일링을 쉽게 만들어 준다.
for 속성은 모든 label 태그에서 공식적으로 폼 위젯과 라벨을 연결하는데 사용한다.
이 속성은 위젯에 맞는 ID를 참조한다. 이것은 몇 가지 장점이 있는데
가장 중요한 것은 사용자가 라벨을 눌렀을 때 그것에 맞는 위젯을 활성화 시키는 것이다.
input 태그의 가장 중요한 속성은 type 속성이다. 이 속성은 input 태그가 어떻게
입력을 받을 것인지 정의하기 때문에 매우 중요하다.
type="text"는 제어나 유효성 검사 없이 모든 종류의 텍스트를 받아 들이는 한 줄 텍스트 필드를 나타낸다.
type="email"는 사용자가 입력한 데이터에 대한 몇 가지 검사를 수행하는 지능형 필드의 종류로 전환한다.
위 코드에서 input태그와 textarea태그를 사용하는데
input태그는 자동 닫힘 태그이므로 끝날 때 반듯 /를 태그에 추가해야하는 것을 의미한다.
반대로 textarea태그는 자동 닫힘 태그가 아니다 그래서 반드시 엔딩태그를 사용해서 태그를 종료해야한다.
이것은 기본값을 정의하는 특정기능에 영향을 미치는데
input 태그의 경우 기본값을 반드시 value 속성을 통해 지정해야한다.
<input type="text" value="by default this element is filled with this text" />반면에 textarea 태그에서 기본값을 정의할 때는 시작 태그와 엔딩 태그 사이에 문자들을 입력하면 된다.
<textarea>by default this element is filled with this text</textarea>버튼은 다음과 같은 3가지 종류가 있다.
submit, reset, button
- submit 버튼을 클릭하면 폼 데이터를 form태그의 action 속성에 정의된 웹페이지에 전송한다.
- reset 버튼을 클릭하면 모든 폼 위젯을 기본 값으로 바꾼다.
- button 버튼은 아무것도 안한다. 그러나 JavaScript를 사용하면 유용한 사용자 버튼이 될 수 있다.
웹서버로 데이터를 보낼 때
form 요소는 action 속성과 method 속성을 사용하여 데이터를 어디에 어떻게 보낼 것인지
정의하는데 이것만으로는 충분하지 않다.
데이터의 이름을 지정해야한다. 이러한 이름들은 브라우저 측이나 서버 측 모두에게 중요하다.
브라우저에게는 데이터 각 부분에는 이름을 지정하고
서버측에는 이름을 이용하여 데이터를 다룰 수 있게 해준다.
그래서 데어터의 이름을 지정하려면 데이터를 받는 각 폼 위젯에 name속성을 지정해야한다.
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email" />
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
