웹 표준 핵심 가이드북 : 폼 관련 요소

1. 폼 이란 ?

사용자가 자료를 검색하기 위한 검색어 입력 상자나 여러 가지 항목에서 원하는 값을 선택할 수 있도록 제공하는 라디오 버튼 또는 체크 박스, 목록 형태로 펼쳐지는 목록 상자, 서버로 자료를 전송하기 위한 전송 버튼 등을 가리킨다.

 

2. 폼 요소(form)

   폼의 내용

action : "URI" : 폼의 내용을 처리하기 위한 서버의 URI(필수)

method : "get 또는 set"

get : 데이터의 길이가 짧거나 보안상 중요하지 않은 데이터 전송시 사용(변수값 노출됨)

post : 데이터의 길이가 길고 보안상 중요한 데이터 전송시 사용

 

3. 폼 요소 그룹화 및 제목(fieldset, legend)

여러 개의 폼 요소를 그룹하여 좀 더 구조적으로 만드려면 fieldset 요소를 사용한다.

fieldset 요소를 이용하면 fieldset 주위에 border가 생성되어 해당 그룹 안에 있는 콘텐츠가 폼과 관련된 컨트롤 요소임을 쉽게 구별할 수 있다. 또 legend 요소로 fieldset 컨트롤들이 어떠한 성격의 콘텐츠인지 제목 형식으로 알려줄 수 있으며, fieldset 요소의 바로 뒤에 한번만 작성할 수 있다. 단 웹 브라우저 스타일이 다르게 적용되어 있으므로 주의해야 한다.  

      
폼 요소의 제목
       폼 내용
   

 

4. 폼 요소 활용

다양한 폼 컨트롤
	

		

			
회원정보
			
아이디
				
				
			
비밀번호
			
이메일
				 @
				
			

				성별

				
				남자
				
				여자
			
			

				사진
				
			
			

				수신설정

				
				메일 수신 허용
				
				수신 허용
			
			

		
	
	
	
목록 상자 만들기
	

		

			
목록상자
			

				연령
				 10대 20대 30대 40대
			
			

				연락처정보

				 010-1234-1234 010-1234-1235 010-1234-1236
			
		
		

			
목록 항목의 그룹화
			

				주소
				  강남구 중구   안양시 부천시 
			
		
		
글 상자와 버튼
		

			
여러 줄 글상자 만들기
			

				메모

				의견을 남겨주세요
			
		
		

			
여러 가지 버튼
			
전송 버튼
				
			
			
취소 버튼
				
			
	
			
일반 텍스트 버튼
				

			
			
이미지 버튼
				
			
			
			button 요소의 경우 스스로 어떤 콘텐츠인지 알려주기 때문에 레이블이 필요없다.