목차
<input> 태그의 다양한 속성
1) 입력 커서 표시하기
autofocus 속성
① 페이지 로딩 후 바로 폼 요소 중 원하는 요소에 마우스 커서 표시
② HTML5 이전에는 javascript 문법으로 처리했지만 HTML5에서 autofocus라는 속성으로 간단하게 구현
2) 힌트 표시하기
placeholder 속성
① 사용자가 텍스트를 입력할 때 도움이 되도록 적당한 힌트 내용 표시
3) 읽기 전용 필드 만들기
readonly 속성
① 입력란에 텍스트를 표시하고 사용자가 입력 불가능하도록 만듬
② 읽기 전용으로 만들 때 readonly=“true“, readonly=“readonly“, readonly 로 설정. 기본 값은 false
③ 읽기 전용 해제 시에는 readonly 속성을 삭제하거나 readonly=“false”로 지정
4)필수 필드 지정하기
required 속성
① 필수적으로 입력해야 되는 폼 요소에 required 속성을 지정해 필수 필드로 만듬
② 필수 필드로 지정할 때는 required=“required”, required로 설정.
③ 필수 필드 해제 시에는 required 속성 삭제
5) min, max, step 속성
① min : 필드의 최소 값 지정
② max : 필드의 최대 값 지정
③ step : 증가, 감소할 값의 범위 지정
④ <input> 태그의 type이 date, datetime, datetime-local, month, week, time, number, range일 경우만
사용 가능
6) size, minlength, maxlength 속성
– 텍스트 길이, 최소 길이, 최대 길이 지정
① size : 텍스트 필드와 비밀번호 필드, 검색 필드 등 한 줄짜리 텍스트 필드에서 화면에 몇 글자까지
표출할 지 지정
② minlength : 최소 글자 수 지정
③ maxlength : 최대 글자 수 지정
여러 데이터 나열해 보여 주기
1)드롭다운 목록 만들기
<select>, <optgroup>, <option> 태그
① 사용자가 직접 내용을 입력하지 않고 여러가지 옵션 중 선택할 때 드롭다운 목록 사용
② 드롭다운 목록은 <select>와 <option>를 이용해 표시
③ <select> : 드롭다운 목록의 시작과 끝 표시
④ <option> : 선택항목 추가
⑤ 드롭다운 목록에서 항목을 선택하고 <form>를 submit 하면 선택된 <option> value값이 서버로 전달
⑥ 기본형
<select 속성 = "속성 값">
<option value="값" [속성 = "속성 값"]> 내용1 </option>
<option value="값" [속성 = "속성 값"]> 내용2 </option>
<option value="값" [속성 = "속성 값"]> 내용3 </option>
...
</select>
2) <select>태그의 속성
| 속성 | 설명 |
| size | 화면에 표시될 드롭다운 메뉴의 항목 개수 지정 ※ 크롬 브라우저에서는 지정한 개수보다 1개 더 많이 표시 ex) size=“3” 지정 시 4개의 옵션 표출 |
| multiple | 브라우저 화면에 여러 개의 옵션이 함께 표시되며 ctrl키를 누른 상태로 클릭 시 여러 항목 선택 가능 |
3) <option>태그의 속성
| 속성 | 설명 |
| value | 옵션을 선택했을 때 서버로 전달할 값 지정 |
| selected | 화면에 표시될 때 기본으로 선택되는 옵션 지정 |
4) 옵션끼리 묶기
<optgroup> 태그
① 드롭다운 목록에서 항목들을 몇 가지 그룹으로 묶어서 표출할 때 사용
② 사용할 때 label 속성을 사용해 그룹의 제목 지정
5) <datalist> 태그, <option> 태그
① 텍스트 필드에 선택한 항목이 자동으로 입력되게 할 때 <datalist> 사용
② 텍스트 필드에 자동으로 값이 입력돼야 하므로 <input>과 함께 사용
③ <input> type이 “text”일 경우 대부분의 브라우저에서 지원하지만 number, range, color는 브라우저 별
브라우저 버전별로 지원 여부 다름
④ 기본형
<input type ="text" list = "데이터 목록 id">
<datalist id = "데이터 목록 id">
<option> ........</option>
<option> ........</option>
...
</datalist>
⑤ <option>에서 사용 가능한 속성
| 속성 | 설명 |
| value | 옵션을 선택했을 때 서버로 전달할 값 지정 |
| label | 사용자를 위해 브라우저에 표시할 레이블 지정 따로 지정하지 않으면 value 값을 레이블로 사용 |
6) <textarea> 태그
여러 줄 입력하는 텍스트 영역 만들기
① 한 줄 이상의 문장을 입력할 때 <textarea> 사용
② 게시판의 게시물을 입력하거나 회원가입 양식에서 회원 약관을 표시할 때 주로 사용
③ 기본형 <textarea [속성 = "속성값"]> 내용 </textarea>
④ <textarea>에서 사용 가능한 속성
| 속성 | 설명 |
| name | 다른 폼 요소와 구분하기 위해 이름 지정 |
| color | 텍스트 영역의 가로 너비를 문자 단위로 지정(px 단위) |
| rows | 텍스트 영역의 세로 길이를 줄 단위로 지정 지정한 숫자보다 줄 개수가 많아지면 스크롤이 생김 |
기타 폼 요소
1) 버튼 넣기
<button> 태그
① <button>를 사용해도 <input type=“submit”>, <input type=“reset”>과 동일한 기능의 버튼 추가 가능
② <button>에서 사용가능한 type
| 속성 값 | 설명 |
| submit | 폼을 서버로 전송. <input type=“submit”>과 동일하게 동작. ex) <button type=“submit”>전송하기</button> <button> 생성 시 type의 기본 값. |
| reset | 폼에 입력한 내용 초기화. <input type=“reset”>과 동일하게 동작. ex) <button type=“reset”>다시 쓰기</button> |
| button | 버튼 형태만 만들고 자체 기능은 없음. 후에 javascript에서 onclick이벤트를 등록하여 기능 추가 가능. ex) <button type=“button” onclick=“submit();”>주소 입력</button> |
2) 계산 결과
<output> 태그
① 입력하는 값이 계산 결과라는 것을 브라우저에 전달.
② <output>로 묶인 값은 일반 텍스트가 아니고 계산의 결과 값으로 인식
3) 진행 상태 보여주기
3) 진행 상태 보여주기
<progress> 태그
① 작업 진행 상태를 표시할 때 사용
② 작업 시작을 0, 최종 완료를 최대 값(max)으로 지정하여 진척도를 숫자(value)로 표현
③ <progress>에서 사용 가능한 속성
| 속성 | 설명 |
| value | 작업 진행 상태를 표출하며 부동 소수점으로 표현. 0보다 크거나 같고 max 값보다 작거나 같아야 함. max 값 미지정 시 1.0보다 작아야 함 |
| max | 최종 완료 값을 부동 소수점으로 표현. 0보다 커야 함 |
4) <meter> 태그
값이 차지하는 크기 표시하기
① 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용
② 디스크 사용량이라던지 투표율 같은 지정된 범위 내에서 해당 값이 어느정도 차지하는 지 표현
③ <meter>에서 사용 가능한 속성
| 속성 | 설명 |
| min,max | 범위의 최소 값 최대 값을 지정. 값을 정하지 않으면 최소 값 0, 최대 값 1로 자동 할당 |
| value | 범위 내에서 차지하는 값을 표출 |
| low | 낮다고 생각하는 상하선의 값을 지정 |
| high | 높다고 생각하는 하한선의 값을 지정 |
| optimum | 적당하다고 생각하는 값의 범위 지정 |