[HTML] form, label, input

form 태그

1. 웹페이지에서 정보를 서버로 보내거나
2. 자체 웹페이지에서 사용자와 상호작용을 하기 위해 입력값이나 버튼과 같은 이벤트 요소가 필요할때 사용되는 HTML의 태그
3. 입력 양식 전체를 감싼다.

form 태그와 함께 사용되는 태그

• input : 입력 컨트롤을 정의
• textarea : 다중 라인 입력 컨트롤을 정의
• label : 입력 요소의 라벨을 정의
• fieldset : 관련 요소를 양식으로 그룹화
• legend : fieldset요소에 대한 캡션을 정의
• select : 드롭다운 목록을 정의
• optgroup : 드롭다운 목록에서 관련 옵션 그룹을 정의
• option : 드롭다운 목록에서 옵션을 정의
• button : 버튼 정의

form 태그 속성

• method : 전송방식
• name
• action
• target
• autocomplete : on - 이전 입력값 보여줌
• enctype : 서버로 제출될 때, 인코딩 방법
• novalidate : 유효성 검사여부

input

• readonly
• placeholder
• maxLength
• required
• type
• autofocus
• autocomplete
• max / min
• step

type

• hidden
• text
• search
• tel
• url
• email
• password
• number
• range
• color
• checkbox
• radio
• datetime
• datetime-local
• date
• month
• week
• time
• button
• file
• submit
• image
• reset

textarea

여러 줄의 긴 내용 입력
HTML : cols, rows
CSS : width, height

• autofocus
• cols
• dirname
• disabled
• form
• maxlength
• name
• placeholder
• readonly
• required
• rows
• wrap

label

input 태그를 제어
텍스트 컨트롤에 초점이 맞춰져 사용성 높아진다. 특히 모바일, 태블릿 환경에서 강점이다.
label tag의 for - input tag의 id로 매핑

select & option

select

• autofocus
• disabled
• form
• multiple
• name
• required
• size

option

• value
• selected
• disabled
• hidden

optgroup

목록을 그룹화하여 카테고리를 구분해서 보여준다.
label 속성을 추가하고, 카테고리 구분 시 보여줄 텍스트를 입력한다.

fieldset & legend

fieldset 태그는 입력 양식들을 그룹화할 때 사용한다.
legend 태그는 fieldset 태그 내에서 그룹화된 fieldset의 제목을 정의한다.

button vs input 차이

<input type="button">으로 버튼 생성이 가능하다.

• input tag 는 종료 태그가 없다.
• button tag의 경우 type 속성을 명시해줘야 한다.

참고자료

• 폼(Form) 태그 양식 & 종류 - 한방 정리 (링크)