<form action="http://test.test.org/check" method="get">
<label for="url">url 주소 입력</label>
<input id="uri" type="text" name="uri" />
<input type="submit" value="전송" />
</form>
1) form
- action 속성은 이 폼을 전송할 url 을 의미한다.
- method 속성은 폼에 전송할 방식을 지정하며, GET 방식과 POST 방식으로 나뉜다.
GET 방식 : method 속성 값이 get 인 환경에서, url 주소를 jhnoh.com 으로 입력한 경우에는, 아래와 같이 나타난다.
즉, 서버가 url=jhnoh.com 로 페이지를 요청받는 다는 것을 알 수 있다.
POST 방식 : 반면 POST 방식은 URL 에 값이 노출되어 서버에 전달되는것이 아닌, body 부분에 포함되어(일반 사용자에게는 안보임) 전달된다.
2) input
input 요소는 텍스트 입력 뿐 아니라, 전송 버튼, 라디오 버튼, 체크 박스 등 여러가지로 표한 될 수 있다.
input 요소는 주로 다음과 같이 사용된다.
<input type="text" name="url" />- input 요소는 위와 같이 스스로 닫는 태그이다.
- type 속성을 통해서 인풋의 형태 타입을 결정 할 수 있다. 위 소스 예시는 텍스트 인풋을 나타내며, 이 외에 password, hidden, submit 등 다양한 속성 값이 있다.
- name 은 데이터가 서버로 전송될 때 할당되는 변수의 이름이다. name 값이 abc 이고 해당 form 이 GET 방식으로 전송된다면, URL 주소에 'ABC=값' 이 붙어서 전송된다.
<input type="submit" value="전송" />- submit 타입의 요소를 클릭할 경우에는 해당 폼안에 있는 값들이 해당 서버로 전송된다.
- value 값은 원래 요소의 기본 할당값이나, 버튼 형태에서는 해당 버튼에 표시되는 텍스트이다. 만약 value 속성 값이 없을 경우는, 해당 브라우저의 기본 텍스트로 보여진다. (예를 들어, 크롬이라면 '제출', 파이어 폭스라면, '질의 보내기', IE 라면 '쿼리 전송' 같은 식이다.
- name 속성을 달아준다면, 해당 변수로 value 값이 전달된다. (name이 send 이고 value가 전송이라면 'send=전송'의 형태로 전달된다.
<label for="id">아이디 입력</label>
<input type="text" id="id" />위의 속성과 같이 for 속성에 해당하는 폼 요소의 id 이름을 입력해서 연결한다.
솔직히 label 이 왜 필요한지는 아직 잘 모르겠지만, 웹 접근성 기준 상 폼 입력 요소가 있다면 이에 해당 하는 label 을 반드시 가지고 있어야 한다고 한다.
참고
- http://webberstudy.com/html-css/html-3/form-1/