HTML form control

form control 요소
사용자로부터 데이터를 입력 받아 서버에서 처리하기 위한 용도로 사용
사용자의 요청에 따라 서버는 HTML form을 전달(회원가입양식, 검색 양식 등)
사용자는 HTML form에 적절한 데이터를 입력한 후 서버로 전송. 이를 submit이라 함
서버는 사용자의 요청을 분석한 후 데이터를 등록하거나, 원하는 데이터를 조회하여 결과를 다시 반환

사용자가 입력하기 위한 control 요소들은 모두 <form> tag 하위에 위치해야 서버로 전송됨
각 control 요소마다 텍스트 입력, 버튼 클릭 등 다양한 형식으로 입력을 받는다.

form control 요소 - form
사용자가 입력한 자료들을 어떤 방식으로 서버로 전달할 것인지 결정
서버에서 어떤 프로그램을 이용해 처리할 것인지 결정
<form [속성=”속성값”]> form control </form>

form control 요소 - label
form control 레이블(텍스트)을 연결
사용법
- <label [속성=”속성값”]> 레이블 <input…> </label>
- <label for=”id이름”> <input id=”id이름” [속성=”속성값”]> </label>

form control 요소 - fildset, legend
form 요소를 그룹으로 묶음

사용자 입력을 위한 input
<input> tag는 type 속성에 따라 여러 가지 형태로 화면에 표시
<input type=”유형” [속성=”속성값”]>
id 속성은 여러 번 사용된 폼 요소를 구분하기 위해 사용
id 속성 값은 최소한 한 개 이상의 문자여야 하며 공백은 허용 X
같은 html document에서 id는 하나의 값만 가능하고, name은 중복이 허용된다.

사용자 입력을 위한 input - type 속성

사용자 입력을 위한 input - textfield, password
textfield
- 한 줄의 일반 텍스트를 입력 받는 필드
- <input type=”text” [속성=”속성값”]>

password field
- 비밀번호 입력란
- 내용이 표시되지 않고 ‘*’ 또는 ‘●’으로 표시
- <input type=”password” [속성=”속성값”]>

사용자 입력을 위한 input - search, url, email, tel
type=”search” : 검색 상자 (박스 오른쪽에 x가 있어 텍스트를 쉽게 지울 수 있다.)
type =”url” : 영문자와 마침표(.), 슬래시(/)로만 이루어진 텍스트. [http://로](http://로) 시작하는 사이트 주소 입력
type = “email” : email 형식 체크
type = “tel” : 전화번호 입력

사용자 입력을 위한 input - number, range

사용자 입력을 위한 input - number
사용자가 입력한 내용을 숫자로 인식
직접 숫자를 입력하거나 브라우저에 따라 스핀박스가 표시

사용자가 입력을 위한 input - range
슬라이드 막대를 움직여 숫자 값을 입력

사용자 입력을 위한 input - checkbox, radio
checked 속성은 여러 개의 항목 중 선택된 항목을 표시
radio button은 name 속성의 값이 모두 일치해야 함.
check box는 속성의 값과는 상관없이 다중 선택 가능
<input> tag의 type 속성을 checkbox, radio로 지정

사용자 입력을 위한 input - color
사용자가 색상을 선택할 수 있는 색상표
지원 브라우저 : 파이어폭스, 크롬, 오페라와 안드로이드 브라우저
그 외 브라우저는 텍스트 필드로 표시

사용자 입력을 위한 input - 날짜, 시간
날짜, 시간에서 공통으로 사용할 수 있는 속성
날짜 : <input type="data | month | week" [속성="속성값"]>
시간 : <input type="time | datetime | datetime-local" [속성="속성값"]>

사용자 입력을 위한 input - button
<input type=”submit | reset | button” [value=”버튼라벨”] [속성=”속성값”]>
reset button은 <input> 요소에 입력한 모든 정보를 초기화
submit button은 사용자가 입력한 form의 정보를 서버로 전송
button은 submit이나 reset과 같이 자체 기능은 없고, 스크립트 함수와 연결해 사용

사용자 입력을 위한 input - image button
image + submit
<input type=”image” src=”img path” alt=”대체텍스트” [속성=”속성값”]>

사용자 입력을 위한 input - file
form에 파일 첨부

사용자 입력을 위한 input - 속성

여러 data 나열 - dropdown
<select> tag는 select box(dropdown)를 표시
<option> tag는 select box에 포함될 항목들을 정의
selected 속성은 여러 개의 항목 중 선택된 항목을 표시
value 속성은 각 항목 값을 지정하기 위해 사용

사용자 입력이 아닌 여러 옵션 중에서 선택하는 목록
<optgroup> : dropdown 목록에서 여러 항목들을 몇 가지 그룹으로 묶을 경우
label 속성을 이용하여 그룹의 제목을 지정

여러 data 나열 - datalist
<input>과 함게 사용하며 텍스트필드에 직접 값을 입력하는 것이 아니라 datalist의 선택 값이 텍스트 필드에 입력됨

여러 줄 입력 - textarea
<textarea> tag는 여러 줄을 입력할 수 있는 box를 표시
cols와 rows 속성은 text box의 크기를 지정
<textarea></textarea> tag 사이의 문자열은 text box에 표시
disabled 속성은 화면에 표시는 하되 데이터를 수정할 수 없도록 비활성화 상태로 표시

기타 form control - button
<button> 태그의 type 속성은 버튼이 활성화 되었을 때 어떤 동작을 할지 지정. 기본은 submit
<button [type=”submit | reset | button”]>내용</button>
input과의 차이점은<button> 태그는 contents를 포함할 수 있기 때문에 아이콘을 추가할 수 있고, CSS를 이용하여 원하는 형태로 꾸밀 수 있다.

기타 form control - progress
작업의 진행 상태를 표시
작업의 시작을 0, 최종 완료를 최대값으로 설정
<progress value=”값” [max=”값”></progress>

기타 form control - meter
값이 차지하는 크기 표시
<progress>와 결과 화면은 비슷하지만 차이점은 <progress>는 작업의 진행 상황을 나타내는 반면, <meter>는 전체 크기 중에서 얼만 ㅏ차지하는지를 표현
<meter value=”값” [속성=”속성값”]></meter>