HTML / form 태그의 요소 정리 / 폼 태그에서 사용되는 태그들의 속성

인터넷을 사용하다보면
로그인, 회원가입을 하거나 검색, 글을 작성하거나, 주문을 처리하는 많은 작업을 할 수 있는데
form 태그는 이러한 모든 기능에서 필요한 태그이다.
다양한 곳에서 사용되는 만큼 form태그 안에서 당양한 종류의 데이터를 처리할 수 있는 태그가 있다.

from 태그의 요소 

<form>	사용자로부터 입력을 받을 수 있는 입력 폼을 정의할 때 사용하는 태그
<input>	다양한 데이터를 입력 받는 태그
<textarea>	여러줄의 텍스트를 입력 받는 태그
<label>	태그의 이름을 붙이는 태그
<fieldset>	폼 안에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용하는 태그
<legend>	<fieldset>태그의 캡션을 정의할 때 사용하는 태그
<selecet>	옵션 메뉴를 제공하는 드롭다운 리스트를 정의할 때 사용하는 태그
<option>	<select>태그에서 옵션메뉴를 정의하는 태그
<optgroup>	<select>태그에서 사용되는 옵션들의 그룹을 정의할 때 사용하는 태그
<button>	클릭할 수 있는 버튼을 정의할 때 사용하는 태그

---

 

반응형

태그의 속성

 

1. <form> 폼 태그

사용자로부터 입력을 받을 수 있는 입력 폼을 정의할 때 사용하는 태그 입니다.

속성명	속성값	설명
accept-charset	문자셋	폼의 데이터가 서버로 전송될때 사용되는 문자 인코딩 방식을 명시한다.
action	URL	폼의 데이터가 전송될 해당 위치를 명시한다.
autocomplete	on, off	폼 태그의 요소들이 자동 완성 기능을 사용할지 여부를 명시한다.
enctype	application/x-www-formurlencoded, multipart/form-data, text/plain	폼의 데이터가 서버로 전송될때 인코딩 방법을 명시한다.
method	get, post	폼의 데이터가 전송될때 사용된는 HTTP메소드를 명시한다.
novalidate	novalidate	폼의 데이터가 전송될때 해당 데이터의 유효성을 검사하지 않음을 명시한다.
target	_blank, _self, _parent, _top	폼의 데이터가 전송된 후 응답이 열리는 위치를 명시한다.

 

 

2. <input> 태그

사용자로부터 입력을 받을 수 있는 입력 필디를 정의할 때 사용한다.
입력 필드는 <input> 태그의 type 속성값에 따라 여러가지 모양으로 나타낼수있다.

속성	속성값	설명
type	button, ckeckbox, color, date, email, datetime-local, file, hidden, image, month, number, password, radio, range,reset, search, submit, tel, test, time, url,week	input 태그가 나타낼 타입을 명시한다.
accept	파일 확장자	type 속성값이 file 경우에 서버에 업로드할 수 있는 파일의 타입을 명시한다.
alt	텍스트	type 속성값이 image인 경우에 이미지의 대체 텍스트를 명시한다.
autocomplete	on, off	자동 완성 기능을 사용할지 여부를 명시한다.
autofocus	autofocus	페이지가 로드될 때 자동으로 포커스가 이동됨을 명시한다.
checked	checked	type 속성값이 checkbox 또는 radio인 경우 미리 선택될 요소를 명시한다.
disabled	disabled	해당 input 요소가 비활성화됨을 명시한다.
max	숫자,날짜	input 요소의 최댓값을 명시한다.
maxlength	숫자	input 에서 허용되는 최대 문자수를 명시한다.
min	숫자,날짜	input 요소의 최솟값을 명시한다.
multiple	multiple	둘 이상의 값을 입력할 수 있게 명시한다.
name	텍스트	input 요소의 이름을 명시한다.
placeholder	텍스트	입력될 값에 대한 짧은 예시를 명시한다.
readonly	readonly	입력 빌드가 일기 전용임을 명시한다.
size	숫자	요소의 넓이를 문자수의 단위로 명시한다.
src	URL	type 속성값이 image인 경우에 사용될 이미지의 URL을 명시한다.
step	숫자	input 요소에 입력할 수 있는 숫자들의 간격을 명시한다.
value	텍스트	input 요소의 초깃값을 명시한다.
width	픽셀	type 속성값이 image인 경우에 input 요소의 넓이를 픽셀 단위로 명시한다.

 

3. <label> 태그

브라우저에서 일반적인 텍스트로 랜더링되지만, 사용자가 마우스로 해당 텍스트를 클릭할 경우 <label>요소와 연결된 요소를 선택할 수 있어서 사용자의 편의성을 높일 수 있다.

속성명	속성값	설명
for	요소의 id값	라벨과 결합될 요소의 id값을 명시한다.
form	form id	라벨과 결합될 하나 이상의 <form>요소를 명시한다.

 

4. <fieldset> 버튼

<form>태그 안에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용합니다. 그룹으로 묶은 요소들 주변으로 선을 그려줍니다.

속성명	속성값	설명
disabled	disabled	<fieldset>태그에 포함된 <form>태그의 요소들이 비활성화 됨을 명시한다.
name	이름	<fieldset>의 이름을 명시한다.

 

5. <legend> 버튼

<fiedset> 태그의 캡션을 정의할 때 사용합니다.

 

6. <select> 버튼

옵션 메뉴를 제공하는 드롭다운 리스트를 정의할 때 사용합니다.

속성명	속성값	설명
autofocus	autofocus	페이지가 로드될 때 자동으로 포커스가 이동됨을 명시합니다.
disabled	disabled	해당 리스트가 비활성화됨을 명시합니다.
multiple	multiple	사용자가 한번에 두 개 이상의 옵션을 선택할 수 있음을 명시합니다.
name	이름	리스트의 이름을 명시합니다.
required	required	데이터가 서버로 전송되기 전에 사용자가 반드시 리스트의 값을 선택해야함을 명시합니다.
size	숫자	리스트에서 한번에 보일 옵션의 개수를 명시합니다.

 

7. <optgroup> 버튼

<select> 태그에서 제공하는 드롭다운 리스트에서 옵션들의 그룹을 정의할 때 사용합니다.
옵션의 수가 많은 경우 관련된 옵션끼리 그룹으로 묶어주면 사용자가 쉽게 리스트를 사용할 수 있습니다.

 

8. <button> 버튼

클릭할 수 있는 버튼을 정의할 때 사용합니다.
요소 안에 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있습니다.

속성명	속성값	설명
autofocus	autofocus	페이지가 로드될때 자동으로 포커스가 버튼으로 이동됨을 명시합니다.
disabled	disabled	해당 버튼이 비활성화됨을 명시합니다.
type	button, reset, submit	해당 버튼의 타입을 명시합니다.
value	텍스트	해당 버튼의 초깃값을 명시합니다.