서식 양식 만들기.
1) 서식내용을 전송하기 위한 form 요소
속성으로 action과 method를 적용할 수 있다. action은 필드의 내용을 처리하게 될 프로그램의 URI를 입력한다.
method는 전송되는 방식을 정의하는데, get과 post방식이 있다.
get방식은 action에 지정한 URI에 폼의 내용을 '?'로 구분으로 추가하여 전송하며 기본값이 된다. 일반적으로 보안의 문제 때문에 URI에 나타나지 않는 post방식을 흔히 지정한다.
<form action="aaa.php" method="post">
~
</form>
2) 서식의 내용을 그룹화 하는 fieldset요소
서식을 그룹화하려면 fieldset요소를 적용하고 legend요소로 이름을 지정할 수 있으며, fieldset안에 한번만 올 수 있다.
<form action="aaa.php" method="post">
<fieldset>
<legend>서식의 이름</legend>
</fieldset>
</form>
3) 기본적인 서식 컨트롤 input 요소
input은 빈요소이며 type속성으로 다양한 종류의 컨트롤을 생성할 수 있다. label요소로 각 컨트롤의 제목을 입력한다.
컨트롤에는 id를 지정하고 같은 값을 label에 지정하면 명시적인 이름이 지정된다.
<p><label for="userid">아이디</label><input type="text" id="userid" /></p>
<input type="text" /> 한줄 텍스트 입력, 아이디,이름,이메일,주소 등등 다양한 용도로 사용 가능하다
<label for="user_id">아이디</label>
<input type="text" id="user_id" size="10" maxlength="8" title="아이디를 입력하세요" />size="크기" : 몇글자 정도 들어갈 수 있는지의 크기
maxlength="10" : 입력할 수 있는 최대 글자 수
<input type="password" /> 비밀번호 입력필드
<input type="checkbox" /> 복수선택 가능한 체크박스
<p>
<input type="checkbox" id="music" value="music" name="chk1" />
<label for="music">음악</label>
<input type="checkbox" id="movie" value="movie" name="chk2" />
<label for="movie">영화</label>
<input type="checkbox" id="book" value="read" name="chk3" />
<label for="book">독서</label>
</p>value="" : 전송될 값
name="" : 고유의 이름. 중복선택되는 체크박스는 name값이 달라야 함.
<input type="radio" /> 한 개만 선택하는 라디오버튼
<p>
<input type="radio" id="music2" value="music" name="rdo" />
<label for="music2">음악</label>
<input type="radio" id="movie2" value="movie" name="rdo" />
<label for="movie2">영화</label>
<input type="radio" id="book2" value="read" name="rdo" />
<label for="book2">독서</label>
</p>value="" : 전송될 값
name="" : 고유의 이름. 하나만 선택되는 라디오는 name값이 같아야 함.
<input type="submit" /> 전송버튼
<input type="reset" /> 리셋버튼
<input type="button" /> 범용버튼. 스크립트에 임의의 지시를 한다. ISO-HTML 에서는 사용할수 없으며 <button type="button"></button>의 형식으로 지정한다.
<input type="image" src="button.gif" alt="전송" /> 이미지버튼. 전송버튼의 역할을 한다. ISO-HTML 에서는 사용할수 없으며 <button type="submit"><img src="image.gif" alt="전송" /></button>의 형식으로 지정한다.
<input type="file" /> 전송파일 선택필드, 첨부파일
<input type="hidden" /> 감춰진 필드 작성. 화면에는 표시하지 않고 프로그램에 전송하는 데이터를 지정.
4) 여러줄로 된 텍스트필드를 생성하는 인라인요소 textarea요소. cols="폭" rows="줄수" 속성은 필수.
<label for="comm">Comment</label>
<textarea id="comm" cols="30" rows="5" name="comment">코멘트를 입력하세요.</textarea>
5) 여러 항목에서 임의의 항목을 선택하는 select요소. option요소와 함께 쓰인다.
option에 value를 지정하면 그 값이 서버에 전송된다.
<label for="sel">자주 사용하는 브라우저 선택하기</label>
<select id="sel">
<option value="explorer">익스플로러</option>
<option value="firefox">파이어폭스</option>
<option value="safari">사파리</option>
<option value="opera">오페라</option>
<option value="chrome">크롬</option>
</select>
6) 라벨을 부여하는 명시적인 방법과 암묵적인 방법.
명시적 방법
<p>
<label for="user_id">아이디</label>
<input type="text" id="user_id" />
</p>
암묵적 방법
<p>
<label>아이디 <input type="text" /></label>
</p>
일부 브라우저에서 암묵적인 방법은 지원되지 않을 수 있으므로 명시적인 방법을 추천한다.
-----------------------------------------
예제)
<p>*는 필수입력항목입니다.</p>
<fieldset>
<legend>필수 입력 항목</legend>
<p>
<label for="user_id">아이디:</label>
<input type="text" maxlength="16" size="20" id="user_id" title="아이디를 입력하세요." />
</p>
<p>
<label for="user_pass">비밀번호:</label>
<input type="password" id="user_pass" title="비밀번호를 입력하세요." />
</p>
<p>
<label for="user_phone">전화번호:</label>
<input type="text" id="user_phone" title="지역번호를 입력하세요" /> -
<input type="text" title="전화번호 앞자리를 입력하세요" /> -
<input type="text" title="전화번호 뒷자리를 입력하세요" />
</p>
</fieldset>
<fieldset>
<legend>비밀번호 찾는 방법 선택</legend>
<p>
<span>수신방법</span>
<input type="radio" name="receive" id="user_sms" value="sms" checked="checked" />
<label for="user_sms">휴대전화 SMS문자</label> /
<input type="radio" name="receive" id="user_email" value="email" />
<label for="user_email">자주 사용하는 이메일</label>
</p>
<p>
<label for="user_mobile">휴대전화번호:</label>
<select id="user_mobile" title="서비스번호를 선택하세요">
<option value="010">010</option>
<option value="011">011</option>
<option value="016" selected="selected">016</option>
<option value="019">019</option>
</select> -
<input type="text" title="전화번호 앞자리를 입력하세요" /> -
<input type="text" title="전화번호 뒷자리를 입력하세요" />
</p>
</fieldset>
<p>
<input type="submit" value="확인" />
<input type="reset" value="취소" />
</p>
</form>