[HTML] 웹폼 Webform

1. 폼 이해하기

웹 폼은  로그인, 등록, 검색, 예약,쇼핑 등의 다양한 웹서비스에서 사용자의 입력을 받기위해 사용된다. HTML5에서는 <input>, <textarea>, <select> 등의 태그들을 제공하며 이 태그들을 폼 요소(form element)라고 부른다.

 

   1-1. 폼 태그, <form>

<form action="웹 서버 응용 프로그램의 URL"
      entype="데이터의 인코딩 타입"
      method="GET | POST"
      name="폼이름"
      target="윈도우 이름">
      ... 여러 개의 폼 요소 작성
</form>

• action : 폼 데이터를 처리할 웹 서버 응용프로그램 이름 URL
• entype : 폼 데이터를 웹 서버로 전송할 때 암호화 방식 지정
• method : 폼 데이터를 웹 서버에 전송하는 방식
• target : 웹 서버 응용프로그램으로부터 전송받은 데이터를 출력할 윈도우 이름

 

 

   1-2. 간단한 로그인 폼

<form name="fo" method="get">
	사용자 ID : <input type="text" size="15" value=""><br>
	비밀 번호 : <input type="password" size="15" value="">
	<input type="submit" value="완료">
</form>

• <form> ... </form> : 폼 요소들을 담는다.
• <input type="text" size="15" value=""> : 문자열 압력 창을 만드는 태그. 창의 크기는 15문자 크기로 한다.
• <input type="password" size ="15" value=""> : 15문자 크기의 암호 입력 창. 사용자가 입력한 문자가 드러나지 않도록 화면에 '*'가 대신 출력된다.
• <input type="submit" value="완료"> : submit 버튼을 만드는 태그. 이 버튼을 누르면 사용자가 폼 요소들에 입력한 내용을 모두 웹서버로 전송한다.  

 

 

2. 폼 요소의 종류

폼 요소	설명
<input type="text">	한 줄 텍스트 입력 창
<input type="password">	암호 입력을 위한 한 줄 텍스트 입력 창
<input type="button">	단순 버튼
<input type="submit">	웹 서버로 폼 데이터를 전송시키는 버튼
<input type="reset">	입력된 폼 데이터를 초기화시키는 버튼
<input type="image">	이미지 버튼
<input type="checkbox | radio">	체크박스와 라디오버튼
<select>	드롭다운 리스트를 가진 콤보박스
<input type="momth | week | date | time | datetime-local">	년, 월, 일 시간 등의 시간 정보 입력창
<input type="number | range">	스핀 버튼과 슬라이드바로 편리한 숫자 입력 창
<input type="color">	색 입력을 쉽게 하는 컬러 다이얼로그
<input type="email | url | tel | search">	이메일, URL, 전화번호, 검색키워드 등 형식 검사 기능을 가진 텍스트 입력 창
<input type="file">	로컬 컴퓨터의 파일을 선택하는 폼요소
<input type="button | reser | submit">	단순 버튼, reset, submit 버튼
<textarea>	여러 줄의 텍스트 입력 창