TIL #6 - HTML 폼

Sarang Lee·2020년 12월 26일

html

HTML

목록 보기

4/6

폼 (form)

1. 폼 만들기

`<form>` 태그

<form [속성="속성 값"]> 여러 폼 요소 </form>

method - 사용자가 입력한 내용을 서버로 어떻게 넘겨줄지 지정
- get - 주소 표시줄에 사용자가 입력한 내용 그대로 노출. 데이터 허용 용량 : 256byte~4096byte
- post - 주로 사용하는 방식. 표준 입력(standard input)으로 넘겨 길이 제한 없음. 입력한 내용 드러나지 않음
name - 폼 이름 지정. 여러 개의 폼 구분하기 위해 사용
action - <form> 태그 안의 내용 처리해줄 프로그램 지정
target - <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
autocomplete - 기본값 "on". 개인 정보나 인증번호처럼 한번 쓰고 마는 경우 꺼야 함
- on / off

검색창 예제

<form action="search.php" method="post">
	<input type="text" title="검색">
	<input type="submit" value="검색">
</form>

`<label>` 태그 - 폼 요소 레이블

<label [속성="속성 값"] > 레이블 <input [속성="속성 값"]> </label>

<label for="id이름"> 레이블 </label>
<input id="id 이름" [속성="속성 값"]>

라디오 버튼, 체크박스에서도 사용됨
- 버튼/박스 부분 뿐만 아니라 텍스트 클릭 시에도 입력되도록 하려면 <label> 태그로 레이블해야함. 예제 p.138

`<fieldset>`, `<legend>` 태그 - 폼 요소 그룹

<form>
	<fieldset [속성="속성 값"]>
		<legend> 제목 </legend>
		...
	</fieldset>
	<fieldset [속성="속성 값"]>
		<legend>제목 </legend>
		...
	</fieldset>
</form>

<fieldset> 태그로 묶이면 외곽선이 나타남
<legend> 태그는 fieldset의 제목

2. `<input>` 태그 유형

<input type="유형" [속성="속성 값"]>

내용을 입력하는 부분과 입력한 부분을 보내는 버튼으로 나뉨

type 속성의 속성 값 - input 종류

hidden - 보이지 않지만 서버로 넘겨지는 값

<input type="hidden" name="이름" value="서버로 넘길 값">
image - 이미지 버튼

<input type="image" src="" alt="">
- submit 버튼과 동일
color - 색상 선택 상자

<input type="color" value="#000">
- 16진수로만 표시
- 브라우저마다 가능 여부 다름
file - 파일 첨부
<label> 첨부파일 <input type="file"></label>
button - 버튼
- 자체 기능 없음. 스크립트 함수 등을 연결해 사용
- onclick 속성 등을 이용해 기능
  - window.open() - 새 탭 열기
  - window.close() - 닫기
텍스트
- text - 한 줄짜리 텍스트
  - 함께 사용할 수 있는 속성
    - name - 텍스트 필드 구분을 위한 이름
    - size - 필드 길이 지정
    - value - 필드 부분에 표시될 내용
    - maxlength - 최대 문자 개수
- password - 비밀번호
  - 입력 시 . 또는 *으로 노출
정보
- search - 검색 상자
  - 텍스트 상자와 동일하나 검색어 입력 시 오른쪽에 x 표시로 나와 지울 수 있음
- tel - 전화번호
- url - 웹 주소
  - "http://" 로 시작해야함
- email - 이메일
숫자
- number - 숫자 조절 화살표
- range - 숫자 조절 슬라이드 막대, 브라우저마다 다르게 나타남
  - 함께 사용할 수 있는 속성
    - min - 기본 값 0
    - max - 기본 값 100
    - step - 기본 값 1
    - value - 필드에 표시할 초기값
선택
- checkbox - 여러 항목 선택 가능한 체크박스
- radio - 하나만 선택 가능한 라디오 버튼
- 함께 사용할 수 있는 속성
  - name - 같은 그룹의 라디오 버튼은 name 속성 값 똑같이 만들어야 함
  - value - 서버로 넘길 값 지정. 영문 혹은 숫자. 필수 속성
  - checked - 기본으로 선택해 놓을 항목이 있을 경우 사용
날짜
- date - 사용자 지역 기준 날짜 (tttt-mm-dd)
  - 브라우저별로 다른 형태로 표시
- month - 사용자 지역 기준 날짜 (yyyy-mm)
- week - 사용자 지역 기준 날짜 (yyyy-W00)
시간 (https://html.spec.whatwg.org/#dates-and-times)
- time - 사용자 지역 기준 시간 (시, 분, 초, 분할 초)
- datetime - UTC 날짜와 시간 (연,월, 일, 시, 분, 초, 분할 초)
  - 시간대를 뒤에 표시해야함. UTC 기준일 경우 Z로 표시
  - +dd:dd나 -dd:dd로 시간 차이 직접 입력 가능
- datetime-local - 사용자 지역 기준 날짜와 시간 (연,월, 일, 시, 분, 초, 분할 초)
- 함께 사용할 수 있는 속성
  - min - 날짜나 시간 최솟값
  - max - 날짜나 시간 최댓값
  - step - 스핀 박스의 화살표 클릭 시 얼마나 조절할지 지정
  - value - 화면에 표시할 초기값 지정
    <input type="time" value="09:00" ...>
    <input type="datetime-local" value="2020-01-01T09:00" ...>
    - time - 00:00부터 23:59
    - datetime | datetime-local - 날짜 다음에 키워드 T를 쓰고 24시간제로 시간 지정
서버 전송, 리셋 버튼
- submit - 서버 전송 버튼
- reset - 리셋 버튼
- value 속성으로 버튼 내용 입력

3. `<input>` 태그의 다양한 속성

autofocus 속성

원하는 요소에 입력 커서 표시

placeholder 속성

input 안에 보여지는 텍스트 힌트

readonly 속성

입력이 불가능한 읽기 전용 필드
readonly = readonly="true" = readonly="readonly"

required 속성

필수 필드 지정 (boolean 값)
required="required" = required
미입력 시 브라우저별로 다른 경고창이 나타남

max, min, step 속성

최솟값, 최댓값, 단위
type 속성이 datetime, datetime-local, month, week, time, number, range일 경우에만 사용 가능

size, minlength, maxlength 속성

텍스트와 필드 길이 조정
minlength의 경우 현재 안드로이드와 최신 크롬 브라우저에서만 지원

기타 속성

formaction
- 실행 프로그램 연결 (type="submit | image")
formenctype
- 서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할지 지정 (type="submit | image")
formmethod
- 서버로 폼을 전송하는 방식(get, post 등) 지정
- 이미 <form> 태그 안에서 지정한 방식 있어도 무시됨
formnovalidate
- <form> 태그 안에 novalidate라는 속성은 서버로 전송할 때 폼 데이터가 유효한지 여부를 표시할 수 있는데 input에서도 해당 속성을 이용해 유효성 여부를 표시할 수 있음
formtarget
- 폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타깃을 지정
height, width
이미지 너비와 높이 지정 (type="image")
list
- <datalist>에 미리 정의해놓은 옵션 값을 나열해 보여줌
multiple
- 두개 이상의 값을 입력 (type="email | file")
- 태그 안에 속성 이름만 표시하면 됨

4. 여러 데이터 나열

`<select>`, `<optgroup>`, `<option>` 태그 - 드롭다운

<select 속성="값">
	<option value="값" [속성="값"]> 내용1 </option>
	<option value="값" [속성="값"]> 내용2 </option>
	<option value="값" [속성="값"]> 내용3 </option>
    ...
</select>

<select> 태그의 속성
- size - 화면에 표시될 메뉴 항목 개수 (크롬의 경우 지정한 갯수+1개가 표시됨)
- multiple - 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl을 누를 상태로 드롭다운 메뉴에 있는 여러 항목 선택 가능
<option> 태그의 속성
- value - 서버로 넘겨질 값 지정
- selected - 기본을 선택되는 옵션 지정
<optgroup> 태그
- option 여러 개를 그룹을 묶을 경우 사용
- label 속성을 이용해 제목을 붙여야 함

<select>
	<optgroup label="">
		<option ...>...</option>
		<option ...>...</option>
	</optgroup>
	<optgroup label="">
		<option ...>...</option>
		<option ...>...</option>
	</optgroup>
</select>

`<datalist>`, `<option>` 태그

<input type="text" list="데이터 목록 id">
	<datalist id="데이터 목록 id">
		<option> ... </option>
		<option> ... </option>
		...
	</datalist>

<select> 태그 대신 <datalist> 를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있음
텍스트 필드와 함께 사용하기 때문에 <input> 태그와 함께 사용됨
number, range, color 필드는 브라우저나 버전에 따라 지원하지 않을 수 있음
<option> 태그 속성
- value - 레이블 선택 시 서버로 넘겨질 값
- label - 브라우저에 표시할 레이블. 따로 지정하지 않을 경우 value 값을 레이블로 사용

`<textarea>` 태그

<textarea cols="40" row="3"></textarea>

메모 등을 입력하는 텍스트 창
속성
- name - 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름 지정
- cols - 가로 너비 문자 단위로 지정
- rows - 세로 길이 줄 단위로 지정

5. 기타 폼 요소

`<button>` 태그 - 버튼 넣기

<button> 태그의 type 속성은 버튼이 활성화 되었을 때 어떤 동작을 할지 지정
type 속성 값
- submit - 전송
- reset - 폼 내용 초기화
- button - 버튼 형태. 기능 없음
input과의 차이점
- 화면 낭독기로 버튼이 있다는 것을 정확히 전달할 수 있다는 것
- 콘텐츠 포함 가능. 아이콘을 추가하거나 CSS를 이용해 원하는 형태로 꾸밀 수 있음
  - <img> 태그로 아이콘 이미지 삽입
  - 마우스 오버 시 스타일 전환 가능
  - 태그와 CSS만으로 만들었기 때문에 input으로 이미지 넣을 때보다 서버에서 훨씬 빨리 읽어옴

`<output>` 태그 - 계산 결과

입력하는 값이 계산 결과라는 것을 브라우저에게 알려줌 p.178

예제

<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
	<input type="number" name="num1" value="0">
	+<input type="number" name="num2" value="0">
	=<output name="result" for="num"></output>
</form>

`<progress>` 태그 - 진행 상태 보여주기

자바스크립트 이용 시 막대가 움직여 애니메이션처럼 보이게 가능함
속성
- value - 작업 진행 상태를 나타냄. 부동 소수점으로 표현.
  0보다 크거나 같고 max 보다 작거나 같아야 함. max값이 지정되지 않았다면 1.0보다 작아야 함
- max - 작업이 완료되려면 얼마나 많은 작업을 해야하는지 부동 소수점으로 표현. 0보다 커야함

`<meter>` 태그 - 값이 차지하는 크기 표시

전체 크기 중 얼마나 차지하는지를 표현할 때 사용
속성
- min, max - 최솟값과 최댓값. 기본 0과 1
- value - 범위에서 차지하는 값
- low - 낮은 범위의 값 지정
- high - 높은 범위의 값 지정
- optimum - 중간 범위의 값 지정.
  optimum 값이 high 값보다 크다면 value 값이 클수록 좋고, optimum 값이 low 값보다 작다면 value 값이 작을수록 좋음.

출처 : Do it! HTML5+CSS3 웹 표준의 정석

Sarang Lee

UX에 관심 많은 개발 초보 Front-end Developer

이전 포스트

TIL #5 - HTML 이미지, 링크

다음 포스트

TIL #6 - HTML 폼

HTML

폼 (form)

1. 폼 만들기

`<form>` 태그

`<label>` 태그 - 폼 요소 레이블

`<fieldset>`, `<legend>` 태그 - 폼 요소 그룹

2. `<input>` 태그 유형

type 속성의 속성 값 - input 종류

3. `<input>` 태그의 다양한 속성

autofocus 속성

placeholder 속성

readonly 속성

required 속성

max, min, step 속성

size, minlength, maxlength 속성

기타 속성

4. 여러 데이터 나열

`<select>`, `<optgroup>`, `<option>` 태그 - 드롭다운

`<datalist>`, `<option>` 태그

`<textarea>` 태그

5. 기타 폼 요소

`<button>` 태그 - 버튼 넣기

`<output>` 태그 - 계산 결과

`<progress>` 태그 - 진행 상태 보여주기

`<meter>` 태그 - 값이 차지하는 크기 표시

TIL #5 - HTML 이미지, 링크

TIL #7 - HTML&CSS

0개의 댓글

TIL #6 - HTML 폼

HTML

폼 (form)

1. 폼 만들기

<form> 태그

<label> 태그 - 폼 요소 레이블

<fieldset>, <legend> 태그 - 폼 요소 그룹

2. <input> 태그 유형

type 속성의 속성 값 - input 종류

3. <input> 태그의 다양한 속성

autofocus 속성

placeholder 속성

readonly 속성

required 속성

max, min, step 속성

size, minlength, maxlength 속성

기타 속성

4. 여러 데이터 나열

<select>, <optgroup>, <option> 태그 - 드롭다운

<datalist>, <option> 태그

<textarea> 태그

5. 기타 폼 요소

<button> 태그 - 버튼 넣기

<output> 태그 - 계산 결과

<progress> 태그 - 진행 상태 보여주기

<meter> 태그 - 값이 차지하는 크기 표시

TIL #5 - HTML 이미지, 링크

TIL #7 - HTML&CSS

0개의 댓글

`<form>` 태그

`<label>` 태그 - 폼 요소 레이블

`<fieldset>`, `<legend>` 태그 - 폼 요소 그룹

2. `<input>` 태그 유형

3. `<input>` 태그의 다양한 속성

`<select>`, `<optgroup>`, `<option>` 태그 - 드롭다운

`<datalist>`, `<option>` 태그

`<textarea>` 태그

`<button>` 태그 - 버튼 넣기

`<output>` 태그 - 계산 결과

`<progress>` 태그 - 진행 상태 보여주기

`<meter>` 태그 - 값이 차지하는 크기 표시