[HTML] FORM

 

 

<form> : 폼 만들기

속성	설명
method	사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정
	get - 주소 표시줄에 사용자가 입력한 내용이 그래도 드러남
	post - 사용자가 입력한 내용이 드러나지 않음
name	폼 이름 지정
action	서버 상의 프로그램 지어
target	지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
autocomplete	자동완성 기능

 

<label> : 폼 요소에 레이블 붙히기

 

<fieldset>, <legend> : 폼 요소 그룹으로 묶기

- <fieldset> : <fieldset>와 </fieldset> 사이의 폼들을 하나의 영역으로 묶고 외각선을 그려줌

- <legend> : <fieldset>로 묶은 그룹에 제목을 붙여 줌

 

<input> : 입력 항목

- type 속성

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

- autofocus 속성 : 입력 커서 표시

- placeholder 속성 : 힌트 표시

- readonly 속성 : 읽기 전용 필드

- required 속성 : 필수 필드 지정

- 숫자의 조건 지정

  - min, max 속성 : 최솟값과 최댓값 지정

  - step 속성 : 허용된 범위 내의 숫자의 일정한 간격을 가리킴

- 텍스트 길이 조건 지정

  - size 속성 : 화면에 표시하는 텍스트의 길이 

  - minlength, maxlength 속성 : 입력하는 텍스트의 최소 길이, 최대 길이

 

<select> + <optgroup> + <option> : 드롭다운 목록

<select id=" ">
  <option value="값">  </option>
  <option value="값">  </option>
  <option value="값">  </option>
</select>

- <optgroup> : 드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우

 

<datalist> : 데이터 목록중에서 값을 선택하도록 만들 수 있음

 

<textarea> : 여러 줄 입력하는 텍스트 영역

- col 속성 : 가로 너비를 문자 단위로 지정

- rows 속성 : 세로 길이를 줄 단위로 지정

                  지정한 숫자보다 줄 개수가 많이지면 스크롤 막대가 생김

 

<button> : 버튼

- submit 속성 : 폼을 서버로 전송

- reset 속성 : 폼에 입력한 모든 내용을 초기화

 

<output> : 계산 결과를 보여줌

 

<progress> : 작업 진행 상태 보여줌

- value 속성 : 작업 진행 상태를 나타냄

- max 속성 : 작업이 완료되면 얼마나 많은 직업을 해야 하는지 나타냄 

 

<meter> : 값이 차지하는 크기 표시

- 전체 크기 중에 얼마나 차지하는지를 표현할 때 사용

- min, max 속성 : 범위의 최솟값과 최댓값 (defualt : 0과 1)

- value 속성 : 범위 내에서 차지하는 값

- low / high / optimum 속성 : '이 정도명 낮다 / 높다 / 적당하다'라고 할 정도의 값 지정