Do it! HTML5 + CSS3 웹표준의 정석을 공부하고 요약 정리하는 글
form 태그의 속성
method=”get/post” : 사용자가 입력한 값을 서버로 어떻게 넘겨줄지 지정
name=” ” : 폼의 이름을 지정
action=” ” : 사용자 입력값을 처리해 줄 프로그램 지정(ex.login.php)
autocomplete=”off” : 자동완성 기능이 기본적으로 on되어있음
form요소에 label 붙이기
1.for=”id”를 이용해 label과 form 요소 연결하기
<label for=”user_id”>아이디</label> <input type=”text” id=”user_id”>
2.radio button과 check box에서 label 사용하기(선택범위가 넓어짐)
<label><input type=”radio” name=”subject” value=”1″>영어<label>
<label><input type=”radio” name=”subject” value=”0″>수학<label>
form요소 그룹 묶기<fieldset>, <legend>
<form>
<fieldset>
<legend> 그룹 제목 </legend>
</fieldset>
</form>
사용자 입력을 위한 <input>태그
(type 종류 : hidden, text, search, tel, url, email, password, datetime, datetime-local, date, month, week, time, number, range, color, checkbox, radio, file, submit, image, reset, button)
type=”number” : 숫자 입력하기
<label for=”order”>주문개수</label>
<input type=”number” id=”order” min=”1″ max=”5″ value=”1″>
type=”range” : 범위 지정하기
<label for=”level”>선택 단계</label>
<input type=”range” id=”level” min=”1″ max=”3″ value=”1″>
type=”submit / reset” : 서버 전송, 리셋 버튼 넣기
<input type=”submit/reset” value=”전송/다시입력”>
type=”image” : submit 버튼 대신 이미지 전송 버튼 넣기
<input type=”image” id=”button” src=”images/login.jpg” alt=”login”>
<input type=”button” value=”새 탭 열기” onclick=”window.open()”>
type=”file” : 파일 첨부하기
<label>파일첨부<input type=file”><label>
<input> 태그의 다양한 속성
autofocus : 페이지를 불러오면 원하는 요소에 마우스 커서 표시 가능
placeholder=”hint” : 입력할 값 힌트 표시
readonly : 읽기 전용 필드
required : 필수 필드
size/minlength/maxlength=”n” : 길이, 최소 입력값, 최대 입력값 속성
드롭다운 목록 만들기 <select><option>
<label for=”class”>학과</label>
<select size=”5″ id=”class” multiple> //여러옵션 선택
<option value=”archi”>건축공학과</option>
<option value=”jounar”>신문방송학과</option>
</select>