1. 폼 (FORM)
1) FORM의 기능
- Form을 이용하여 사용자가 입력한 정보를 서버에 전송
- 서버의 폼 처리기에서 정보를 저장하거나 사용
2) FORM 요소
- 인라인 자식 요소를 가질 수 없는 블록 요소
action : 폼 처리기의 url 지정 (JSP url을 적어준다)
method : 폼 전송 시 사용되는 http 메서드 타입 지정. get, post
- get : 간단한 데이터를 빠르게 처리. 데이터 사이즈는 4096Byte.
- post : http 헤더 뒤에 입력 스트림 데이터로 전달. 같은 양인 경우 get보다 느리다.
2. INPUT
type : text, password, checkbox, radio, hidden, button, reset, submit
name : 해당 개체의 이름 javascript나 jsp에서 참조
size : 입력 창의 크기
maxlength : 최대 입력 글자 수
value : 해당 개체의 값
checked : checkbox나 radio button의 경우 체크 표시가 됨
1) 텍스트 필드 <input type=“text”>
- 한 줄짜리 입력 필드 생성
- 필드의 폭을 초과하는 입력 문자는 뒤쪽 텍스트만 화면에 표시
2) 전송 버튼 <input type=“submit”>
- 클릭하면 폼 데이터 셋 전체를 전송
예제)
- 다음과 같이 form 안에 검색어를 입력할 텍스트 필드와 전송 버튼 생성
- 네이버 사이트에서 검색엔진을 사용하기 위한 form 요소를 찾아 method와 action 값 찾아오기
- 찾아온 값들을 생성한 form 요소의 속성 값으로 입력하여 완성
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>보도 자료</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
padding: 20px;
font-family: 'Nanum Gothic', serif;
color: rgb(102, 102, 102);
font-style: normal;
font-size: 12px;
line-height: 20px;
}
</style>
</head>
<body>
<h1>포털 사이트의 검색 엔진 이용</h1>
<h2>네이버에서 검색하기</h2>
<form id="sform" name="sform" action="http://search.naver.com/search.naver" method="get">
검색어 입력 :
<input id="query" name="query" type="text" title="검색어 입력" class="input_text" tabindex="1" accesskey="s" style="ime-mode:active;" autocomplete="off" onclick="document.getElementById('fbm').value=1;">
<button id="search_btn" type="submit" title="검색" tabindex="3" class="sch_smit" onmouseover="this.className='sch_smit over'" onmousedown="this.className='sch_smit down'" onmouseout="this.className='sch_smit'" onclick="clickcr(this,'sch.action','','',event);"><span class="ir">검색</span></button>
</body>
</html>
네이버에서 요소 검사(F12)를 통해 HTML 코드를 분석하고 input 바와 button을 가져와서 사용해보는 예제.
3) password <input type=“password”>
- 비밀번호 입력을 위한 한 줄짜리 입력 필드 생성
- 입력된 텍스트를 별표(*)나 점(.)을 사용하여 가려서 표시
- maxlength 속성으로 최대 입력 글자 제한 가능
4) checkbox <input type=“checkbox”>
- 하나 이상 선택이 가능한 경우를 위한 선택 토글
- value 속성 값이 없을 경우 체크되면 “on”을 전달
- checked 속성을 이용하여 초기 체크된 상태 지정 가능
5) radio <input type=“radio”>
- 한 세트에서 한가지 옵션만 선택할 때 사용
- 한 세트는 name 값을 동일하게 지정
- value 속성을 반드시 사용
6) file <input type=“file”>
- <input type=“file”>로 파일 업로드 컨트롤 생성
- 선택된 파일은 텍스트 필드에 로컬 경로가 표시되고 폼이 전송될 때 서버에 업로드
- accept 속성을 이용하여 gif나 jpg 포맷만 업로드 가능하게 제한 가능.
- 이 경우 <form> 태그에도 accept 속성을 사용 해야 함
7) submit과 reset
- submit은 클릭하면 폼 데이터 셋 전체를 전송
- reset은 폼 전체의 컨트롤을 초기값으로 설정
- value 속성으로 버튼에 표시될 텍스트 설정
8) image <input type=“image”>
- submit 버튼처럼 동작
- 버튼의 모양을 이미지로 사용 가능
- 이미지를 사용하므로 alt 속성 필요
9) 기타 타입들
<input type=“button”>
- 일반 버튼
- 클릭하여 클라이언트 측 스크립트를 호출하는 것이 일반적
<input type=“hidden”>
- 브라우저에 표시되지 않음
- 수정할 필요가 없는 추가 데이터를 폼의 다른 컨트롤과 함께 전송하기 위해 사용
3. button
- 텍스트와 인라인 요소를 자식으로 가지는 인라인 요소
- submit, reset, button 세 가지의 타입을 가짐
4. select
- 적어도 하나 이상의 <option>을 자식으로 가지는 인라인 요소
size : 입력 창의 크기
multiple : 하나 이상의 아이템 선택 가능
name : 해당 개체의 이름 javascript나 jsp에서 참조
- multiple 속성 사용 시 Window에서는 <Shift>나 <Ctrl>키를, Mac에서는 Command 키를 이용하여 여러 개의 옵션 선택 가능
1) option
- 텍스트만을 자식으로 가짐
- value 속성에 값이 지정되지 않으면 자식인 텍스트를 폼으로 전송
2) optgroup
- option 요소만 자식으로 가짐
- select 요소 안에서 하나 이상의 option 요소를 관련된 카테고리로 묶을 수 있음
6. textarea
- 여러 줄짜리 텍스트 필드 생성
- 텍스트만 자식으로 가지고 컨트롤의 초기값으로 표시됨
- 박스의 크기는 텍스트의 크기에 따라 다르게 렌더링 됨
- cols 속성으로 가로 한 줄에 들어가는 글자 수 지정
- rows 속성으로 세로 방향으로 스크롤 없이 표시되는 텍스트 줄 수 지정
name : 해당 개체의 이름 javascript나 jsp에서 참조
cols : 입력란의 너비(칸 수)
rows : 입력란의 높이(즐 수)
wrap : physical 자동 줄바꿈 / off 줄바꿈을 하지 않는다.
7. FORM의 웹 접근성 요소
1) 시맨틱 구성
- 폼이 여러 부분으로 나뉠 때 <div>로 묶고 hn 요소를 이용하여 타이틀 지정
- 폼 안의 각 컨트롤이 별개의 개념이면 각각의 단락으로 묶음
- 체크 박스나 라디오 버튼은 목록 요소를 사용
2) fieldset
- 폼 컨트롤을 묶어 주는 중첩 가능한 블록 요소
- 논리적 그룹으로 묶어주는 관련 컨트롤 세트가 포함
- legend 요소를 이용하여 필드 세트의 제목을 제공해야 함
3) legend
- 텍스트와 인라인 요소만을 자식으로 가지는 인라인 요소
- field 요소 안에서 필드 셋의 텍스트 타이틀이나 캡션을 제공
4) label
- 인라인 요소
- 특정 컨트롤에 대한 텍스트 라벨 생성
- 컨트롤과의 명시적, 암묵적 연결 방법
- 라벨 영역을 클릭하여 컨트롤에 포커스를 줄 수 있음
label 연결 방법
명시적 : id와 for 속성을 이용하여 연결
암묵적 : 컨트롤을 label 요소 안에 입력
5) 필수 필드 표시
- CSS가 아닌 XHTML 마크업 안에 표시
- 별표(*)나 작은 점, ‘필수 항목’ 명시
- 색상 사용시 붉은 색은 에러를 나타내므로 피함
'웹접근성과 웹표준' 카테고리의 다른 글
| 다양한 선택자: CSS 리셋,Display:inline-block, :before, :after 등 (0) | 2013.07.24 |
|---|---|
| 사이트 제작시 웹 접근성 고려 사항 (0) | 2013.07.23 |
| 테이블(TABLE)의 웹 접근성 요소 (0) | 2013.07.21 |
| 배경: 백그라운드 (background) (0) | 2013.07.20 |
| CSS 박스 모델의 이해 (0) | 2013.07.20 |
