양식

김동현·2021년 10월 10일

HTML5

목록 보기

12/13

1. `<form> </form>`

웹 서버에 정보를 제출하기 위한 양식의 범위를 설정하는 태그입니다(display: block;).
여러 입력 양식들을 form 태그 안에 작성합니다. 이렇게 만들어진 범위 안에 각각 입력된 양식의 정보(데이터)들을 특정한 페이지(주소)로 전송하기 위해 사용됩니다. 즉, 여러 입력 양식의 범위를 설정하고 정보를 특정 주소나 페이지로 전송하기 위해 사용되는 태그입니다.
form 태그는 자식으로 다른 form 태그를 포함할 수 없습니다.

속성	의미	값
🔑 action	전송한 정보들을 처리할 웹 페이지의 URL	URL
🔑 method	서버로 전송할 HTTP 방식	GET(기본값), POST
target	서버로 전송한 후 응답받을 방식을 지정	_self(기본값), _blank
name	고유한 양식 이름
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지에 대한 여부	on(기본값), off
novalidate	서버로 데이터 전송시 데이터의 유효성을 검사하지 않도록 설정	불린 속성

action 속성으로 전송할 정보를 처리할 웹 페이지의 URL을 지정합니다.
method 속성은 정보를 서버로 전송할 때 전송될 HTTP 방식을 설정합니다. 기본값으로는 GET이 설정되어 있습니다.
- GET 방식은 URL 주소에 우리가 전송하고자 하는 데이터가 URL 주소의 쿼리 스트링으로 전달됩니다.
- POST 방식은 요청 몸체에 데이터가 담겨져서 서버로 전송됩니다. 즉, 중요한 정보 혹은 정보의 양이 많은 경우 POST, 그렇지 않으면 일반적으로 GET을 작성합니다.
target 속성은 서버로 데이터를 전송한 후 응답을 받은 방식을 설정합니다. 기본값은 _self로 설정되어 있습니다.
name 속성은 서버로 정보들을 제출할 때 그 양식에 해당되는 이름을 설정하여 다른 양식과 구별될 수 있도록 만들어줍니다.
autocomplete 속성은 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부를 설정하는 속성입니다. 기본값으로 on이 설정되어 있습니다.
novalidate 속성은 서버로 전송시 양식 데이터의 유효성 검사를 하지 않도록 설정합니다. 유효성이란 서버로 데이터를 전송할 때 그 데이터가 특정 양식인지 검사는 것입니다. 불린 속성으로 사용합니다.

2. `<input />`

사용자에게 입력받을 데이터 양식을 설정합니다.
빈 태그로 사용이 됩니(display: inline-block;).

속성	의미	값
🔑 type	입력받을 데이터의 종류
🔑 name	양식의 이름, key 역할
🔑 value	양식의 초기값, value 역할
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on(기본값), off
autofocus	페이지가 로드될 때 자동으로 포커스	불린속성
checked	양식이 선택되었음을 표시(checkbox, radio)	불린속성
disabled	양식을 비활성화	불린속성
form	`<form>`의 id 속성값
list	참조할 `<datalist>`의 id 속성값
maxlength	입력 가능한 최대 문자 수(text, email, password, tel, url)	숫자
minlength	입력 가능한 최소 문자 수(text, email, password, tel, url)	숫자
placeholder	사용자가 입력할 값의 힌트(text, email, search, tel, url)
readonly	수정 불가능한 읽기 전용	불린 속성
max	지정 가능한 최대값(number, range)	숫자
min	지정 가능한 최소값(number, range)	숫자
step	유효한 증감 숫자의 간격(number, range)	1(기본값)
multiple	둘 이상의 값을 입력할 수 있는지 여부 (email, file)	불린속성
accept	허용되는 파일 확장자 작성(file)
src	이미지의 URL(image)	URL
alt	이미지 대체 텍스트(image)
require	필수로 입력되어야 하는 입력 필드	불린 속성
pattern	입력될 값의 패턴 작성

name 속성으로 양식의 이름을 설정합니다. 서버로 입력 양식의 데이터가 전송될 때 name 속성의 값이 전송될 데이터의 이름(key)으로 사용됩니다. 즉, key-value 쌍의 key 역할을 하는 속성입니다.
추가적으로 type="checkbox | radio"일 때 name 속성의 값으로 버튼들을 그룹화하는 역할도 합니다.
value 속성으로 입력 필드의 초기값을 설정합니다. 또한 서버로 데이터를 전송할 때 전송될 데이터를 담당합니다. 즉, 서버로 데이터를 전송할 때 name 속성의 값을 데이터의 이름으로, value 속성의 값을 데이터로 전송합니다(name = value). 즉, name과 value 속성은 필수적으로 작성해주는 것이 좋습니다.
autofocus 속성은 페이지가 로드될 때 자동을 포커스를 설정하도록 하는 태그입니다. HTML 문서내 단 하나만 존재해야 합니다.
checked 속성은 양식이 선택되었음을 표시하는 속성입니다. 해당 속성은 type 속성의 값으로 checkbox, radio일 때만 해당합니다.
required 라는 속성도 존재합니다. 해당 속성은 불린 속성을 사용되며 input 태그에 작성시 반드시 내용을 입력해야만 제출이 가능하도록 설정이 됩니다.
즉, 필수로 작성해야하는 입력 필드에 required 속성을 작성해줍니다.
pattern 속성을 통해 해당 값이 패턴에 맞게 작성되었는지 검사할 수 있습니다. 이때 값으로 정규표현식의 패턴을 사용합니다.

<input type="tel" 
       pattern="[0-9]{3}-[0-9]{3, 4}-[0-9]{4}" 
       placeholder="전화번호(***-****-****)"/>

form 속성은 해당 input 요소가 form 태그 안에 작성되지 않고 밖에 작성되는 경우 form 태그의 id 속성값을 input 태그의 form 속성에 작성한다면 input 요소가 form 태그 밖에 작성되더라도 연결되어 사용이 됩니다.

<form id="form1">
	,,,
</form>
<input form="form1" type="text" name="user-name" />

max, min 속성은 type 속성의 값이 number일 경우에만 사용합니다.
maxlength 속성은 type 속성의 값이 text, email, password, tel, url인 경우에만 사용합니다.
multiple 속성은 type 속성의 값이 email, file인 경우에만 사용합니다.
placeholder 속성은 type 속성의 값이 text, search, email, tel, url인 경우에만 사용합니다.
step 속성은 type 속성의 값이 number, range 경우에만 사용합니다.
src, alt 속성은 type 속성의 값이 image인 경우에만 사용합니다.
accept 속성은 type 속성이 file인 경우에만 사용합니다. 이때 accept 속성에 허용할 파일의 확장자를 작성할 수 있습니다.

<input type="file" accpet="image/jpeg, image/png" /> // 해당 필드는 jpeg, png 파일만 허용합니다.

<input type="file" accept=".jpg, .png" /> // 위 예제와 동일하게 동작합니다.

<input type="file" accept="image/*, video/mov" /> // 이미지는 모든 파일 확장자를 허용하며, 비디오 파일의 경우 mov 파일 확장자만을 허용합니다.

type 속성은 입력받을 데이터의 종류를 설정하는 속성입니다.

type 속성 값	데이터 종류	특징
button	일반 버튼	`<button>`처럼 사용
checkbox	체크박스	같은 name 속성 그룹 내 여러 개 선택 가능
color	색상
email	이메일
file	파일
hidden	보이지 않지만 전송할 양식	value 속성으로 값을 지정
image	이미지 제출 버튼(submit)	`<img />`처럼 사용
number	숫자
password	비밀번호	가려지는 양식
radio	라디오 버튼	같은 name 속성 그룹 내 하나만 선택 가능
range	범위 컨트롤	min, max, step, value 속성 사용
reset	초기화	해당 `<form>`범위 내 모든 양식 초기화
search	검색
submit	제출 버튼	해당 `<form>`범위 내 고유한 양식, name 속성이 존재하는 양식
tel	전화번호
text	일반 텍스트
url	절대 URL

3. `<label> </label>`

라벨 가능 요소의 화면에 표시될 제목을 설정하는 태그입니다(display: inline;).
속성 의미 값
for 참조할 라벨 가능 요소의 id 속성 값
for 속성으로 라벨 가능 요소를 참조하거나, label 태그 내 Content에 라벨 가능한 요소를 자식 요소로 포함하여 제목을 설정합니다.

속성	의미	값
for	참조할 라벨 가능 요소의 id 속성 값

라벨 가능 요소: <input />, <button>, <select>, <progress>, <textarea>

<!-- 1. for 속성을 이용  -->
<input type="checkbox" name="user-agreement" id="agreement"/>
<label for="agreement">동의</label>

<!-- 2. content 내용으로 포함  -->
<label> 
    <input type="checkbox" name="user-agreement">
    동의
</label>

content 내용으로 포함하는 경우에는 for 속성을 사용하여 연결할 필요가 없습니다.

위 두 예제는 동일한 결과를 출력합니다. 이때 label 태그로 작성한 '동의'라는 텍스트를 클릭해도 동일하게 체크가 됩니다.

4. `<button> </button>`

선택 가능한 버튼을 설정하는 태그입니다(display: inline-block;).

속성	의미	값
🔑 type	버튼의 타입	button(기본값), submit, reset
name	폼 데이터와 함께 전송되는 버튼의 이름
autofocus	페이지가 로드될 때 자동 포커스 여부	불린속성
disabled	버튼 비활성화	불린속성
form	`<form>`의 id 속성값

type 속성으로 버튼의 타입을 설정할 수 있습니다.
- button의 값은 일반적인 버튼
- reset은 초기화를 용도로 하기 위한 버튼
- submit은 서버로 데이터를 제출(전송)하기 위한 버튼으로 사용합니다.

<input type="button | submit |reset" />과 <button>과의 가장 큰 차이점은 input 태그의 경우 빈 요소로 value 속성에 값을 작성하여 버튼에 표시될 내용을 작성하는데 이때 텍스트만을 작성할 수 있습니다.

반면에 button 요소는 Content 영역에 텍스트뿐만 아니라 다른 요소(em, strong, img 등)도 포함할 수 있습니다.

5. `<textarea> </textarea>`

여러 줄의 일반 텍스트 양식을 생성하는 태그입니다(display: inline-block;).
한 줄의 경우 input 태그를 사용해줍니다.
textareat 태그는 빈 요소로 사용하지 않으므로 Content 영역에 내용을 작성할 수 있습니다. 이때 작성할 수 있는 것은 텍스트만 가능하며, 다른 HTML 요소를 작성하더라도 일반적인 텍스트로서 해석됩니다.

속성	의미	값
autofocus	페이지 로드시 자동 포커스	불린속성
autocomplete	자동 완성 기능 사용 여부	불린속성
disabled	양식 비활성화	불린속성
form	`<form>`태그의 id 속성값
maxlength	입력 가능한 최대 문자수
placeholder	사용자가 입력할 값의 힌트
readonly	수정 불가능한 읽기 전용 양식	불린속성
rows	양식의 줄 수	2(기본값)
cols	양식의 행 수

rows 속성은 총 몇줄의 텍스트 양식을 가질 지 설정하는 속성입니다. 기본값은 2로 설정되어 있습니다. 2줄의 텍스트만 입력할 수 있다는 것이 아니라 2줄만 보이게 된다는 것을 의미합니다.

6. `<fieldset> </fieldset>`

같은 목적의 양식을 그룹화하는 태그입니다(display: block;).
속성 의미 값
disabled 그룹 내 모든 양식 요소를 비활성화 불린속성
form 그룹이 속할 하나 이상의 <form>의 id 속성값
name 그룹의 이름
disabled 속성은 통해 그룹내 모든 양식을 비활성화할 수 있습니다.
name 속성으로 그룹의 이름을 설정합니다. 실질적인 데이터와는 상관이 없고 fieldset의 이름을 설정하는 속성입니다.

속성	의미	값
disabled	그룹 내 모든 양식 요소를 비활성화	불린속성
form	그룹이 속할 하나 이상의 `<form>`의 id 속성값
name	그룹의 이름

7. `<legend> </legend>`

그룹화된(<fieldset>) 양식의 제목을 설정하는 태그입니다(display: block;).

<form>
    <fieldset>
        <!-- Size 그룹 -->
        <legend>Size</legend>
        
    	<label>
            <input type="radio" name="size" value="small" />
            Small
        </label>
        
        <label>
            <input type="radio" name="size" value="medium" />
            Medium
        </label>
        
        <label>
            <input type="radio" name="size" value="large" />
            Large
        </label>
    </fieldset>
    
    <fieldset>
        <!-- Ice or Hot 그룹 -->
        <legend>Hot &amp; Ice</legend>
        
        <input type="radio" name="hot-ice" id="hot" />
        <label for="hot">Hot</label>
        
        <input type="radio" name="hot-ice" id="ice" />
        <label for="ice">Ice</label>
    </fieldset>
</form>

위 예제는 아래 처럼 화면에 표시됩니다.

Size Small Medium Large Hot & Ice Hot Ice

8. `<select> </select>`

옵션(<option>)을 선택하는 메뉴를 제공하는 태그입니다(display: inline-block;).
option이라는 태그를 select 태그로 래핑하여 옵션을 하나 선택할 수 있는 메뉴를 만듭니다.

속성	의미	값
🔑 name	선택 메뉴의 이름, key 값
autocomplete	자동 완성 기능을 사용할 것인지 여부	on(기본값), off
disabled	양식 비활성화	불린속성
form	`<form>`태그의 id 속성값
multiple	다중 선택 여부	불린속성
size	한 번에 볼 수 있는 행(`<option>`)의 개수	0(기본값, 1과 같음)

기본적으로 select 메뉴는 하나의 옵션만 선택할 수 있습니다. multiple 속성을 작성하면 다중 옵션을 선택할 수 있습니다. 불린 속성으로 사용합니다.
name 속성으로 서버에 전송할 데이터의 이름, key를 설정할 수 있습니다. 즉, select 태그의 name 속성은 input 태그의 name 속성과 동일한 역할을 합니다.

9. `<datalist> </datalist>`

<input />에 미리 지정된 옵션을 지정하여 자동 완성 기능을 제공하는 데 사용하는 태그입니다(display: none;).
input 태그와 함께 사용되는 태그이며 단독으로 사용하지 않습니다.
input 태그의 list 속성 값으로 datalist 태그의 id 속성값을 작성하여 연결시킵니다.

<!-- datalist 태그의 id 속성값 names를 datalist 속성값으로 작성 -->
<input list="names" type="text" name="user-name" />

<datalist id="names">
    <option>Kim</option>
    <option>Lee</option>
    <option>Park</option>
</datalist>

10. `<optgroup> </optgroup>`

<option>태그를 그룹화하는 태그입니다(display: block;).
속성 의미 값
label 옵션 그룹의 이름 설정
disabled 옵션 그룹을 비활성화 불린속성
label 속성으로 해당 옵션 그룹의 제목을 설정합니다. 설정한 제목은 화면에 표시됩니다. label 속성은 필수로 작성해야하는 필수 속성입니다.

속성	의미	값
label	옵션 그룹의 이름 설정
disabled	옵션 그룹을 비활성화	불린속성

11. `<option> </option>`

선택 메뉴(<select>)나 자동 완성(<datalist>)에서 사용될 옵션을 만드는 태그입니다(display: block;).
속성 의미 값
🔑 value 양식으로 제출될 값
label 표시될 옵션의 제목
selected 옵션이 선택되었음을 표시 불린속성
disabled 욥션 비활성화 불린속성
label 속성은 화면에 표시될 텍스트를 설정합니다.
value 속성은 서버로 실질적으로 보내질 특정한 값을 설정하는 태그입니다. 즉, input 태그의 value 속성과 같은 역할을 합니다. value 속성값이 빈 문자열인 경우 없는 값으로 취급하게 됩니다.

속성	의미	값
🔑 value	양식으로 제출될 값
label	표시될 옵션의 제목
selected	옵션이 선택되었음을 표시	불린속성
disabled	욥션 비활성화	불린속성

option 태그는 선택적으로 빈 태그로 사용할 수 있습니다.

<option label="Apple" value="Apple" />

즉, label과 value를 작성하는 경우 빈 태그로서 사용할 수 있습니다.

<!-- Apple 텍스트가 label과 value 역할 -->
<option>Apple</option>

만약 value 속성을 명시하지 않은 경우 option 태그의 Content 영역에 작성한 텍스트가 label, value 속성의 역할을 동시에 합니다.

즉, 우선적으로 value 속성값을 확인한 뒤 value 속성을 명시하지 않은 경우 Content 영역에 작성된 내용을 value 값으로서 사용하게 됩니다.

김동현

Frontend Dev

이전 포스트

표 콘텐츠

다음 포스트

양식

HTML5

1. `<form> </form>`

2. `<input />`

3. `<label> </label>`

4. `<button> </button>`

5. `<textarea> </textarea>`

6. `<fieldset> </fieldset>`

7. `<legend> </legend>`

8. `<select> </select>`

9. `<datalist> </datalist>`

10. `<optgroup> </optgroup>`

11. `<option> </option>`

표 콘텐츠

Global Attributes

0개의 댓글

양식

HTML5

1. <form> </form>

2. <input />

3. <label> </label>

4. <button> </button>

5. <textarea> </textarea>

6. <fieldset> </fieldset>

7. <legend> </legend>

8. <select> </select>

9. <datalist> </datalist>

10. <optgroup> </optgroup>

11. <option> </option>

표 콘텐츠

Global Attributes

0개의 댓글

1. `<form> </form>`

2. `<input />`

3. `<label> </label>`

4. `<button> </button>`

5. `<textarea> </textarea>`

6. `<fieldset> </fieldset>`

7. `<legend> </legend>`

8. `<select> </select>`

9. `<datalist> </datalist>`

10. `<optgroup> </optgroup>`

11. `<option> </option>`