HTML+CSS 기초 강의 - 12. 폼만들기 기초 1 - <form> 태그 기초
폼(양식)은 간단하게는 회원 로그인 화면 부터 회원가입 화면, 뉴스레터 신청 화면, 신청 폼 화면 같은 데서 사용하는 입력, 또는 선택 필드들을 모아 화면을 구성한 것을 말합니다.
아주 간단한 폼의 예를 들어보면
<form> 아이디 <input type="text" name="userid"><br> 패스워드 <input type="password" name="password"><br> <input type="checkbox" name="loginhold" checked >로그인 유지<br> <input type="button" value="로그인"></form>
이렇게 로그인 폼을 만들어서 회원 로그인을 처리할 수 있습니다.
HTML 기본 문서 구조에 위 폼을 붙여서 웹브라우저에서 확인하면 아래처럼 보입니다.
물론 이 폼에는 폼의 실제 동작에 필요한 많은 부분들이 빠져 있습니다.
이제 폼을 구성하는 필드들중 기초적인 것만 확인해보겠습니다.
폼의 껍질라고 할 수 있는 <form></form> 태그쌍 안의
폼을 구성하는 구성요소들은 대부분 <input> 태그를 사용해 만들게 됩니다.
또 폼을 구성하는 구성 요소들은 크게 2가지로 나눌 수 있습니다.
하나는 키보드로 내용을 입력하는 입력 필드이고
다른 하나는 키보드, 또는 마우스로 선택할 수 있는 항목을 하나 이상 선택하는 선택 요소들입니다.
입력필드는
text, textarea가 있습니다.
text는 <input type="text"> 로 <input> 태그를 사용해 구현하지만
textarea는 <textarea></textarea> 와 같이 별도 태그를 사용합니다.
예를들어
<input type="text" name="userid" value="" placeholder="아이디입력"><textarea rows="3" cols="80" maxlength="255" placeholder="질문내용입력"></textarea>
선택요소에는 체크박스, 라디오박스, 드롭다운리스트가 있습니다.
체크박스는 input 요소를 사용해 <input type="checkbox"> 처럼 사용합니다.
체크박스는 여러개의 항목중에서 1개이상을 체크해서 선택하는 선택 요소입니다.
따라서 input 태그의 속성을 사용해 체크박스들을 그룹화하고, 기본으로 선택된 요소(들)을 지정할 수 있습니다.
예를들어
<label>취미</label><input type="checkbox" name="hobby" value="낚시" checked><input type="checkbox" name="hobby" value="독서"><input type="checkbox" name="hobby" value="운동" checked>
이런식으로 체크박스(들)을 구성할 수 있습니다.
이름(name) 속성이 같은 체크박스들은 하나의 그룹으로 묶여서 폼을 전송할 때 체크한 값들만 전송됩니다.
체크박스의 값(value)은 중복되지 않는게 원칙이지만 실제로는 중복되어도 상관없습니다.
같은 항목이 2개 있는 체크박스 선택이 될 뿐입니다.
<label></label> 태그는 라벨입니다. 입력필드와 세트로 묶거나 단독으로 텍스트 내용을 표시하는 용도로만 사용하는 폼 필드입니다.
라디오박스는 input 요소를 사용해 <input type="radio"> 처럼 사용합니다.
라디오박스는 여러개의 항목중에서 1개 항목만 선택할 수 있는 선택 요소입니다.
체크박스와 마찬가지로 input 태그의 name 속성을 사용해 라디오박스들을 그룹화하고, 기본으로 선택된 요소(들)을 지정할 수도 있습니다.
예를들어
<label>취미</label><input type="radio" name="hobby" value="낚시"><input type="radio" name="hobby" value="독서" checked><input type="radio" name="hobby" value="운동">
이런식으로 라디오박스(들)을 구성할 수 있습니다.
이름(name) 속성이 같은 라디오박스들은 하나의 그룹으로 묶여서 폼을 전송할 때 체크한 값 하나만 전송됩니다.
같은 이름으로 묶인 라디오 박스들은 항목들 중 1개만 선택이 가능하게 자동으로 묶이게 됩니다.
checked 인가 checked="checked" 인가?
HTML4 일때는 SGML이나 XHTML 등의 영향 때문에 말이 많았던 속성입니다.
checked 만 쓰면 체크된 것으로 많은 웹브라우저에서 인식되지만, XHTML에 따른 규격에는 checked="checked" 가 표준이었기 때문에 checked="checked" 를 쓰라고 권장했습니다.
다 잊고 HTML5 에서는 checked 만 쓰면 됩니다.
대부분 브라우저에서 HTML4 호환성을 제공하기 때문에 checked="checked"를 써도 되지만, HTML5 규격에서는 checked 속성이 존재하면 true, 존재하지 않으면 false 가 되는 불리언(Boolean) 타입으로 정의되어 있습니다.
checked 만 쓰면 체크박스나 라디오박스에서는 체크된 것으로 표시됩니다.
드롭다운리스트는 목록으로된 항목들 중 하나 이상을 선택하는 목록현 선택 요소로
별도의 태그인 <select></select> 태그로 정의합니다.
간단한 예를 들어보면
<label>승용차</label><select name="cars"> <option value="쏘나타">Sonata</option> <option value="아반떼">Avante</option> <option value="그렌져">Grandeur</option>
이렇게 작성합니다.
<select></select> 태그는 각 드롭다운리스트 항목을 정의하는 <option></option> 태그들을 감싸 하나로 묶는 껍질 역할을 합니다.
<option></option> 태그는 시작 태그와 끝 태그 사이에 화면에 표시되는 항목 이름을 입력하고, 폼이 전송될 때 선택한 값
드롭다운 리스트는 폼을 전송할 때 기본적으로 라디오박스 처럼 선택한 1개의 값만 전송합니다.
<select multiple></select> 이렇게 드롭다운 리스트에 속성으로 "multiple"을 주어 정의하면 드롭다운 리스트에서 여러개의(1개 이상) 항목을 선택할 수 있습니다.
태그 속성들에 대해서는 나중에 배우게 되므로 여기서는 일단 알고만 넘어갑니다.