[HTML] 첫발 내딛기 <4. input 유형의 모든것>

1000의 얼굴을 가진 <input>. 어디까지 사용해 봤니?

어느 정도 HTML에 익숙해져서 웹사이트를 만들어 보았다면 분명 <input>을 사용해 봤을 것이다.

<input>은 생각 외로 자주 사용되는 요소다. 우리가 흔하게 볼 수 있는 로그인 페이지에서, 날짜를 선택할 때, 여러 옵션을 선택할, 등등 사용되는 요소가 <input>이다.

 

그럼 <input>은 대체 어디까지 사용 가능할까?

지금부터 하나하나씩 <input>의 다양한 유형들을 알아보자.

 

텍스트 유형

<input> 요소의 기본 유형은 텍스트이다. 하지만 텍스트도 다 같은 텍스트는 아니다.

일반 텍스트도 있고, 이메일도 있고, 비번도 있고.

텍스트 유형들은 다음과 같이 사용할 수 있다.

<!-- 일반 텍스트 유형 -->
<input type="text" />

<!-- 이메일 유형 -->
<input type="email" />

<!-- 비번 유형 -->
<input type="password" />

<!-- URL 유형 -->
<input type="url" />

일반 텍스트 유형은 말 그대로 텍스트를 입력할 때 사용하는 유형이다.

 

이메일 유형은 이메일 주소를 입력할 때 사용하는 유형이다. 이 유형은 이메일이 필수 양식란일 때 이메일 주소 형식을 체크해 주는 기능이 있다.

예를 들어 사용자가 이메일 주소대신 "example"만 입력했을 때 올바른 이메일 형식이 아니라는 경고 메시지가 뜬다.

하나 단점이 있다면 이메일 주소 형식을 정확하게 확인 못한다는 것이다. 그냥 "example@email"만 입력해도 아무런 문제 없이 통과할 수 있다.

이 단점을 보완할 수 있는 방법은 다음에 알려주겠다.

 

비번 유형은 말 그대로 비밀번호를 입력할 때 사용한다.

이 유형은 자동으로 입력된 모든 것을 숨겨 전부 검은 점으로 나타낸다.

보안이 필수인 비밀번호에 딱 맞는 유형이다.

 

URL유형은 웹주소를 입력할 때 사용한다.

브라우저지원에 따라 양식이 제출될 때 자동으로 확인을 할 수도, 안 할 수도 있다.

입력된 URL주소는 "http"로 시작되어야 한다.

한 가지 단점은 ". com"이나 ". net"과 같은 URL의 끝 부분을 입력하지 않아도 검사에 안 걸린다는 것이다.

이 단점을 보완할 수 있는 방법은 다음에 알려주겠다.

 

날짜/시간 유형

날짜가 필요한 경우는 종종 있지만 항상 같은 형식을 사용하지는 않는다.

어떤 때는 연도-월-일 전부 필요하고, 어떤 때는 연도-월 만 필요하고.

날짜 유형은 다음과 같이 사용할 수 있다.

<!-- 연도, 월, 일 선택 가능 -->
<input type="date" />

<!-- 연도, 월, 일, 시, 분 선택 가능 -->
<input type="datetime-local" />

<!-- 연도, 월 선택 가능 -->
<input type="month" />

<!-- 주 선택 가능 -->
<input type="week" />

<!-- 시, 분 선택 가능 -->
<input type="time" />

 

 

 

버튼 유형

버튼은 주로 우리가 알고 있는 <button> 요소를 사용해서 만든다.

하지만 <input>으로도 버튼을 만들 수 있다.

버튼 유형은 다음과 같이 사용할 수 있다.

<!-- 일반 버튼 -->
<input type="button" value="Click" />

<!-- 양식 제출 버튼 -->
<input type="submit" />

<!-- 양식 초기화 버튼 -->
<input type="reset" />

일반 버튼 유형은 <button>과 다를 바 없는 그냥 일반 버튼이다.

 

양식 제출 유형은 클릭했을 때 양식을 제출한다.

<form> 안에서 사용했을 때 정상적으로 작동한다.

 

양식 초기화 유형은 양식을 초기화한다.

이것 역시 <form> 안에서 사용했을 때 정상적으로 작동한다.

 

선택 유형

<!-- 체크박스 -->
<input type="checkbox" value="checkbox1" />

<!-- 라디오 -->
<input type="radio" value="radio1" name="option" />

<!-- 슬라이더 -->
<input type="range" min="0" max="100" />

<!-- 파일 -->
<input type="file" />

<!-- 색상 -->
<input type="color" />

체크박스 유형은 유저가 여러 옵션들을 선택할 수 있게 해 준다.

간혹 양식에 "해당되는 모두를 선택하세요"라는 문구를 볼 수 있다.

주로 이런 문구 아래에는 여러 개의 선택 사항들이 나열돼 있고 그 옆에 작은 박스가 있는 걸 볼 수 있다.

그 작은 박스에 체크 표시를 해서 선택하는 것처럼, 체크박스 유형도 같은 원리이다.

 

라디오 유형은 여러 개의 선택 사항들 중 단 하나만 선택할 수 있다.

병원 같은데 가면 양식에 "성별: 남, 여"를 볼 수 있고, 우리는 그중 하나를 동그라미 친다.

같은 원리이다.

 

슬라이더 유형은 슬라이더를 움직여 값을 선택할 때 사용한다.

"min", "max"를 사용해서 최솟값과 최댓값을 정할 수 있다.

예를 들어 볼륨 컨트롤을 만들 때 사용할 수 있다.

 

파일 유형은 말 그대로 파일을 선택할 수 있다.

여기 티스토리에서 파일을 첨부할 때 첨부메뉴에서 파일을 클릭하면 내 컴퓨터에 있는 파일을 선택할 수 있는 팝업창이 뜨는 걸 볼 수 있다. 이 기능은 파일 유형을 사용해서 만들어진 것이다.

 

색상 유형은 말 그대로 색을 선택할 수 있는 유형이다.

색상의 코드는 RGB, HSL, HEX 이렇게 3가지를 사용할 수 있다.

 

숫자 유형

<input>의 숫자 유형은 단 두 가지밖에 없다.

일반 숫자, 그리고 전화번호.

숫자 유형은 다음과 같이 사용할 수 있다.

<!-- 숫자 -->
<input type="number" />

<!-- 전화번호 -->
<input type="tel" />

숫자 유형은 말 그대로 그 어떤 숫자를 입력할 수 있다.

이 유형을 사용하면 텍스트는 입력이 안 되는 걸 볼 수 있다.

"min", "max"를 사용해서 최솟값과 최댓값을 정할 수 있다.

간혹 브라우저에 따라 사용자가 입력한 값이 최솟값과 최댓값을 벗어난 경우 경고메시지를 보여주기도 한다.

 

전화번호 유형은 전화번호를 입력할 때 사용한다.

이 유형을 사용했을 때 사용자 입력에 아무런 제약이 없는 걸 볼 수 있다.

일반 텍스트유형과 다를 바 없어 보인다.

이 단점 또한 보완될 수 있고, 그 방법은 다음에 알려주겠다.

 

---

 

<input> 하나로 이렇게나 많은 것들을 구현할 수 있다.

이번 편에서는 <input>의 유형들을 알아봤다.

다음 편에서는 사용할 수 있는 속성들과 그 속성들을 어떻게 사용하는지 알아보겠다.

 

https://youtube.com/shorts/tdc78D1E8VU?feature=share