[ HTML ] HTML form 과 다양한 입력 필드 타입 정리

<목차>

1	폼 요소 (form)	사용자의 데이터를 입력받는 HTML 요소
2	체크박스 입력 (type=“checkbox”)	여러 개의 선택지를 동시에 선택
3	라디오 버튼 입력 (type=“radio”)	한 그룹 내에서 하나의 선택지만 선택
4	색상 선택 (type=“color”)	색상 팔레트에서 색을 선택
5	날짜 및 시간 입력	날짜와 시간을 선택할 수 있는 입력
5.1	날짜 입력 (type=“date”)	날짜를 선택할 수 있음
5.2	날짜와 시간 입력 (type=“datetime-local”)	날짜와 시간을 함께 선택할 수 있음
5.3	월 선택 (type=“month”)	연도와 월만 선택할 수 있음
5.4	주 선택 (type=“week”)	해당 연도의 몇 번째 주 선택
5.5	시간 입력 (type=“time”)	시간만 입력할 수 있음
6	숫자 입력 (type=“number”)	숫자만 입력할 수 있으며, 범위 설정 가능
7	보안 관련 입력 (type=“password”)	입력값이 보이지 않도록 가려짐
8	전화번호 입력 (type=“tel”)	전화번호 입력을 위한 필드
9	URL 입력 (type=“url”)	URL 형식의 입력을 받음
10	검색 입력 (type=“search”)	검색에 최적화된 입력 필드
11	파일 업로드 (type=“file”)	파일 선택 버튼 제공
12	숨겨진 입력 필드 (type=“hidden”)	사용자에게 보이지 않는 입력 필드
13	이미지 버튼 (type=“image”)	이미지를 버튼으로 사용
14	모바일 환경에서의 입력 필드 최적화	입력 유형에 따라 스마트폰 키보드 최적화

 

 

form 요소

• <form> 태그는 사용자로부터 데이터를 입력받는 HTML 요소로, 여러 입력 필드를 한 번에 묶을 수 있어.
• <input> 태그의 type 속성에 따라 입력 방식이 달라짐. (ex. type="email"은 이메일 입력, type="password"는 비밀번호 입력)
• <label> 태그의 for 속성과 <input>의 id가 같으면 라벨을 클릭했을 때 입력 필드가 활성화됨
• 여러 정보를 함께 입력받는 경우, <form> 태그로 감싸는 것이 일반적
• <form>의 action 속성에 데이터를 전송할 서버 주소를 입력하면, 버튼 클릭 시 해당 주소로 데이터를 보낼 수 있음
• 하지만 SPA나 React와 같은 최신 개발 방식에서는 <form>을 사용하기보다는 다른 방식으로 데이터를 전송함

<form action="서버주소">
    <label for="userEmail">이메일 주소</label>
    <input type="email" id="userEmail">
    <button type="submit">저장</button>
</form>

 

위 코드에서 <form>은 서버 주소로 이메일을 전송할 때 사용되고, 이메일 입력 필드는 type="email"로 설정. action 속성에 서버 주소를 넣어야 데이터를 전송가능

 

체크박스

type="checkbox"

• 여러 개의 선택지를 동시에 선택
• <label> 태그를 <input> 태그와 연결하면 라벨을 클릭해도 체크 상태가 변경됨

<input type="checkbox" id="chk_html">
<label for="chk_html">HTML</label>
<input type="checkbox" id="chk_css">
<label for="chk_css">CSS</label>

• 위 코드에서 HTML 라벨을 클릭하면 체크박스가 활성화되지만, CSS 라벨은 연결되지 않아서 클릭해도 반응하지 않음
• 사용자의 편의성을 위해 <label>과 <input>을 제대로 연결해야 함

라디오 버튼

type="radio"

• 한 그룹 내에서 하나의 선택지만 선택
• 같은 그룹으로 묶기 위해 name 속성을 동일하게 설정해야 함
• name 속성이 없으면 각 버튼이 개별적으로 인식되어 다중 선택이 됨

색상 선택

type="color" 

• 색상 팔레트가 나타나 원하는 색을 선택

날짜 및 시간 입력

type="date"

• 캘린더를 통해 날짜를 선택할 수 있음

type="datetime-local"

• 날짜뿐만 아니라 시간을 함께 선택할 수 있음

type="month"

• 연도와 월만 선택할 수 있음

type="week"

• 해당 연도의 몇 번째 주인지 선택할 수 있음

type="time"

• 시간만 입력할 수 있음

숫자입력

type="number"

• 숫자만 입력할 수 있으며, min과 max 속성으로 범위를 설정할 수 있음
• ex) 쇼핑몰 사이트 수량 입력

<input type="number" min="0" max="100">

위 코드에서는 0 이하, 100 이상의 숫자를 입력할 수 없다.

보안 관련 입력

type="password"

• 입력값이 보이지 않도록 가려짐

전화번호 입력

type="tel"

• 전화번호 입력을 위한 필드.
• 숫자 외에 문자를 입력할 수도 있기 때문에, 유효성 검사는 JavaScript로 처리해야 함

URL 입력

type="url"

• URL 형식의 입력을 받음
• <form> 태그 내에서 submit 버튼을 눌렀을 때 올바르지 않은 URL이면 경고 메시지가 표시됨

검색 입력

type="search"

• 일반 text 입력과 유사하지만, 입력하면 X 버튼이 표시되어 빠르게 삭제할 수 있음

파일 업로드

type="file"

• 파일 선택 버튼을 제공하며, 클릭 시 파일 탐색기가 열림

숨겨진 입력필드

type="hidden"

• 사용자에게 보이지 않는 입력 필드
• 보통 개발자가 서버로 특정 데이터를 함께 전송할 때 사용함
• 예를 들어, 사용자는 상품과 수량만 입력하지만, 개발자는 주문한 사용자의 ID나 이메일 정보를 숨겨진 필드에 넣어 서버로 전송할 수 있음

이미지 버튼

type="image"

• 이미지를 버튼으로 사용할 때 사용하지만, 실무에서는 <img> 태그를 사용하는 것이 일반적

<div>
    <img src="./html/img/monkeyLogo.avif" alt="" style="width: 300px; height: auto;">
    <input type="image" src="./html/img/monkeyLogo.avif" style="width: 300px; height: auto;">
</div>

• 첫 번째 이미지는 일반적인 img 태그이며, 두 번째는 input type="image"을 사용한 것
• 실무에서는 input type="image"보다는 img 태그를 사용하고 CSS 및 JavaScript로 버튼 역할을 구현하는 것이 일반적

 

모바일 환경에서의 입력 필드 최적화

입력 유형에 따라 스마트폰 키보드가 달라짐

type="number"	숫자 키패드가 먼저 표시됨
type="tel"	전화번호 입력에 적합한 키패드(우물정 # 포함) 표시
type="email"	이메일 입력에 최적화된 키패드 (@, . 포함) 표시
type="search"	키보드에 ‘검색’ 버튼이 표시됨
type="date"	날짜 선택 UI 표시
type="month"	연도 및 월 선택 UI 표시
type="time"	시간 선택 UI 표시

 

=> 이처럼 입력 유형을 적절히 설정하면 모바일 환경에서의 UX가 크게 향상될 수 있음