HTML 폼 가이드

이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!

항목

  1. 나의 첫 HTML 폼

  2. HTML 폼 구성 방법

  3. 기본 폼 위젯

  4. CSS와 HTML 폼

    1. HTML 폼 스타일
    2. HTML 폼을 위한 고급 스타일
    3. 폼 위젯을 위한 호환성 테이블 속성

  5. 데이터 주고 받기

  6. 데이터 유효성 검사

  7. 사용자 폼 위젯 만드는 방법

  8. JavaScript를 통해서 폼 전달 하기

    1. FormData 객체 사용

  9. 기존 브라우저에서 HTML 폼

HTML 문서

HTML 요소

요소 관련 DOM 인터페이스 설명
<button> HTMLButtonElement button 요소는 클릭할 수 있는 버튼을 나타낸다.
<datalist> HTMLDataListElement datalist 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 <option> 요소의 집합을 포함합니다.
<fieldset> HTMLFieldSetElement fieldset 요소는 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다.
<form> HTMLFormElement form 요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다.
<input> HTMLInputElement input 요소는 대화형 컨트롤 폼들을 생성하는데 사용됩니다.
<label> HTMLLabelElement label 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다.
<legend> HTMLLegendElement legend 요소는 상위 요소인 <fieldset> 컨텐츠를 위한 캡션을 나타냅니다.
<meter> HTMLMeterElement meter 요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다.
<optgroup> HTMLOptGroupElement optgroup 요소는 <select> 요소 안에 있는 옵션 그룹을 생성합니다.
<option> HTMLOptionElement HTML option 요소는 <select>, <optgroup> 또는 <datalist>요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다.
<output> HTMLOutputElement output 요소는 계산 결과를 나타냅니다.
<progress> HTMLProgressElement progress 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다.
<select> HTMLSelectElement select 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.
<textarea> HTMLTextAreaElement textarea 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다.

참고 : 모든 폼 요소들이나 모든 HTML요소들은 HTMLElement 돔 인터페이스를 지원합니다.

HTML 속성

속성 이름 요소 설명
accept <form>, <input> 서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다.
accept-charset <form> 지원하는 문자 집합 목록
action <form> 폼을 통해서 전송 정보를 처리하는 프로그램의 URL
autocomplete <form>, <input> 폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다.
autofocus <button>, <input>, <select>, <textarea> 페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다.
checked <input> 해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다.
cols <textarea> textarea의 세로줄 수를 설정합니다.
data <object> 자원의 URL을 명시합니다.
dirname <input>, <textarea>
disabled <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> 사용자가 요소와 상호 작용할 수 있는 지 나타냅니다.
enctype <form> POST방식으로 전송되는 데이터의 타입을 설정합니다.
for <label>, <output> Describes elements which belongs to this one.
form <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> 요소의 소유자인 폼을 나타냅니다.
high <meter> Indicates the lower bound of the upper range.
list <input> Identifies a list of pre-defined options to suggest to the user.
low <meter> Indicates the upper bound of the lower range.
max <input>, <meter>, <progress> 허용되는 최댓값을 나타냅니다.
maxlength <input>, <textarea> 요소에서 허용되는 특징의 최대 수를 명시합니다.
method <form> Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min <input>, <meter> 허용되는 최솟값을 나타냅니다.
multiple <input>, <select> Indicates whether multiple values can be entered in an input of the type email or file.
name <button>, <form>, <fieldset>, <input>, <output>, <select>, <textarea> 요소의 이름. For example used by the server to identify the fields in form submits.
novalidate <form> This attribute indicates that the form shouldn't be validated when submitted.
optimum <meter> Indicates the optimal numeric value.
pattern <input> Defines a regular expression which the element's value will be validated against.
placeholder <input>, <textarea> Provides a hint to the user of what can be entered in the field.
readonly <input>, <textarea> Indicates whether the element can be edited.
required <input>, <select>, <textarea> Indicates whether this element is required to fill out or not.
rows <textarea> Defines the number of rows in a textarea.
selected <option> Defines a value which will be selected on page load.
size <input>, <select> Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src <input> The URL of the embeddable content.
step <input>
target <form>
type <button>, <input> Defines the type of the element.
usemap <input>
value <button>, <option>, <input>, <meter>, <progress> Defines a default value which will be displayed in the element on page load.
wrap <textarea> Indicates whether the text should be wrapped.

Normative reference