HTML Reference

HTMLform/input 태그

form/input

form

<form> 태그는 웹 페이지에서의 입력 양식을 의미합니다. 로그인 창이나, 회원가입 폼 등이 이에 해당되죠. 사용자로부터 데이터를 입력받을 때 사용하며, 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용합니다.
텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 됩니다.
사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용합니다.

<form> 요소는 다음과 같은 요소들을 하나 이상 포함할 수 있습니다.

<button>
<fieldset>
<input>
<label>
<option>
<optgroup>
<select>
<textarea>

제일 많이 사용되는건 input태그 입니다.

<form> 태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다. 실제로 사용자가 양식을 입력하기 위한 태그는 <input> 태그 등이 사용됩니다.
type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정합니다.

HTML5 에서 새롭게 추가된 속성

속성명	속성값	설명
accept	파일 타입	서버로 업로드할 수 있는 파일 타입을 콤마(,)로 구분된 리스트로 명시함. HTML5에서는 더 이상 지원하지 않음.
accept-charset	문자셋	폼 데이터(form data)가 서버로 제출될 때 사용되는 문자 인코딩(character encoding) 방식을 명시함.
action	URL	폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시함.
autocomplete	on off	<form> 요소에서 자동 완성 기능을 사용할지 여부를 명시함.
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시함. (단, <form> 요소의 method 속성값이 “post”인 경우에만 사용할 수 있음)
method	get post	폼 데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시함.
name	텍스트	<form> 요소의 이름을 명시함.
novalidate	novalidate	폼 데이터가 서버로 제출될 때 해당 데이터의 유효성을 검사하지 않음을 명시함.
target	_blank _self _parent _top	폼 데이터를 서버로 제출한 후 받는 응답이 열릴 위치를 명시함.

form의 자식태그

<button> 📌	클릭 가능한 버튼이다. 기본 type은 submit이다.
<input> 📌	22가지 type을 지원한다. 기본 type은 text이다. <form>과 가장 많이 쓰이는 요소 중 하나이다.
<label>	<form>에 '라벨'을 달아주는 역할이다. <label> 의 for 속성과 <input> 의 id 속성이 서로 같거나 <label>의 자식으로 <input>을 두어야 한다. <input>에 focus가 오면 스크린리더가 <label>을 읽기 때문에 접근성 측면에서 중요하다. 버튼이 너무 작더라도 <label>을 눌러 선택, 토글할 수 있어 유용하다.
<select>	<option>의 드랍다운을 만들어준다. 기본값으로 가장 첫번째 <option>이 선택되며 직접 입력은 불가능하다. size 속성으로 드랍다운이 아니라 한 번에 여러 개를 보여주는 스크롤로 만들 수 있다.
<optgroup>	<select>를 카테고리별로 묶을 수 있다.
<datalist>	<option>의 드랍다운을 만들어준다. 검색기록 자동완성과 같이 직접 입력이 가능하다. <datalist> 의 id 속성과 <input> 의 list 속성이 서로 같아야 한다.
<option>	드랍다운 리스트에 어떤 옵션을 담을지 정의한다. value 속성을 가진다.
<fieldset>	<form> 에서 관련 요소를 그룹화할 때 사용한다. 관련 요소 주위에 상자를 그려준다.
<legend>	<fieldset> 요소 첫번째 자식으로 <fieldset> 그룹을 설명하는 캡션 역할을 한다.
<output>	<form>의 oninput속성에 있는 계산을 수행하고 결과를 <output> 요소에 표시한다.
<textarea>	여러 줄을 입력할 수 있는 텍스트필드이다. rows 속성은 몇 줄 보일지를, cols 속성은너비를 지정해준다.

<form> 자체에 가질 수 있는 속성

name	<form> 의 이름을 적는다. (text)
autocomplete	자동완성 기능 사용여부를 지정한다. (on, off)
novalidate	제출 시 입력된 값의 유효성을 검사하지 않도록 지정한다. (novalidate)
action 📌	<form> 제출 시 데이터를 어디로 보낼지 적는다. (URL)
method 📌	데이터를 보낼 때 사용할 HTTP 메서드를 지정한다. (get, post)
charset	<form> 제출 시 사용할 문자 인코딩을 지정한다. (character_set)
enctype	POST 메서드로 데이터를 서버에 제출할 경우 인코딩을 지정한다. (application/x-www-form-urlencoded, multipart/form-data, text/plain)
target	form 제출 후 받은 응답을 어디에 표시할지 키워드를 적는다. (_blank, _self, _parent, _top)
rel	현재 문서와 연결된 리소스 간의 관계를 적는다. (external, help, license, nofollow, noopener, noreferrer, opener, prev, next, search)

<form> 의 메서드

reset()	<form> 내부의 모든 값(value)을 초기화해준다. 초기화 버튼(<button type="reset">)을 클릭한 것과 같은 효과이다. 기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
submit()	<form> 을 제출한다. 제출 버튼(<button type="submit">)을 클릭한 것과 같은 효과이다.

input 태그

웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, <input> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.22가지 type을 지원합니다. submit, reset, button 이외에 문자열, 숫자, 시간, 파일 등 데이터 형식에 따른 다양한 선택지가 있습니다.

<input type=" "> 속성

type="submit" 📌	<input>을 form handler에 데이터를 제출하기 위한 버튼으로 지정한다. form handler는 보통 데이터를 처리하는 서버단 페이지로 지정된다. 버튼에 value 속성을 지정하면 <input>에 기본값(default value)로 표시된다.
type="reset" 📌	<input>을 초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다. 기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
type="button" 📌	<input>을 버튼으로 지정한다.
type="img"	<input>을 이미지버튼으로 지정한다. <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
type="text"	<input>을 한 줄 입력 가능한 텍스트필드로 지정한다. input의 기본 type이다. size값을 지정하면 필드 너비가 자동조정된다. 기본 size값은 "20"이다.
type="search"	<input>을 검색필드로 지정한다. 일반적인 텍스트필드처럼 동작한다.
type="password"	<input>을 암호필드로 지정한다. 입력한 텍스트는 별표나 원으로 마스킹된다.
type="tel"	<input>을 전화번호 필드로 지정한다. pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"과 함께 사용해서 형식을 지정할 수 있다.
type="email"	<input>을 이메일을 포함해야하는 입력필드로 지정한다. 브라우저에 따라 제출 시 이메일 주소 유효성검사가 자동으로 이루어진다. 일부 스마트폰에서는 type="email"을 인식하고 키보드에 ".com"를 추가로 띄워준다.
type="url"	<input>을 URL주소를 포함해야하는 입력필드로 지정한다.
type="number"	<input>을 숫자 입력만 가능한 필드로 지정한다. min, max값을 지정하면 자릿수에 따라 필드 너비가 자동조정된다. (그림은 min="-10000"일 때)
type="range"	<input>을 슬라이드 컨트롤과 범위 내 숫자를 선택할 수 있는 컨트롤로 지정한다. 기본 범위는 0부터 100이고, min, max, step 속성을 추가로 지정할 수 있다.
type="radio"	<input>을 라디오버튼으로 지정한다. 선택지 중 단 하나의 항목만 선택할 수 있다.
type="checkbox"	<input>을 체크박스로 지정한다. 선택지 중 0개, 1개 또는 여러 개를 선택할 수 있다.
type="color"	<input>을 색상팔레트로 지정한다. value="#ff0000"과 같이 헥사코드로 기본값을 지정할 수 있다.
type="time"	<input>을 Time Picker로 지정한다. (no time zone)
type="date"	<input>을 Date Picker로 지정한다. min, max속성으로 날짜 범위를 지정하면 Date Picker 캘린더에 지정한 기간만 활성화된다.
type="datetime-local"	<input>을 Date Picker & 시간입력 필드로 지정한다. (no time zone)
type="week"	<input>을 Week Picker로 지정한다.
type="month"	<input>을 연도와 달을 Picker로 지정한다.
type="file"	<input>을 '파일선택 버튼'과 '선택된 파일 표시'로 지정한다.
type="hidden"	<input>을 숨겨진 입력필드로 지정한다. 사용자가 보거나 수정할 수 없는 데이터를 포함하는 용도로 사용한다. 개발자 도구에서보거나 편집할 수 있으므로 보안의 형태로 사용해서는 안된다. <input type="hidden" id="custId" name="custId" value="3487">

이 외에도 input 태그는 다양한 속성을 가지고 있습니다. 자주 쓰는 속성 이외에는 MDN 같은 사이트를 참고합시다.