HTML 입력 태그, 양식 (7)

1. <form> 태그

-> 사용자로 부터 다양한 형태의 데이터를 입력받기 위해 필요한 입력 요소들을 담는 컨테이너

 

★ <input>, <textarea>, <select>등의 입력 요소 태그는 모두 <form> 안에서 사용되어야 함

 

- 결과 화면에서는 아무것도 표시되지 않음

 

속성 명	표현 형태			속성 역할	특이사항
action	action="URL"			데이터를 전달받아 처리할 페이지의  URL을 지정
method	method="전송방식"			데이터 전송에 사용하는 HTTP 방법을 지정	get 또는 post로 동작
name	name="이름"			이름
accept-charset	accept-charset="방식"			문자 인코딩 방식
autocomplete	autocomplete			자동 완성 기능
enctype	enctype="방식"			데이터 인코딩 방식	method="post" 일때만 사용
novalidate	novalidate			데이터의 유효성 검사하지 않음
target	target			처리 결과를 보여줄 창

 

 

 

2. <input> 태그

 

-> 사용자가 데이터를 입력할 수 있는 입력 타입을 지정

 

<input> 주요 속성 (다른 속성값이 더 존재함)

속성 명	표현 형태			속성 역할	특이사항
type	<input type=" 입력타입" 속성="값" ~ >			다양한 입력 타입을 지정	종료태그 X
button	<button type="button | submit | reset" name="이름" value="초기값">			버튼에 대한 상세 설정	type 에서도 button 선언이 가능함 -> 이 경우 일반 버튼 출력
pattern	ex) 영문이름 -> [a-zA-Z]{4,10}			입력값에 대한 유효성 검사를 위한 정규 표현식 지정

 

 

<type> 주요 속성

속성 명	표현 형태			속성 역할	특이사항
text	<input type="text" ~>			한줄짜리 짧은 텍스트 입력
password	<input type="password" ~>			비밀번호 입력
radio	<input type="radio" ~>			나열된 여러 항목 중 오직 1개의 항목만을 선택 하는 옵션	name(이름) value(텍스트) checked (초기값) 속성을 사용
checkbox	<input type="checkbox" ~>			나열된 여러 항목 중 여러 항목을 선택 하는 옵션
submit	<input type="submit" ~>			사용자가 입력한 데이터를 <form> action 속성에서 지정한 서버의 페이지로 전송	value(버튼명)
reset	<input type="reset" ~>			입력한 내용을 모두 지워서 초기화	value(버튼명)
file	<input type="file" ~>			자신의 시스템에 있는 파일을 선택하는 버튼을 생성	accept (파일 유형) multiple (다중 선택)
image	<input type="image" ~>			이미지를 submit(제출) 버튼으로 만들때 사용	src(경로)필수
button	<input type="button" ~>			클릭을 통해 사용자가 지시한 명령을 수행하기 위한 일반 버튼	value(버튼명)
search	<input type="search" ~>			검색어 입력	입력 형식을 명확히 지정
tel	<input type="tel" ~>			전화번호 입력
url	<input type="url" ~>			URL 입력	형식에 맞지 않으면 경고 메시지 출력
email	<input type="email" ~>			email 입력 (multiple)
number	<input type="number" ~>			특정 범위의 숫자 입력	min(최소) max(최대) step (유효간격) value(초기값)
range	<input type="range" ~>			특정 범위의 숫자 입력
date	<input type="date" ~>			년, 월, 일 입력	시간 관련 입력 속성 모두 달력 형태로 입력을 받게 됨
month	<input type="month" ~>			년, 월 입력
week	<input type="week" ~>			년, 주차 입력
time	<input type="time" ~>			시간(시, 분, 초) 입력
datetime-local	<input type="datetime-local" ~>			지역 시간대를 기준으로 년, 월, 일, 시간 입력
color	<input type="color" ~>			색상표를 통한 색상 입력

 

 

 

 

3. <textarea>, <select>, <datalist>, <optgroup> ~ 태그

 

3. (1) <textarea> 태그

-> 여러 줄에 해당하는 텍스트를 입력받을 때 사용

<input type="text" ~> 와 비슷하나,

input type="text"는 한 줄만 입력이 가능하고

<textarea> 태그는 여러 줄을 입력할 수 있다는 차이가 있다.

 

<h3>textarea 태그</h3>
<form>
<textarea name="textarea1" 
rows="3" cols="30" autofocus>
여러줄의 텍스트를 입력가능합니다.
영역의 크기를 미리 지정해야 합니다.
3가지의 속성이 존재합니다.
</textarea><br/><br/>
<input type="submit">
</form>

 

 

속성 명	표현 형태			속성 역할	특이사항
name	name="이름"			텍스트 영역의 이름
rows	rows="숫자"			텍스트 영역의 높이 (행의 수)
cols	cols="숫자"			텍스트 영역의 너비 (글자 수)
wrap	wrap="속성값"			폼으로 전송될 때 줄바꿈 포함 여부	soft(default) -> 줄바꿈 포함 x hard -> 줄바꿈 포함 o
readonly	readonly			텍스트 영력을 읽기 전용으로만 사용

 

 

 

3. (2) <select> 태그

-> 드롭 다운 리스트를 만들 때 사용

하위 태그인 <option>을 사용하여 각 항목을 정의함

 

태그 명	속성 명	표현 형태			속성 역할	특이사항
select	name	name="이름"			드롭다운 리스트의 이름 지정
	size	size="숫자"			한번에 보여지는 항목의 개수 지정
	multiple	multiple			다중 선택이 가능하도록 설정
option	disabled	disabled			항목 비활성화
	label	label="텍스트"			긴 항목을 짧은 레이블로 value의 우측에 표시
	selected	selected			초기 값으로 선택되는 항목
	value	value="텍스트"			서버로 전달되는 항목 값

 

 

3. (3) <datelist> 태그

-> 포커스를 받으면 미리 입력한 옵션이 드롭다운 형태로 표시

<input type="text">에 대한 옵션 목록을 지정하는 태그

 

<h3>datalist 태그</h3>
<form>
<p>웹 브라우저:
<input type="text" list="browsers"></p>
<datalist id="browsers">
<option value="인터넷 익스플로러" label="IE">
<option value="파이어폭스" label="FireFox">
<option value="크롬" label="Chrome">
<option value="마이크로소프트 엣지" label="Microsoft Edge">
</datalist>
</form>

 

3. (4) <optgroup>, <fieldset>, <legend>, <label> 태그

 

태그 명	표현 형태			속성 역할	특이사항
<optgroup>	<optgroup label="텍스트">			연관된 항목을 묶어주는 태그
<fieldset>	<fieldset>			사각형 테두리 안에 표시
<legend>	<legend>			그룹핑되는 요소들에 대한 캡션을 사각형 테두리 선 상에 표시
<label>	<label for="텍스트">			input 태그에 대한 레이블 정의 -> 텍스트를 클릭해도 input 태그선택