<input>태그란?
- <input>태그는 주로 사용자로부터 값을 입력받을때 쓰는 태그이다. 사용양식은 아래와 같다.
<input type="유형" 속성="속성값">
<input> 태그는 타입에 따라 기능이 달라지기때문에 개발자는 알맞는 타입을 적용하여 코딩할 줄 알아야한다. <input> 태그의 타입 종류는 아래와 같다.
| 종류 | 기능 |
| text | 일반적인 텍스트 입력 |
| password | 텍스트와 동일하지만 입력한정보를 가려줌 |
| checkbox | 2개이상 선택할 수 있 양식 |
| radio | 1개만 선택할 수 있는 양식 |
| button | 누를 수 있는 버튼 양식 |
| submit | 서버 전송버튼 양식 |
| number | 숫자를 조절할 수 있는 양식 |
| file | 파일을 첨부 할 수 있는 양식 |
| range | 숫자 범위를 조절 할 수 있는 양식 |
이제 위 타입별로 예제와 함께 어떻게 페이지에 표시되고 기능하는지 알아보도록 하자. 먼저 전체적으로 형태만 소개후 하나씩 소개하도록 하겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>input 예제</title>
</head>
<body>
text: <input type="text"><br>
password: <input type="password"><br>
checkbox: <input type="checkbox"><br>
radio: <input type="radio"><br>
button: <input type="button"><br>
submit: <input type="submit"><br>
number: <input type="number"><br>
file: <input type="file"><br>
range: <input type="range"><br>
</body>
</html>
text
- 빈 텍스트를 입력할 수 있는 공간을 만들어주는 타입이다. 회원가입을 할때 아이디를 입력받는 것이 바로 이 text 양식이다. 예제코드는 아래와 같다.
<input type="text"><br>
<input type="text" placeholder="아이디를 입력해주세요.">
우선 <input> 태그에는 종료태그가 없다. 이점 유의하자. 코드를 실행해보면 좌측 사진과 같은 형태가 나온다. 하지만 첫번째 코드처럼 그저 기본 형식으로만 만들었을때는 입력받을 수 있는 칸만 생성이 되는걸 볼 수 있다. 이러면 이 공간에 어떤 정보를 입력하라는건지 혼란이 생길 수 있다. 그럴땐 2번째 코드처럼 placeholder 속성을 사용해주면 된다. placeholder="내용"을 사용하면 칸안에 좌측 사진처럼 "아이디를 입력해주세요" 라는 문구가 나를 반기는것을 볼 수 있다. placeholder는 우측 사진처럼 아무값이나 입력하면 자동으로 사라진다.
password
- password는 근본적으로 text와 비슷하다. 하지만 비밀번호같은 민감한정보는 입력을 받을때 주위사람이 보지 못하도록 감춰둘 필요가 있다. 그럴땐 password 타입을 사용하면 된다. 아래 예제를 보자.
<input type="password"><br>
<input type="password" placeholder="비밀번호를 입력해주세요.">
좌측 사진을 보면 text와 흡사해보이지만 우측사진을 보면 다르다는걸 알 수 있을 것이다. 이처럼 비밀번호같은 민감한 정보를 받을 때 사용하는것이 password 이다.
checkbox
- 체크박스는 2개이상의 선택지를 선택할 수 있는 양식이다. 아래 예제를 보자.
<input type="checkbox">본 약관에 동의합니다.<br>
<input type="checkbox">위 내용을 인지했습니다.
checkbox는 text와 다르게 placeholder를 사용하지 않고 <input> 태그 바로 옆에 내가 넣고자하는 글자를 입력해주면 된다. 만약 체크박스를 클릭하게 되면 위 사진처럼 체크표시가 생길것이다.
radio
- radio는 checkbox 타입과는 다르게 하나만 선택할 수 있는 타입으로 여러개의 radio를 링크해서 하나만 선택하도록 할 수 있다. 예제는 아래와 같다.
<input type="radio" name="gender">여성
<input type="radio" name="gender">남성
radio 타입은 위 사진처럼 하나만 선택해야하는 값을 입력받을 때 사용한다. radio 타입을 사용하면서 주의해야할 점이 있다. radio 타입을 만들면 checkbox가 만들어진것과 동일하다. 하지만 여기서 차별점을 주기위해서는 두개 이상의 radio를 서로 링크 시켜줘야한다는 것이다. 이를 하지 않았을경우 여성과 남성 둘다 체크가 가능한 사태가 벌어질 수 있다. 위 사태를 방지하기 위해서는 name 속성을 이용하여 동일한 이름을 써주면 된다. 사용법은 name="임의의 이름" 이고 위 코드를 보면 필자는 name="gender" 속성을 이용하여 여성과 남성 radio를 링크시켜줌으로써 하나만 선택할 수 있도록 지정했다.
button
- button 타입은 사용자가 누를 수 있는 버튼을 제공하는 타입이다.
<input type="button" value="버튼">
button 타입은 위 사진처럼 사용자가 누를 수 있는 버튼을 만들어주는 타입이다. 이 기능은 js 와 함께 사용되어 이 버튼을 눌렀을때 어떠한 동작이 작동하도록 사용할 수도 있다. 예시로 버튼을 눌렀을때 사용자가 입력한 값을 초기화시켜주는 기능이 있다. button 타입을 사용할때는 위 사진처럼 "버튼" 이라는 글자가 칸 안에 위치할 수 있도록 value 라는 속성을 쓴다.
value="내용"을 사용함으로써 버튼 안에 내용을 추가할 수 있다. 참고로 input 태그로 button을 생성하는 것은 요즘 잘 사용하지 않고 있다. 이유는 input 태그로 생성함으로써 css와 js등으로 버튼에 효과를 주는데 몇가지 제약이 있기 때문이다. 따라서 그저 <button></button> 태그를 사용하는 추세이다.
submit
- submit 타입은 서버에 정보를 제출할 때 사용한다.
<input type="submit" value="회원가입">
submit 타입은 주로 사용자가 입력한 값을 서버에 전달할 때 사용한다. 예시로 우리가 회원가입창에서 각종 내용을 입력하고서 회원가입 버튼을 누를때 딱 회원가입이 되는 것이 있다.
number
<input type="number" min="1" max="10" value="1">
number 타입은 숫자를 입력받는 타입이다. 추가적으로 min="숫자" max="숫자" 속성을 이용하여 입력받을 최솟값과 최댓값을 설정할 수 있다. 추가적으로 value="숫자" 속성을 사용해 초기지정값을 설정 할 수 있다.(위 사진은 필자가 사용자 입장에서 임의의값을 입력한것)
file
- file은 파일을 입력받을 수 있는 타입이다.
<input type="file">
file 타입으로 코드를 작성하면 위 사진처럼 파일 선택이라는 버튼이 생길 것이다. 버튼을 누르면 문서함이 열리고 파일을 선택했을 경우 오른쪽 사진처럼 선택한 파일이 표기된다.
range
- range는 숫자 범위를 조절해 입력받을 수 있는 타입이다.
<input type="range" min="1" max="10" value="1">
range 타입은 number 타입과는 다르게 아날로그 형식으로 범위를 조절하여 숫자를 입력받는다. 아마 이와 같은 형태는 컴퓨터 소리를 조절할때 많이 봤을것이다. 속성은 number 와 같이 mix,max 를 통해 최솟값,최댓값이 설정가능하고 vaule 속성을 통해 초기설정값을 지정할 수 있다.
'HTML' 카테고리의 다른 글
| HTML block,inline 요소에대해 알아보자 (0) | 2024.03.19 |
|---|---|
| HTML 글자를 꾸며주는 태그들에대해 알아보자 (0) | 2024.03.14 |
| HTML h1 태그에대해 알아보자 (0) | 2024.03.13 |
| HTML의 기본양식에 대해 알아보자 (1) | 2024.03.13 |
| HTML의 태그(tag)에대해 알아보자. (0) | 2024.03.13 |