[HTML] 폼태그와 입력양식 태그

1. form 태그 / input 태그

---

 

 

1-1. form 태그

 

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

> 입력요소(input, select, textarea 등)는 <form>태그 내에서 사용

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

 

> 기본형태

<form action="URL" method="전송방식">     ... </form>

 

속성	값	설명
action	"URL"	폼 데이터를 전달받아 처리할 때 페이지의 URL
method	"전송방식"	데이터 전송에 사용하는 HTTP 방식  - method="get" 또는 method="post"

 

 

GET 방식과 POST 방식의 차이
구분	method="get"	method="post"
전송 형태	- 기본값(default) - 폼 데이터가 이름과 값의 형태로 URL에 포함되어 전송 - "URL?name=value&age=value"	- HTTP Request 헤더 속에 포함시켜 전송
데이터 길이	최대 2048 글자 (4096바이트)	- 제약없음
보안	- 보안이 중요하지 않은 데이터(예: 검색어) 전달에 사용 - '이전페이지' 버튼을 통한 이동 가능 - 양이 많지 않은 데이터 전송에 용이	- 보안이 필요한 로긍니 정보, 회원 정보 등의 전송에 사용 - '이전페이지'를 누르면 데이터를 다시 보내야 한다는 경고가 표시

 

 

 

1-2. input 태그

- 사용자 데이터의 입력을 위한 다양한 입력 타입을 지정.

 

<input type="입력필드 유형" 속성="값">

 

> type 속성의 값에 따라 다양한 형태의 입력 타입을 제공

> 종료태그 없이 사용 가능

> 속성(type 속성의 값에 따라 사용 가능한 속성이 달라짐)

→ width, src, autofocus, name, placeholder, readonly, required, size, type, value 등등 약 30가지 속성이 있다.)

 

> 이전부터 사용한 속성값 (HTML4)

 

type="속성값"	설명
text	- 한 줄짜리 텍스트  - 데이터를 출력하는 용도로도 사용
password	- 비밀번호   - 입력한 문자가 ' * ' 과 같은 문자로 표현
radio	- 라디오 버튼 (단일선택)  - 같은 그룹의 라디오 버튼들에 대해서만 배타적 선택  - name, value, checked	text와 password의 value는 초기값을 나타내지만, radio와 checkbox는 입력과 관련하여 서버로 전달되는 값을 나타낸다.   - radio와 checkbox는 각 그룹핑을 name으로 지정한다. → name이 같은 radio끼리는 한 그룹으로 된다.
checkbox	- 체크박스 (다중선택)  - name, value, checked
hidden	숨겨진 상태로 전송
file	업로드를 위한 파일 선택  - 자신의 시스템이 있는 파일을 선택하는 버튼을 생성  - 속성  accept="파일유형" → 선택 가능한 파일의 유형을 지정  multiple → 하나 이상의 값을 선택할 수 있도록 지정   <input type="file" accept="image/*" multiple>
image	이미지를 제출 버튼으로 지정  - 이미지를 제출 버튼으로 만들때 사용  - 속성  src(필수), width, height, alt   <input type="image" src="flower.jpg" width="100" height="100" alt="제출버튼">
submit	제출 버튼  - 입력한 데이터를 <form> action 속성에서 지정한 서버의 페이지로 전송하는 버튼  - value="버튼명" 속성 → 버튼위에 표시되는 이름   <form id="frm_id">   ~~~ </form> <input type="submit" from="frm_id">
reset	입력 초기화 버튼  - 입력한 내용을 모두 지워서 초기 상태로 만드는 취소 버튼  - value="버튼명" 속성 → 버튼위에 표시되는 이름
button	클릭 가능한 일반 버튼  - 클릭을 통해 사용자가 지시한 명령을 수행하기 위한 버튼  - value="버튼명" 속성 → 버튼 위에 표시될 이름   * <button> 태그 > 클릭 가능한 버튼을 정의하는 태그 > 버튼 위에 텍스트나 이미지도 표현 가능   <button type="button | submit | reset" name="이름">   버튼 위에 표시될 텍스트나 이미지를 지정 </button>   * form 태그 내에서 button 태그를 사용하게 되면 데이터 전송이 제대로 이루어지지 않을수 있다. 때문에 form태그 내에서는 <input type="button"> 을 사용하는것이 옳다.

 

 

> HTML5부터 추가된 속성값 (HTML5)

 

type="속성값"		설명
search		검색어 입력  > type="text"와 동일한 기능/모양, 단지 입력 대상을 명확히 지정함  > 입력한 텍스트를 초기화 해주는 'X' 버튼이 input 박스의 오른쪽에 생긴다.
tel		전화번호  > type="text"와 동일한 기능/모양, 단지 입력 대상을 명확히 지정함
url		URL 입력  > type="text"와 유사한 기능/모양  > 자동으로 유효성 검사 → 형식에 맞지 않으면 경고 메시지 출력
email		이메일 주소  > type="text"와 유사한 기능/모양  > 자동으로 유효성 검사 → 형식에 맞지 않으면 경고 메시지 출력  > multiple속성 → 콤마로 구분된 여러개의 이메일 주소 입력
number		특정 범위의 숫자  > input박스 우측에 스핀버튼(위아래 버튼) 자동생성, 조절가능  > 속성  - min="최소값" / max="최대값"  - step="입력값의 유효간격" (스핀버튼 조절)  - vaule="초기값"
range		특정 범위의 숫자  > 좌우 레인지형식 자동생성, 조절가능  > 애매한 숫자나 덜 정확한 숫자를 입력받을때 사용  > 속성  - min="최소값" / max="최대값"  - step="입력값의 유효간격" (좌우버튼 조절)  - vaule="초기값"
color		색상표를 통한 색상 입력
datepickers	date	날짜 → 년, 월, 일 입력
	month	월 → 년, 월 입력
	week	주차 → 년, 주차 입력
	time	시간 → 시, 분, 초 입력
	datetime	날짜와 시간 → UTC 시간대를 기준으로 년, 월, 일, 시간 입력(HTML 표준에서 제외)
	datetime-local	날짜와 시간 → 지역 시간대를 기준으로 년, 월, 일, 시간 입력

 

> 그밖의 속성

 

속성명	값	설명
name	"string"	form 태그를 통해 서버로 전송하기 위한 구분을 위해 각 form 태그의 이름을 붙여준다.
autofocus	"속성명"	페이지가 로딩됐을때 해당 태그로 커서이동
size	"number"	화면에 보여줄 입력박스의 글자수
maxlength	"number"	입력받을수 있는 최대 문자수
value	"값"	초기값
disabled	"속성명"	비활성화 시켜주기 위한 속성.  비활성화된 데이터는 서버로 넘어가지 않는다.
placeholder	"값"	사용자의 입력방식을 유도하기 위한 참조글자
autocomplate	"on"  "off"	사용자가 이전에 입력했던 내용을 자동완성 시켜주는 속성  form 태그 및 input태그 등에 사용 가능
title	"텍스트"	입력 형식에 대한 툴팁기능
required	"속성명"	이 요소에 대해서는 값을 반드시 입력해야 한다고 경고메세지를 표현
pattern	- 이름  [a-zA-Z]{4, 10}  → [문자의 종류]{문자의 갯수}    - 전화번호  0\d{1,2}\-\d{3,4}\=\d{4}    - 주민등록번호  \d{6}\-[1-4]\d{6}    - 이메일  ^[a-zA-Z0-9]+@([a-zA-Z0-9_\-\.]+]\.([a-zA-z]{2,5})$	입력값에 대한 유혀성 검사를 위한 정규 표현식을 지정  - 정규표현식 → 특정한 규칙을 가진 문자열을 표현하는데 사용하는 수식

 

 

 

2. textarea 태그 / select 태그 / datalist 태그

---

2-1. <textarea> 태그

 

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

> <input type="text"> → 한 줄에 해당하는 짧은 텍스트 입력

 

<textarea rows="숫자값" cols="숫자값">      텍스트 영역에 표시할 내용(출력용) </textarea>

 

 

> 주요속성 → name, rows, cols, wrap, readonly

> autofocus, disabled, form, maxlength, placeholder, required 등도 사용 가능

 

주요 속성	값	설명
name	"이름"	텍스트 영역의 이름
rows	"숫자"	텍스트 영역의 높이(라인 수)
cols	"숫자"	텍스트 영역의 너비(한 줄에 입력할 수 있는 글자 수)
wrap	"soft" → (default) 자동으로 줄바꿈이 포함되지 않음  "hard" → 자동으로 줄바꿈이 포함되어 전송(cols 속성 지정이 필요)	폼으로 전송될 때 줄바꿈 포함 여부
readonly	생략가능, "속성명"	텍스트 영역을 읽기 전용(내용 출력) 으로만 사용

 

 

2-2. <select> 태그

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

> <option>태그

 → <select>의 하위 태그로서, 목록에서 각 항목을 정의

 

<select 속성="값">     <option value="값">항목1</option>     <option value="값">항목2</option>     <option value="값">항목3</option> </select>

 

속성		값	설명
select	name	"이름"	드롭다운 리스트의 이름을 지정
	size	"숫자"	한 번에 화면에 보여지는 항목의 개수를 지정
	multiple	생략	여러 항목을 한꺼번에 선택할 수 있도록 지정  → ctrl 키나 shift 키를 누른채로 선택 가능
option	disabled	생략	해당 항목을 비활성화 시킴
	label	"텍스트"	긴 항목을 짧은 레이블로 value의 우측에 표시
	selected	생략	페이지 로드 시에 초기값으로 선택되는 항목을 지정
	value	"텍스트"	서버로 전달되는 항목의 값을 지정
	label	"텍스트"	option 태그의 우측 참고텍스트 지정

 

 

2-3. <datalist> 태그

 

- <input type="text">에 대한 옵션 목록을 지정

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

 

<input type="text" list="datalist_id"> <datalist id="datalist_id">     <option value="값1" label="항목1">항목1</option>     <option value="값2" label="항목2">항목2</option>     <option value="값3" label="항목3">항목3</option>     <option value="값4" label="항목4">항목4</option> </datalist>

 

 

 

 

 

속성	값	설명
id	"input 태그의 list값"	datalist에 기술된 항목이 드랍다운 됨

2-4. <optgroup> 태그

 

- <select>태그 내에서 연관된 항목들을 그룹핑

<select name="subject" size="1">     <optgroup label="그룹핑네임1(텍스트)">         <option value="값1">항목1</option>         <option value="값2">항목2</option>         <option value="값3">항목3</option>     </optgroup>     <optgroup label="그룹핑네임2(텍스트)">         <option value="값4">항목4</option>         <option value="값5">항목5</option>         <option value="값6">항목6</option>     </optgroup> </select>

 

 

 

3. fieldset 태그 + legend 태그 / label 태그

---

 

 

3-1. <fieldset> 태그

 

- 폼에서 사용된 요소들을 그룹핑 → 사각형 테두리 안에 표시

 

- <legend>태그

> <field> 태그 내에서 사용

> 그룹핑되는 요소들에 대한 캡션을 사각형 테두리 선 상에 표시

 

 

3-2. <legend> 태그

 

- <input> 태그에 대한 레이블 정의 → 시각적으로 효과 없음

 

> <lable> 태그 내에 있는 텍스트를 클릭해도 해당하는 <input> 태그의 선택이 가능

 

<form>     <p><label>아이디: <input type="text" name="id" value="HwiDoorumi"></label>   <p><label>비밀번호: <input type="password" name="pwd"></label></p>     <fieldset>     <legend>성별</legend>          <label for="male">남자</label>     <input type="radio" id="male" name="gender" value="male" checked><br/>         <label for="female">여자</label>     <input type="radio" id="female" name="gender" value="female"><br/>     </fieldset>   </form>