오늘은 html 6장 input 태그에 대해 알아보겠다.
+ 교재에 없는 내용도 추가되어있다.
<input> 태그
inpur 태그에는 type 속성에 따라 매우 다양한 스타일을 지정할 수 있다.
각 스타일의 속성과 사용 방법을 알아보도록 하자.
<input> 태그의 기본형
text 타입
text타입은 input의 가장 기본적인 타입이다.
<input type="text" value="검색"/>
따라서 type을 생략해도 기본적으로 text타입으로 설정된다.
<input value="검색"/>
그러나 코드를 한 눈에 알아보기 쉽도록 text타입을 명시해 주는 것이 좋다.
보통 text타입은 한 줄의 글을 입력받을 때 사용되는데, 여러 줄의 글을 입력 받으려면 input의 text타입이 아니라 textarea 태그를 사용해 주어야 한다.
<textarea cols="40" rows="4"></textarea>
이렇게 하면 여러줄의 코드 작성이 가능한 텍스트 필드가 생성된다.
이렇게 말이다.
명시되어 있는 cols나 rows가 항상 글자 수와 일치하는 것은 아니다.
폰트 타입이나 사이즈에 따라 달라질 수 있다.
<input> 태그의 입력창 타입
number 타입
number 타입은 숫자를 입력받도록 해준다.
스핀박스를 이용해 값을 조절할 수 있다.
<input type="number"/>
예시:
password 타입
password 타입은 이름 그대로 비밀번호 입력을 할 수 있게 해준다.
입력창의 모든 글자는 자동으로 *으로 마스킹된다.
<input type="password"/>
예시:
tel 타입
tel 타입은 전화번호 입력을 구현하게 해준다.
이 필드를 만나면 쿼터 자판 대신 다이얼패드를 띄워 준다.
<input type="tel"/>
search 타입
search 타입은 검색창을 입력하도록 해준다.
위에서 배운 text타입은 검색창을 입력하기에는 부적절하다.
search 타입을 사용하면 검색에 필요 없는 줄 바꿈(엔터)를 제거하고 검색(search)가 표시된다.
또한 검색어 우측에 X 표시가 나타나서 입력한 내용을 편하게 지울 수 있도록 해준다.
<input type="search" value="검색하세요"/>
예시:
email 타입
email 타입은 이름 그대로 이메일 주소를 입력 받도록 도와준다.
이메일의 유효성을 검증하는 기능이 작동된다.('@' 표시가 있는지 등)
<input type="email" value="이메일 주소"/>
예시:
url 타입
url 타입은 입력받은 자료가 url 형태인지 검증하기 위한 기능이 제공된다.
<input type="url" value="url"/>
예시:
hidden 타입
hidden 타입을 사용하면 감춰지는 필드가 생성된다.
즉, 사용자의 눈에는 보이지 않는다.
그렇다면 hidden 필드를 왜 사용하는가?
바로 서버에 데이터를 넘기기 위해 사용한다.
<input type="hidden"/>
<input> 태그의 버튼 타입
button 타입
button 타입을 사용하면 실제 버튼과 같은 모양이 화면에 나타난다.
<input type="button" value="버튼"/>
예시:
submit 타입
submit 타입은 겉으로는 button 타입과 동일하게 생겼으나, 이는 제출할 때 사용된다.
제출 버튼은 나중에 <form> 태그와 함께 사용되므로 나중에 더 배우도록 하자.
<input type="submit" value="제출"/>
예시:
file 타입
file 타입은 파일 업로드를 위한 타입이다.
이를 이용해 이메일이나 게시판에 첨부파일 등록 등에 사용되는 파일 업로드 버튼을 표현할 수 있다.
<input type="file"/>
예시:
또한 accept 속성을 추가하여 입력받을 파일의 종류를 제어할 수 있다
- 이미지 파일:
<input type="file" accept="image/*"/> - 오디오 파일:
<input type="file" accept="audio/*"/> - 비디오 파일:
<input type="file" accept="video/*"/> - 확장자 직접 입력:
<input type="file" accept=".jpg, .png, .pdf"/>
color 타입
color 타입은 사용자로부터 색상을 입력받도록 해준다.
버튼을 클릭하면 색상을 선택할 수 잇도록 팔레트 창이 화면에 표시된다.
<input type="color"/>
예시:
<input> 태그의 선택지 입력 타입
checkbox 타입
checkbox 타입은 Yes/No 로 구성된 2지 선다형을 제공한다.
<input type="checkbox"/>
화면에는 다음과 같이 표시된다:
체크박스 옆에 글자를 적어 주고 싶으면 label 태그를 이용한다.
또한 checked 속성을 태그 안에 기재하여 체크박스가 기본적으로 체크되어 있도록 할 수 있다.
<input type="checkbox" checked/>
->
radio 타입
radio 타입은 여러 선택지 중 하나를 선택해야 할 때 사용된다.
<input type="radio" name="radio"/>html
<input type="radio" name="radio"/>css
<input type="radio" name="radio"/>js
출력: html css js
radio 타입은 name이 동일한 대상들을 하나의 그룹으로 인식하고, 하나의 그룹 안에서 반드시 하나의 선택지만 선택되도록 세팅되어 있다.
(다른 선택지를 선택하면 기존 선택지가 해제된다.)
range 타입
range 타입은 슬라이더 형태의 입력 도구를 제공해 준다.
흔히 우리가 알고 있는 윈도우의 빛/음량 조절 도구를 생각하면 된다.
<input type="range"/>
화면 표시:
- max와 min 속성을 이용해 슬라이더의 최댓값과 최솟값을 지정할 수 있다.
- step 속성을 이용해 슬라이더가 한 칸 움직일 때 얼마나 바뀌는지 간격을 지정할 수 있다.
- value 속성을 이용해 슬라이더의 초깃값을 설정할 수 있다.
<input type="range" min="0" max="100" step="20"/>
위와 같이 설정하면 슬라이더가 아래와 같은 형식으로 나온다.
슬라이더를 움직이면 아까와는 다르게 정적으로 움직이는 것을 확인할 수 있다.
<input> 태그의 날짜와 시간 입력 타입
날짜와 시간과 관련된 태그에서도 min과 max 속성을 이용해 범위를 제한할 수 있다.
date 타입
date 타입은 연도, 월, 일을 선택하도록 해준다.
<input type="date"/>
표시:
month 타입
month 타입은 연도와 월까지만 선택하기 위한 도구이다.
<input type="date"/>
표시:
week 타입
week 타입은 연과 주를 입력 받는 타입이다.
우리나라에서는 잘 사용하지 않는다.
<input type="date"/>
표시:
time 타입
time 타입은 시간을 설정하는 도구이다.
오전/오후와 시간과 분까지 설정 가능하다.
<input type="date"/>
표시:
datetime-local 타입
이 타입은 날짜와 시간을 동시에 입력할 때 사용한다.
<input type="datetime-local"/>
이렇게 input 태그의 여러가지 타입을 통해 원하는 요소를 구현하는 방법을 알아보았다.
다음에는 CSS 태그에 대해 더 자세히 다루도록 하겠다.
