[HTML / 시맨틱 마크업] 폼 (Form) - 기본 구조, Input, Label

 

기본 구조

📌 <form action="" method=""></form>

• 사용자로부터 인풋(Input)을 받기 위한 태그
• form 요소 스타일링 시 모든 elements의 유효성을 나타내는 CSS의 :valid와 :invalid 의사 클래스를 사용할 수 있다.

 

 

1) action (필수)

📌 action="API 주소"

• 해당 form을 처리할 로직이 있는 API의 서버 쪽에 접근 가능한 URL을 명시한다.
• <button>, <input type="submit">, <inpnut type="image"> 요소의 formaction 특성으로 재정의할 수 있다.

 

 

[참고] formaction

• <button>이 제출 버튼인 경우, 제출한 정보를 처리할 URL을 명시한다.
• URL을 지정한 경우, 버튼의 양식 소유자가 가진 action 특성보다 우선한다.
• 양식 소유자가 존재하지 않으면 영향을 주지 않는다.

 

 

 

2) method (필수)

📌 method="GET | POST"

양식을 제출할 때 사용할 HTTP 메서드이다.

 

 

POST

• 양식 데이터를 요청 본문으로 전송한다.
• URL에 변수(데이터)를 노출하지 않고 요청한다. (암호화 까지는 X)
• 데이터를 body에 포함한다.
• 캐싱할 수 없다.

 

 

GET

• 양식 데이터를 action의 URL과 ? 구분자 뒤에 이어 붙여서 전송한다. (쿼리스트링으로 전송)
• URL에 변수(데이터)를 포함시켜 요청한다.　👉 보안에 취약하다.
• 데이터를 header에 포함한다.
• 캐싱할 수 있다.

 

 

 

3) 그 외 attribute

autocomplete

• 입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타내며, 각 요소의 autocomplete 특성이 <form>에 정의된 값을 재정의한다.
• off : 브라우저가 각 항목에 자동으로 값을 채워 넣지 않는다. (로그인 양식으로 의심되는 경우 보통 무시한다.)
• on : 사용자의 과거 입력값에 기반하여 브라우저가 자동으로 값을 채워 넣는다.

 

 

enctype

• method 특성이 post인 경우, enctype은 양식 제출 시 데이터의 MIME 유형을 나타낸다.
• <button>, <input type="submit">, <input type="image"> 요소의 formenctype 특성으로 재정의할 수 있다.

　👉 application/x-www-form-urlencoded : 기본값

　👉 multipart/form-data : <input type="file">이 존재하는 경우 사용한다.

　👉 text/plain : HTML5에서 디버깅용으로 추가된 값이다.

 

 

[참고] MIME (Multipurpose Internet Mail Extensions)

• 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이다.
• 웹에서의 파일 확장자는 별 의미가 없으므로 각 문서와 함께 올바른 MIME 타입을 전송하도록 서버가 정확히 설정하는 것이다.
• 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대개 MIME 타입을 설정한다.

 

 

novalidate

• 지정한 경우 양식의 유효성 검증을 건너뛴다.
• 특성을 지정하지 않은(양식의 검증을 수행하는) 경우에도 <button>, <input type="submit">, <input type="image> 요소의 formvalidate 특성으로 재정의할 수 있다.

 

 

target

• 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 나타낸다.
• 가능한 값은 브라우징 맥락 (탭, 창, <iframe>)의 이름 또는 키워드이다.
• 지정한 경우, 버튼의 양식 소유자가 가진 target 속성보다 우선한다.
• <button>, <input type="submit">, <input type="image"> 요소의 formtarget 특성으로 재정의할 수 있다.
• 키워드

　👉 _self : 응답을 현재 브라우징 맥락에 표시하며, 기본값이다.

　👉 _blank : 응답을 새로운 트라우징 맥락에 표시한다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있다.

　👉 _parent : 응답을 현재 브라우징 맥락의 부모에 표시한다. 부모가 존재하지 않을 경우 _self와 동일하게 이루어진다.

　👉 _top : 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시한다. 부모가 존재하지 않을 경우 _selft와 동일하게 이루어진다.

 

 

 

---

Input

📌 <input type="type />

• == 입력창 == Input field
• 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
• <input> 요소가 강력한 이유는 다양한 속성 때문이며, 그중에서도 type이라는 attribute가 제일 중요하고 꼭 명시해야 한다.

 

 

 

주요 type

<!-- input 태그에 공통적으로 사용할 수 있는 attribute -->
<input type="text" placeholder="ID를 입력하세요" minlength="5" maxlength="13" required />
<input type="text" placeholder="이름을 입력하세요" />
<input type="text" value="직장인" disabled />
<input type="email" placeholder="이메일을 입력하세요">
<input type="password" placeholder="비밀번호를 입력하세요" />
<input type="url" placeholder="포트폴리오 URL을 적어주세요" />
<input type="number" placeholder="나이를 입력하세요 (12세 이상~49세 이하)" min="12" max="49" />
<input type="file" accept=".png, .jpg">
<input type="submit" value="제출하기">

 

• text, email, password, url, number, file, submit

　👉 file에서 accept을 이용해 업로드할 파일의 형식을 제한할 수 있다.

　👉 (cf. image/*, audio/*, video/* 등은 모든 이미지 파일, 모든 오디오 파일, 모든 비디오 파일을 허용하겠다고 지정하는 것이다.)

 

 

[참고] input:submit과 button의 차이

• 먼저, 기능적인 차이는 없다.
• 다만 W3C의 공식문서에 따르면 button이 '더 풍부한 렌더링(=richer rendering)'을 할 수 있다고 명시하고 있다.
• 여기서 풍부한 렌더링이란, 아래 예시코드와 같이 이미지 요소를 포함한 다른 요소를 손쉽게 넣을 수 있기에 더 풍부한 렌더링 옵션을 제공한다고 말할 수 있다.

<button type="submit">
  <img src="/assets/images/icon-confirm" alt="" />
  제출하기
</button>

• 기능 상 완전히 동일하다면 의미가 더 명확한 button을 쓰는 게 더 나을 수도 있다. (개인적인 선호)

 

 

그 외 type

checkbox	단일값을 선택하거나 선택 해제할 수 있음
color	색을 지정할 수 있는 컨트롤로, 브라우저가 지원하는 경우 활성화 시 색상 선택기를 열어준다.
date	날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤로, 브라우저가 지원하는 경우 활성화 시 날짜를 선택할 수 있는 달력 등을 열어준다.
datetime-local	날짜와 시간을 지정할 수 있는 컨트롤로, 시간대는 지정할 수 없다. 브라우저가 지원하는 경우 활성화 시 날짜를 선택할 수 있는 달력과 시계 등을 열어준다.
hidden	보이지 않지만 값은 서버로 전송하는 컨트롤이다.
image	src 특성에 특정한 이미지로 나타나는 시각적 제출 버튼으로, 이미지의 src를 누락한 경우 alt 특성의 텍스트를 대신 보여준다.
month	연과 월을 지정할 수 있는 컨트롤로, 시간대는 지정할 수 없다.
radio	같은 name값을 가지 여러 개의 선택 중에서 하나의 값을 선택하게 하는 라디오 버튼이다.
range	값이 가려진 숫자를 입력하는 컨트롤로, 디폴트값이 중간 값인 범위 위젯으로 표시된다. 접속사 min과 max 사이에 사용되며 수용 가능한 값의 범위를 정의한다.
reset	양식의 내용을 디폴트값(기본값)으로 초기화하는 버튼이나 권장되지는 않는다.
search	검색 문자열을 입력하는 한 줄 텍스트 필드로, 줄바꿈 문자는 입력값에서 자동으로 제거된다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함되며, 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신 검색 아이콘을 표시한다.
tel	전화번호를 입력하는 컨트롤로, 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다.
time	시간대가 없는 시간값을 입력하는 컨트롤이다.
week	시간대가 없는 주-연의 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤이다.

 

 

 

추가 특성

▼ 하단 캡처 참고

 

 

tel의 pattern

📌 <input type="tel" pattern="[0-9]{3}-[0-9]{3,4}-[0-9]{4}" />

• 위와 같이 tel에게 pattern을 걸어 '010-1234-5678' 등의 입력을 유도할 수 있다.
• 휴대폰 가운데자리 숫자가 3자리 또는 4자리일 수 있으므로 ','를 찍어 3, 4자리 모두 가능하게 설정한다.
• 이때, 정밀한 유효성검사가 아닌 패턴에 맞게 작성했는지 정도만 체크한다. (정밀한 검사는 js로)

 

 

 

---

Label

📌 <label for="input의 ID">라벨 이름</label>
　  <input type="text" id="input의 ID" />

• 사용자 인터페이스 항목의 설명을 나타낸다. (폼 양식의 특정 input에 이름을 붙임)
• 이때, for에 ID값을 적더라도 #를 붙이지 않는다.
• label 안에 input을 중첩시킬 수 있다. 이 경우는 연관이 암시적이므로 for 및 id 속성을 명시하지 않아도 된다.

<label>Do you like peas?
  <input type="checkbox" name="peas" />
</label>

 

 

label을 사용하는 이점

• 시각적으로 관련이 있을 뿐만 아니라 스크린리더는 폼 입력(form input)에서 label을 읽어서 보조기술 사용자가 입력해야 하는 텍스트가 무엇인지 더 쉽게 이해할 수 있도록 한다.
• 관련 label을 클릭하여 input 자체에 초점을 맞추거나 활성화를 시킬 수 있다.

 

 

 

---

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/form

<form> - HTML: Hypertext Markup Language | MDN

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME