웹표준 23 기 건대 4 번째 스터디 - 이미진

form 의 이해

웹 문서가 서로 상호작용을 할 수 있도록 하는 역할

검색어 입력 , 원하는 값을 선택 , 목록상자 등 서버로 자료를 전송하기 위한 버튼 등이 해당

form 이란 ?

폼 사용의 예

첫번째 fieldset

두번째 fieldset

= ㅁ = 나머지

폼의 범위를 정한다속성

Action =“url” 폼의 내용을 처리하기 위한 서버의 url( 필수 )Method =“get 또는 post”

get : action 속성에 지정한 url 에 폼의 내용을 추가해서 서버에 송신하는 방식 form 의 기본값 , 데이터의 길이가 짧을경우 적합하며 ,post 보다 속도가 빠르나 주소창에 변수값이 노출되므로 보안상의 경우는 post 를 사용한다

post : 폼의 본문을 송신하는 방식 , 길이가 길때 적합 , 보안문제때문에 데이터값을 노출시킬수 없을때 (회원가입등 ) 사용

<form> 요소

fieldset여러 개의 폼 요소를 그룹화 하여 좀 더 구조적으로 묶어줄

때 사용한다 . 기본값은 border 가 있어서 콘텐츠가 폼과 관련있는 요소인지 구별할 수 있게 해준다 .

legend하나의 fieldset 안에 하나의 legend 가 가능하며 ,

필드셋바로다음에 작성해준다 그 그룹의 컨텐츠가 어떠한 성격인지 제목형식으로 알려준다 .

Xhtml 에서는 반드시 사용하지않아도 괜찮지만 접근성측면에서 사용하도록 한다

<fieldset>,<legend> 요소

폼을 구조화 하고 접근성을 높인다 . 각 폼 컨트롤의 ( 예를 들면 인풋요소 ) 연관관계와

추가설명을 하는 역할을 담당한다 . 1 대 1 로 대응웹표준을 지원하는 브라우저의 경우 레이블만

선택해도 폼 컨트롤이 선택된다 .스크린리더의 경우 폼 컨트롤과 레이블이

떨어져있어도 인식할 수 있도록 지원 . 명시적 방법 (for 속성과 폼 컨트롤의 id 를 연결 ) 과

암묵적 방법 (label 안에 폼 컨트롤 포함 ) 의 2 가지가 있다 .

( 첫번째 소스 주석 4 번 참고 )

<label> 요소

text : 한줄 글상자 , 텍스트를 입력받음password : 비밀번호 입력상자 , 값을 * 등으로 표시 radio : 동그란 라디오 버튼 , name 값을 동일하게 주면 하나만

선택가능함checkbox : 다중선택 가능한 체크박스 file : 파일을 첨부 형태로 서버로 보낼 때 사용 image : 이미지 버튼 src 속성에 이미지 경로 , alt 에 대체텍스트 사용submit : 전송버튼 reset : 취소버튼button : 범용버튼 , 이벤트가 발생할 때 스크립트 또는 프로그램

수행하기 위함hidden : 숨김 컨트롤 , 화면에 표시되지 않으며 프로그램에

송신하려고 하는 데이터 지정

<input> 요소 – 10 가지 type

select 목록상자 기본은 드롭다운 형태지만 size=“10” 같이 1 이상주게

되면 리스트 박스 형태로 나온다 Multiple 이란 속성을 사용하면 다중선택이 가능

optgroupt 옵션들을 그룹으로 묶어서 사용한다 Label 이란 속성을 사용하면 어떤 종류로 묶였는지

나타낼수있다 . option

Select 박스의 하위 항목 value 속성을 가질 수 있다 . Selected 속성을 사용하여 맨 처음에 노출시킬수있음

<select>,<optgroup>,<option> 요소

여러줄 글상자 입력받을 수 있는 텍스트 수는 제한이 없다영역크기는 cols=“ 영문 a 의 경우 a 가 가로로

들어가는숫자” , rows=“a 가 세로로 들어가는 숫자” 로 정한다 .

웹 브라우저나 글꼴에 따라서 달라질 수있으므로 CSS 에서 크기를 지정한다 .

<textarea> 요소

인풋요소의 타입과 같지만 좀더 유연한 디자인이 가능하다 .

Image 이미지 버튼 ( 기본속성은 submit) Button 그냥 텍스트 기본버튼 Submit 전송 버튼Reset 취소 버튼

<button> 요소 – 4 가지 type

아닙니당Button 요소의 경우 스스로 어떤콘텐츠인지를

알려주기때문에 레이블이 필요없다 .( 콘텐츠 자체를 요소로가짐 )

Input type=“submit” , input type=“reset” 은 value 속성으로 대체할 수 있다 .

Type=“image” 인 경우 alt 속성이 대체용으로 사용됨

숨김 input type=“hidden” 도 필요없다 . label 을 사용하지 못할경우 title 로 대체할 수도있다 .

Lable 을 무조건 사용해야 하는가 ?

웹표준 핵심가이드 북 xhtml+css

Html5 에서는 폼요소가 많이 추가가 되었습니다 .

꼭 확인하고 공부하세염 ..

출처