[HTML 기초] Input 태그 Type 속성들의 종류들과 사용 예시

●  목적

HTML에서 사용되는 Input 태그 요소의 Type 속성값들의 종류들을 확인하고, 사용하는 방법에 대해 알아본다.

---

●  Input 태그의 Type 종류

<input type = "button">
<input type = "checkbox">
<input type = "color">
<input type = "date">
<input type = "datetime-local">
<input type = "email">
<input type = "file">
<input type = "hidden">
<input type = "image">
<input type = "month">
<input type = "number">
<input type = "password">
<input type = "radio">
<input type = "range">
<input type = "reset">
<input type = "search">
<input type = "submit">
<input type = "tel">
<input type = "text">
<input type = "time">
<input type = "url">
<input type = "week">

※ VS Code의 태그 순서대로 나열함.

 

---

●  Input 태그의 Type 종류별 사용방법과 예시

상기 살펴보았던 HTML 언어의 Input 태그의 Type 종류마다 수행하는 역할과, 사용방법에 대해 간단히 알아보도록 하자.

 

---

 

▣ <input type = "button">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="button" onclick="alert('버튼을 클릭했습니다.')" value="버튼 클릭">

위와 같이, 우리가 일반적으로 알고 있는 버튼을 정의하기 위해 사용하는 태그. onclick은 마우스 클릭 시 수행할 동작으로, 상기 코드에서는 '버튼을 클릭해 보세요.' 버튼을 클릭 시 '버튼을 클릭했습니다.' 라는 메시지박스가 출력되게 작성되었다.

<input type="button" value="버튼 클릭">

onclick을 생략하고 아래와 같이 코드를 작성해도 된다. value 값에는 버튼에 보여질 이름을 설정한다. value 값을 따로 지정하지 않으면 기본값으로 생성된다.

 

▣ <input type = "checkbox">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 : 체크박스 1입니다. 체크박스 2입니다.

<input type="checkbox" name="checkbox1" value="체크박스 1">체크박스 1입니다.
<input type="checkbox" name="checkbox2" value="체크박스 2">체크박스 2입니다.

한 개 이상 복수 선택할 수 있는 체크박스를 생성한다. 단순히 하나만 선택해야 할 때에는 'radio' 타입을 사용하니, 아래를 참고하면 좋겠다.

 

▣ <input type = "color">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="color" name="mycolor">

지원되는 브라우저에 따라, 색상을 선택할 수 있는 팔레트 화면이 띄워진다.

※ 브라우저 지원에 따라 다를 수 있음.

 

 

▣ <input type = "date">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="date" name="datePicker">

연 / 월 / 일의 날짜를 선택할 수 있는 선택기가 띄워진다.

 

▣ <input type = "datetime-local">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="datetime-local" name="dateTimePicker">

연 / 월 / 일 날짜 뿐만 아니라, 시간까지 선택할 수 있는 선택기가 띄워진다.

 

▣ <input type = "email">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="email" name="EMailAddress">
<input type="submit" value="확인">

입력 필드에 이메일 형식의 값을 받아, submit버튼을 누르면 이메일 주소가 맞는지 검증한다.

※ 브라우저 지원에 따라 다를 수 있음.

 

▣ <input type = "file">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="file" name="fileUpload">

웹에 파일을 업로드 할 수 있는 파일 업로더 창을 띄운다.

 

▣ <input type = "hidden">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="hidden" name="hiddenTest">

웹에 방문한 방문객들에게는 보이지 않는, 숨겨진 입력 필드를 생성한다. 페이지 콘텐츠 자체에서 전혀 보이지 않으며, 보이게 할 수 있는 방법도 없다.
주로, 사용자에게 노출되거나 변경해서는 안 되는 데이터를 함께 전송할 때 사용되는 태그이다.

 

▣ <input type = "image">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="image" src="이미지주소" alt="제출버튼(이미지 표시 오류)" height="50" width="100">

<input type="submit"> 과 같은 역할을 하지만, image태그를 사용하면 이미지로 된 submit 버튼이 생성된다.
alt에는 어떤 이유에서든 이미지 파일을 브라우저에서 불러와 띄우기 실패할 경우, 이미지 대신에 화면에 보여질 내용을 적는다.

 

▣ <input type = "month">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="month" name="monthyear">

연 / 월 까지 선택할 수 있는 선택기가 띄워진다.

 

▣ <input type = "number">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="number" name="numberField">

숫자만 입력할 수 있는 입력 필드를 생성한다. 우측의 + / - 버튼을 통해서도 숫자값을 조정할 수 있다.

 

▣ <input type = "password">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="password" name="passwordField">

입력 필드에 입력된 값이 화면에 보여지지 않게 한다.

 

▣ <input type = "radio">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 : 라디오 버튼 1입니다.

<input type="radio" name="radiobtn1" value="라디오 버튼 1">라디오 버튼 1입니다.

여러 선택지 중, 하나의 선택지만 고를 수 있게 하는 라디오 버튼을 생성한다.

 

▣ <input type = "range">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="range" name="rangePicker" min="0" max="50">

값을 슬라이더로 조정할 수 있는 슬라이더 객체를 생성한다. min에는 최소값, max에는 최대값, value에는 초기값을 넣어 사용한다. value값을 따로 지정하지 않을 경우 기본값으로 생성된다.

 

▣ <input type = "reset">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="reset" name="초기화">

입력 폼에 입력된 내용을 초기화 시킨다.

 

▣ <input type = "search">

<input type="search" name="searchBox">

텍스트 필드에 입력된 내용을 서버에 전송한다. 일반적인 텍스트 필드와 기능적 차이는 없다. 대신, 텍스트 필드의 우측에 'X' 초기화 버튼이 생성된다.

 

▣ <input type = "submit">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 : 이름 :

<input type="submit" value="회원가입">

입력 폼에 입력된 폼 데이터를 서버로 제출한다. <input type="button"> 과 모양은 같아도 기능은 전혀 다르니 유의.

 

▣ <input type = "tel">

<input type="tel" name="telphonenum">

서버로 폼 데이터를 제출 (submit) 하기 전, 텍스트 필드에 입력된 입력값이 유효한 전화 주소인지 확인한다.

 

▣ <input type = "text">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="text" name="textField">

일반적인 텍스트 필드를 생성한다.

 

▣ <input type = "time">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="time" name="timePicker">

시간을 선택할 수 있는 시간 선택기 창을 띄운다.

 

▣ <input type = "url">

<input type="url" name="urladdress">

서버로 폼 데이터를 제출 (submit) 하기 전, 텍스트 필드에 입력된 입력값이 유효한 URL 주소인지 확인한다.

 

▣ <input type = "week">

ㆍ사용자의 브라우저에서 직접 보여지는 예시 :

<input type="week" name="weekPicker">

현재 몇째 주인지 선택할 수 있는 선택기를 띄운다.