[HTML5] 작성폼 만들기 위한 태그들 Form, Input, Select, Textarea 태그

[HTML5]

작성폼 만들기 위한 태그들 Form, Input, Select, Textarea 태그

By i!kohong(아이코홍)

---

<form>태그

---

 

태그 설명

---

• 자신의 태그 내에 있는 데이터를 지정한 웹 경로로 전송해 준다.

 

속성

---

method	데이터를 전송하는 방식(get이나 post)을 지정한다.
name	폼의 이름 지정. 자바스크립트에서 폼 내의 데이터를 구분할 때 사용
action	폼 내의 데이터를 가지고 이동할 위치(URL 이나 JSP 같은 프로그램)를 지정한다.
enctype	대용량 파일의 데이터 속성(multipart 나 form-data)을 지정한다.

---

<input> 태그

---

 

태그 설명

---

• 형식(Type)을 지정함에 따라 여러 형태의 필드를 폼에 구성이 가능합니다.
• 지정형식에 따라서 적용할 수 있는 속성도 달라집니다.

 

속성

---

 

Type	속성	기능
text	name : 필드를 구분하는 이름(텍스트)을 지정한다. size : 대문자 A를 기준 삼아 필드의 크기(개수)를 지정한다. value : 기본값(텍스트)을 지정한다. maxlength : 입력할 수 있는 글자 수(개수)를 제한한다. readonly : 필드를 읽기 전용으로 지정	일반 텍스트를 입력하는 타입
password	name : 필드를 구분하는 이름(텍스트)을 지정한다. size : 대문자 A를 기준 삼아 필드의 크기(개수)를 지정한다. maxlength : 입력할 수 있는 글자 수(개수)를 제한한다.	비밀번호를 입력할 때 텍스트가 안보이게 해주는 타입
radio/checkbox	name : 필드를 구분하는 이름(텍스트)을 지정한다. value : 기본값(텍스트)을 지정한다. check : 현재 항목을 확인할지 여부를 지정	사용자가 선택지를 만들수 있게 해주는 타입
button	name : 필드를 구분하는 이름(텍스트)을 지정한다. value : 버튼에 표시할 글자(텍스트)를 지정한다.	일반버튼
submit		데이터를 전송하는 버튼
reset		초기화 버튼
hidden		숨기기 기능
file	name : 필드를 구분하는 이름(텍스트)을 지정한다. size ; 필드의 크기(숫자)를 지정한다. readonly : 필드를 읽기 전용으로 지정	사용자의 파일을 첨부 할 수 있게 하는 타입
email	name : 필드를 구분하는 이름(텍스트)을 지정한다.	'email'을 받아들이는 타입
url		URL을 받아들이는 타입이며, 입력되는 URL 주소형식이 맞는지 검사하며, 형식이 안맞는 경우 메시지를 띄운다.
number		입력 값의 범위를 한정하고, 그 범위 내에서 숫자가 입력이 가능함.
range		입력 형태를 슬라이드 컨트롤로 나타내 주는 타입
date	datetime, week, month, date, time, datetime-local	날짜를 구성하는 요소들을 입력 받기 위한 타입
search	name : 필드를 구분하는 이름(텍스트)을 지정한다.	text타입과 유사하며, 일반 브라우저에서 검색을 입력 받기 위한 타입
color	name : 필드를 구분하는 이름(텍스트)을 지정한다.	사용자가 사용하기를 원하는 색상 값을 입력 받기 위한 타입

---

<select> 태그

---

 

태그 설명

---

• 목록 상자나 콤보 박스로 폼을 구성할 때 사용하는 태그입니다.
• 목록에서 하나 혹은 여러 항목을 선택할 때 사용합니다.
• 필드에 들어가는 항목은 이 태그를 이용하면 됩니다.

 

속성

---

name	이름(Text)을 지정
size	목록 상자에 보여지는 항목(item)의 갯수(숫자)를 지정한다.
multiple	여러 항목을 선택할 수 있게 해준다.

---

<option> 태그

---

 

태그 설명

---

• <select> 태그가 만드는 필드의 항목을 만드는 태그

 

속성

---

value	항목을 선택하였을 때 전송할 값을 지정
selected	기본적으로 선택되는 항목을 지정하게 해줌

---

<textarea> 태그

---

 

태그 설명

---

• 여러줄에 걸쳐 데이터를 작성하고자 할 때 쓰는 태그

 

속성

---

name	이름(텍스트)를 지정
cols	대문자 A를 기준으로 갯수만큼의 너비(갯수)를 지정
rows	대문자 A를 기준으로 갯수만큼의 높이(갯수)를 지정
readonly	필드를 읽기 전용으로 지정한다.

---

예시

---