[HTML] HTML 구성 요소 - Form control

Form control 요소

• 사용자로부터 데이터를 입력 받아 서버에서 처리하기 위한 용도로 사용
• 사용자는 요청에 따라 서버는 HTML form을 전달 (회원가입 양식, 검색 양식 등)
• 사용자는 HTML form에 적절한 데이터를 입력한 수 서버로 전송
• 서버는 사용자의 요청을 분석한 후 데이터를 등록하거나, 원하는 데이터를 조회하여 결과를 다시 반환
• 사용자가 입력하기 위한 control 요소들은 모두 <form> tag 하위에 위치해야 서버로 전송됨
• 각 control 요소마다 텍스트 입력, 버튼 클릭 등 다양한 형식으로 입력을 받음

form

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

label

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

input

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

type	설명
text	한 줄의 텍스트를 입력할 수 있는 텍스트 상자
password	비밀번호를 입력할 수 있는 필드
search	검색 상자
tel	전화번호를 입력할 수 있는 필드
url	URL 주소를 입력할 수 있는 필드
email	메일 주소를 입력할 수 있는 필드
datetime	국제 표준시(UTC)로 설정된 날짜와 시간 (년, 월, 일, 시, 분, 초, 분할초)
datetime-local	사용자 지역을 기준으로 날짜와 시간 (년, 월, 일, 시, 분, 초, 분할초)
date	사용자 지역을 기준으로 날짜 (년, 월, 일)
month	사용자 지역을 기준으로 날짜 (년, 월)
week	사용자 지역을 기준으로 날짜 (년, 주)
time	사용자 지역을 기준으로 시간 (시, 분, 초, 분할 초)
number	숫자를 조절할 수 있는 화살표
range	숫자를 조절할 수 있는 슬라이드 막대
color	색상 표
checkbox	주어진 항목에서 2개 이상 선택 가능한 체크박스 (다중 선택)
radio	주어진 항목에서 1개만 선택할 수 있는 라디오 버튼 (단일 선택)
file	파일을 첨부할 수 있는 버튼
submit	서버 전송 버튼
image	submit + image
reset	리셋 버튼
button	기능이 없는 버튼
hidden	사용자에게는 보이지 않지만 서버로 넘겨지는 값을 설정

textfield

• 한 줄의 일반 텍스트를 입력 받는 필드
• <input type=”text” [속성=”속성값”]
  

  속성	설명
  name	textfield를 구별할 수 있도록 이름을 정함
  size	textfield의 길이를 지정 화면에 몇 글자가 보이도록 할 것인지를 지정
  value	textfield가 화면에 보일 때 textfield 부분에 표시 될 내용
  maxlength	textfield에 입력할 수 있는 최대 문자수를 지정

search

• 검색 상자 (박스 오른쪽에 x가 있어 텍스트를 쉽게 지울 수 있음

url

• 영문자, 마침표(.), 슬래시(/)로만 이루어진 텍스트
• http://로 시작하는 사이트 주소 입력

email

• email 형식 체크

tel

• 전화번호 입력

number, range

속성	속성 설명
min	필드에 입력할 수 있는 최소값을 지정. type=”range”일 때 기본 최소값은 0
max	필드에 입력할 수 있는 최대값을 지정. type=”range”일 때 기본 최대값은 100
step	짝수나 홀수 등 특정 숫자로 제한하려할 때 숫자 간격을 지정. 기본값은 1
value	페이지 로딩 시 필드에 표시할 초기값

number

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

range

• 슬라이드 막대를 움직여 숫자 값을 입력

checkbox, radio

• checked 속성을 통해 여러 개의 항목 중 선택된 항목을 표시
• radio button은 name 속성의 값이 모두 일치해야 함 (name 속성이 같은 항목들 중 단일 선택)
• check box는 name 속성의 값과는 상관 없이 다중 선택이 가능

color

• 사용자가 색상을 선택할 수 있는 색상표

날짜, 시간

• date / month / week / time / datetime / datetime-local 등을 type으로 지정
  

  속성	속성 설명
  min	날짜나 시간의 최소값을 지정
  max	날짜나 시간의 최대값을 지정
  step	스핀 박스의 화살표를 누를 때마다 날짜나 시간을 얼마나 조절할지 지정
  value	화면에 표시할 초기값 지정

button

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

image button

• image + submit의 역할
• <input type=”image” src=”img path” alt=”대체 텍스트” [속성=”속성값”]>

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

속성	설명
autofocus	페이지 로딩 후 폼의 요소 중에서 해당 요소에 마우스 커서를 표시
placeholder	텍스트를 입력할 때 도움이 되도록 입력란에 적당한 힌트 내용을 표시
readonly	입력란에 텍스트를 사용자가 직접 입력하지 못하게 읽기 전용으로 지정
required	form에 data를 입력한 후 submit 클릭 시 data를 서버로 전송하기 전 필수 입력 항목을 체크
min, max, step	min, max는 해당 필드의 최대, 최소값 지정 step은 일정 간격 지정
size, minlength, maxlength	minlength, maxlength는 텍스트 입력 시 최대, 최소길이 지정 size는 화면에 보여지는 글자의 길이 지정
height, width	type=”image”일 때 이미지의 너비와 높이를 지정
list	<datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나열해 보여줌
multiple	type=”email”이나 type=”file”일 때 두 개 이상의 값을 입력

dropdown

• <select> tag는 select box(dropdown)를 표시
• <option> tag는 select box에 포함될 항목들을 정의
• selected 속성은 여러 개의 항목 중 선택된 항목을 표시

  속성	설명
  size	화면에 표시될 dropdown 메뉴의 항목 개수 지정
  multiple	브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 다중 선택

• value 속성은 각 항목 값을 지정하기 위해 사용

  속성	설명
  value	옵션을 선택했을 때 서버로 넘겨질 값을 지정
  selected	화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정

• <optgroup> : dropdown 목록에서 여러 항목들을 몇 가지 그룹으로 묶을 경우
  • label 속성을 이용하여 그룹의 제목을 설정

datalist

• <input>과 함께 사용하며 텍스트필드에 직접 값을 입력하는 것이 아니라 datalist의 선택 값이 텍스트 필드에 입력됨

속성	설명
value	사용자가 레이블을 선택했을 때 서버로 넘겨질 값 지정
label	사용자를 위해 브라우저에 표시할 레이블. 따로 지정하지 않을 경우, value값을 레이블로 사용

textarea

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

button

• <button> 태그의 type 속성은 버튼이 활성화 되었을 때 어떤 동작을 할지 지정
• input과의 차이점은 <button> 태그는 contents를 포함할 수 있기 때문에 아이콘을 추가할 수 있고, CSS를 이용하여 원하는 형태로 꾸밀 수 있음

progress

• 작업의 진행 상태를 표시
• 작업의 시작을 0, 최종 완료를 최대값으로 설정

  속성	속성 설명
  value	작업 진행 상태를 나타내며 부동 소수점으로 표현 0보다 크거나 같고 max 값보다는 작아야 한다.
  max	작업이 완료되려면 얼마나 많은 작업을 해야하는지 부동 소수점으로 표현 0보다 커야한다

meter

• 값이 차지하는 크기 표시
• <progress>와 결과 화면은 비슷하지만 차이점은 <progress>는 작업의 진행 상황을 나타내는 반면, <meter>는 전체 크기 중에서 얼마나 차지하는지를 표현
  

  속성	속성 설명
  min, max	범위의 최소값과 최대값을 지정. 값을 정하지 않으면 0과 1로 지정
  value	범위 내에서 차지하는 값
  low	“이 정도면 낮다.” 라고 할 정도의 값을 지정
  high	"이 정도면 높다.” 할 정도의 값을 지정
  optimum	“이정도면 적당하다.” 라고 할 정도의 값을 지정