[HTML] 폼(Form) 태그 종류

<form> 태그

폼태그에는 name, action, method, target 등이 있습니다.

폼 속성을 이용해 입력한 값을 어디로 보낼 것인지 어떻게 보낼 것인지 정할 수 있습니다.

 

📝 <form> 형태

<form action="데이터를 보낼 주소" method="데이터 전송 방식">
	/* 데이터 전송 내용 */
	<input type="text" name="id" value="">
	<input type="text" name="pwd" value="">
	<input type="submit">
</form>

• name : 폼의 이름을 지정합니다.
• action : 폼 데이터가 전송되는 백엔드 url을 지정합니다.
• method : 폼을 서버에 전송할 http 메소드를 정합니다. (GET / POST)
• target : action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정합니다.
• accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다.

 

필수 속성

• action : 데이터를 전달할 url을 넣어줌
• method : 폼 요소를 전달하는 방식으로 POST와 GET 이 있습니다.

POST	url에 받은 데이터가 적혀 나오지 않음 보안에 적절 로그인 같은 기능에 활용
GET	url에 받은 데이터가 그대로 적혀 나옴 어떤 데이터를 전송하는지 그대로 나오기 때문에 보안에 취약 주로 검색 기능에 활용

 

---

<input> 태그

실제로 사용자가 입력하는 공간은 이 태그로 만들어집니다.

 

📝 <input> 형태

<input type="타입" name="이름" value="ID 기본 값">

 

📝 <input> 태그 속성

input 태그 속성
id	label태그와 이어지게 해주는 id값 ✔ 같은 HTML문서 내에서 다른 요소와 같은 id를 가질 수 없음
name	서버로 전달되는 데이터 이름을 설정하는 속성 ✅ 요소의 이름을 설정. 서버에서 값을 전달받을 때 key로 사용
value	서버로 전달할 입력 양식의 값을 설정 ✅ name(key) - value(value)
type	입력태그의 유형을 설정하는 속성
maxlength	입력 필드에 입력할 수 있는 문자의 최대 길이를 설정
size	입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만 의미 ( size="숫자")(기본값 20)
placeholder	예시 텍스트 (placeholder="내용")
disabled	정보 수정 불가능. 데이터 전송도 불가능. ✔ 입력필드를 사용할 수 없게 설정
readonly	정보 수정 불가능. 데이터 전송은 가능. ✔ 데이터를 볼 수 있으나 수정할 수 없게 설정
autofocus	자동 커서 설정
checked	미리 선택하는 옵션을 설정 (checkbox, radio)
required	데이터를 submit 할 때 데이터를 필수로 입력하도록 강제하는 설정

 

📝 <input> 태그 type 속성

input 태그 type 속성
text	기본 값으로 텍스트를 입력할 수 있다.
button	일반적인 button 역할을 하는 버튼 (이벤트가 없는 일반버튼)
password	비밀번호를 입력하는 영역,  입력된 값은 *(별표) 형태로 노출된다.
checkbox	다중 선택 (name, value 필수) ✔ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야함
radio	단일 선택 (name, value 필수) ✔ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야함
file	원하는 파일을 서버로 전송하기 위한 글상자
image	이미지 형태의 전송 버튼 src 속성을 사용해 이미지를 적용한다. <input type="image" src="test.jpg">
number	숫자 입력 영역 <input type="number" min="최소값" max="최대값" step="증가값">
tel	전화 번호 입력 영역 (모바일에서 숫자 키패드를 사용)
url	웹 페이지에 사용되는 url 입력 영역 (http 필요)
date	날짜 입력 창 영역 (년, 월, 일)
datetime-local	날짜 + 시각 선택
month	년, 월을 선택하는 영역
week	년, 주를 선택하는 영역
time	시간 입력 영역
color	원하는 색상을 입력받는 요소 (선택한 색상은 16진수 RGB컬러값으로 서버에 전달)
email	email을 입력할 수 있는 영역 (@필요)
range	일정 범위안에 값만을 입력하는 조절바 <input type="range" min="최소값" max="최대값" step="증가값" value="현재값">
search	검색어를 입력받는 글상자
hidden	사용자에게는 보이진 않지만 서버에 값을 전달하고 싶을 때  사용하는 글상자
reset	입력받은 데이터를 초기화하는 버튼
submit	입력받은 데이터를 서버에 제출하는 버튼 ✔ form 태그의 action값으로 전달

 

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

---

필수 속성

• type : 인풋태그의 데이터 형식(종류)을 지정해 줄 때 사용. (기본값 text)
• placeholder : 입력할 공간에 어떤 내용을 입력할지 예시를 보여줄 수 있음
• id : html 문서 내에서 태그를 식별할 때 사용, label태그의 for속성과 함께 활용됨
• name : 인풋 요소의 이름을 지정해 줌, 서버로 데이터를 전송할 때의 데이터 명

---

input type 종류

1. text

일반적인 텍스트를 입력받을 때 사용

아이디 같은 내용을 입력받을 때도 사용가능

<input type="text">

 

2. password

비밀번호를 입력받을 때 사용

입력받은 내용은 기호로 바뀌어 표현

하지만 form태그의 GET 방식으로 데이터를 전달 시 url에 입력한 비밀번호가 보이기 때문에

반드시 POST 방식으로 데이터를 전달해 줘야 함

<input type="password">

 

3. email

이메일을 입력받을 때 사용

이메일로 입력받았는지(@ 포함 여부)를 확인

<input type="email">

 

4. tel

전화번호를 입력받을 때 사용

<input type="tel">

 

5. url

url 주소를 입력받을 때 사용

<input type="url">

 

6. date

연, 월, 일을 입력받을때 사용

<input type="date">

 

7. time

시, 분, 초를 입력받을때 사용

<input type="time">

 

8. submit

type을 지정해 주면 기본적으로 "제출" 버튼 형태로 작성

value라는 속성으로 제출 문구를 바꾸어 줄 수 있음

<input type="submit" value="버튼문구변경">

 

9. button

버튼 형태로 작성

버튼 자체로는 아무런 기능을 할 수 없음

특정한 기능을 하기 위해서는 JavaScript 작업을 추가해 주어야 함

<input type="button">

 

10. checkbox

체크박스 삽입

체크를 선택했다가 해제 가능 (중복선택 가능)

checked 속성을 추가하여 미리 체크된 상태로 만들어 줄 수 있음

<input type="checkbox">

 

11. radio

체크박스와 유사하지만, 선택 해제 불가능

여러 개의 선택지 중 하나를 선택할 때 사용 (단일 선택)

여러 개의 radio 요소들에게 name을 동일하게 지정해 주어 단일선택이 되도록 만들어 줌

<input type="radio" name="radio_cheked">
<input type="radio" name="radio_cheked">
<input type="radio" name="radio_cheked">

---

<label> 태그

인풋태그와 함께 사용되며, 인풋태그의 제목을 나타낼 때 사용해 줄 수 있습니다.

인풋태그에 지정된 id선택 자명을 label 태그의 for 속성값 안에 넣어주면 같이 연동을 시켜 줄 수 있습니다.

즉, 레이블 태그 내부의 내용을 클릭하였을 때 인풋태그가 작동되도록 만들어 줄 수 있습니다.

 

📝 <label> 형태

<label for='요소의 id'>텍스트 또는 이미지</label>

---

❌ label태그 for속성 미 적용 시

<label>여기를 클릭해 주세요</label>
<input type="checkbox">

- "여기를 클릭해 주세요" 라는 문구를 클릭해도 체크박스가 체크 되지 않는다.

 

⭕ label태그 for속성 적용 시

<label for="check_here">여기를 클릭해 주세요</label>
<input type="checkbox" id="check_here">

- "여기를 클릭해 주세요" 라는 문구를 클릭하면 체크박스가 체크 된다.

---

<button> 태그

- 버튼을 생성하는 요소
- 초기 속성은 submit 과 동일
- type="reset", type="button", type="submit"(default)

 

📝 <button> 형태

<button>버튼</button>

---

<select> 태그 & <option> 태그

옵션 선택창을 만들어 줄 때 사용합니다.

select태그 내부에 option태그를 넣어 선택할 수 있도록 만들어 줍니다.

 

📝 <select> 형태

<select>
    <option>선택해주세요</option>
    <option>안녕하세요</option>
    <option>소현입니다</option>
</select>

---

<textarea> 태그

- 여러줄의 텍스트를 입력받는 글 상자
- value값 태그 안이 아니라 태그 사이에 입력

- 크기 조절 막기 <textarea style="resize: none;"></textarea>

 

📝 <textarea> 형태

<textarea cols="가로 글자 수" rows="세로 줄 수">value값</textarea>