6. HTML 폼 태그

폼(form)

웹에서는 사용자에 대한 웹 서버의 일방향적 정보 전달 뿐 아니라 사용자와 웹 서버간의 데이터를 주고받아야 한다. 이러한 양방향적 특성을 위해 <form> 태그를 사용한다.

폼 태그의 사용

폼 태그

HTML 문서에서 폼을 통하여 사용자의 입력 데이터를 웹 서버로 전송한다. <form> 태그 안에 또다른 <form>태그를 포함하는 것은 불가능하다.

• action : 데이터를 처리할 프로그램의 rul

• method : 데이터를 서버에 전달하는 방법

  • get : query string이 그대로 url에 나타나며 데이터 양이 제한되고 노출된다.

  • post : message body에 포함시켜 서버에게 전달되며 양의 제한이 없으며 데이터가 노출되지 않는다.

• encrypte : "application/x-www-form-urlencoded(기본) | multipart/form-data | text/plain" post 방식에서 전송 인코딩 형식

• target : 데이터의 처리 결과를 표시할 장소

• accept-charset : 폼 이름

• name="폼 이름"

입력 태그

<form> 태그 내에서 사용자가 입력할 수 있는 요소를 정의하기 위해 input 태그가 사용된다.

**input 태그의 속성

• type="형식"

  입력 요소의 형식

  • text
  • password
  • checkbox
  • radio
  • hidden
  • image
  • button
  • submit
  • reset

• name="이름"

  입력 요소의 이름

  • submit과 reset 을 제외한 모든 type의 필수 요소

• value="값"

  입력 요소의 이름

  • text, password :
  • checkbox, radio
  • submit, reset

• size="문자 수"

  입력 요소의 이름

  • text, password 입력 필드의 크기 (기본 영문자 20)

• chected="checkted"

  입력 요소의 이름

  • checkbox, radio의 기본 값

• maxlength="문자 수"

  입력 요소의 이름

  • text, password 에서 입력받을 수 있는 최대 문자 수

선택 태그

드롭다운 리스트(drop down list) 를 사용하며 <form> 태그 안에서 사용한다. 여러 개의 항목들을 동시에 선택할 경우는 multiple 옵선을 추가한다.

<select name="이름" size="목록 창에 보이는 항목의 수" [multiple]>
  <option> 항목 </option>
</select>

텍스트 영역 태그

텍스트를 입력하여 전송할 경우 사용되며 <form> 요소 내에서 <textarea>태그를 사용하며 다음과 같은속성을 갖는다.

<textarea [속성]> ~ </textarea>

• name="이름" : 텍스트 영역의 이름
• rows="행의 수" : 브라우저에 표시되는 행의 수 (기본 2)
• cols="열의 수" : 브라우저에 표시되는 열의 수 (기본 영문자 20)