Form

폼의 이해

입력창을 말한다.

입력창 자체는 HTML로 만들지만 안에 있는 내용을 서버로 전송할 때는 ASP나 PHP, JSP와 같은 서버 프로그래밍을 이용한다.

<form [속성="속성값"]>여러 폼 요소</form>

form 태그의 속성과 속성값

• method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정.
  • 값으로는
    • get : 데이터를 256 ~ 4,096 byte까지만 서버로 넘길 수 있음. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있음.
    • post : 내용의 길이에 영향을 받지 않고 사용자가 입력한 내용도 노출되지 않음.
• name : JS로 폼을 제어할 때 사용할 이름을 지정
• action : form 태그 내의 내용을 처리해 줄 서버 프로그램을 지정
• target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함.

자동완성 (autocomplete)

기본적으로 form 태그는 autocomplete가 on이다. 일회성 정보나 보안이 중요한 내용은 속성에서 off를 시켜 꺼주어야 한다.

<form action="" autocomplete="off"> 여러 폼 요소 </form>

form을 묶는 <fieldset>, <legend>

<form action="">
	<fieldset>
		<legend>상품 선택</legend>
    </fieldset>
</form>

<lable>과 <input>의 사용 : 아이디 등

<lable for="user-id">아이디(6자 이상)</label>
<input type="text" id="user-id">

이렇게 설정하면 레이블과 form이 떨어져 있더라도 연결시킬 수 있다.

<Input>

많은 상황에서 form 보단 input을 사용한다. input의 속성값을 보면 용도를 알 수 있다.

• text : 한 줄 짜리 텍스트
• password : 암호
• search : 검색어
• url : url 주소
• email : 이메일 주소
• tel : 전화번호
• checkbox : 2개 이상 선택할 수 있는 체크박스
• radio : 1개만 선택할 수 있는 라디오 버튼
• number : 숫자를 조절할 수 있는 스핀박스
• range : 숫자를 조절할 수 있는 슬라이드 막대
• date : 사용자 지역 기준 날짜(연, 월, 일)
• month : 사용자 지역 기준 날짜(연, 월)
• week : 사용자 지역 기준 날짜(연, 주)
• time 사용자 지역 기준 시간(시, 분, 초, 분할 초)
• datetime : 국제표준시로 설정된 날짜 시간(연, 월, 일, 시, 분, 초, 분할 초)
• datetime-local : 사용자 지역 기준 설정된 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)
• submit : 전송버튼
• reset : 리셋버튼
• image : submit 대신 사용할 이미지
• button : 일반 버튼
• file : 파일 첨부할 수 있는 버튼
• hidden : 사용자에게는 보이지 않지만 서버로 넘겨줄 수 있는 값이 있는 필드

위의 필드는 <input type="text">와 출력 화면이 같지만, 저 필드를 사용해야 검색엔진이 정확히 이해하며 tel과 같은 필드에서는 모바일 기기에서 키보드가 알맞게 바뀌기도 한다.

input 태그의 text와 password 속성

• size : 필드의 길이 조정. 이를 적절히 해야 내가 입력한 글보다 사이즈가 작아 다 안 보이는 문제가 없음.
• value : 버튼 내부에 들어갈 텍스트. password 필드에는 사용하지 않는다.
• maxlength : 최대로 입력할 수 있는 문자 수

input 태그의 checkbox와 radio의 속성

• value : 선택한 체크박스나 라디오가 어떤 것인지 서버에 전송할 때 필요한 값이다. 이 값은 영문이나 숫자만 가능하며 필수다.
• checked : 체크박스와 라디오의 default는 아무것도 체크되지 않은 것인데 기본항목으로 체크하고 싶은 것에 사용한다.

출처 : 웹 표준의 정석 (고경희 저)