12. input태그 _ form 요소

input태그는 사용자가 입력한 정보를 저장해서 보내주는
form을 이루는 요소중 하나입니다.

form element는 단순하게 form태그 안에 들어가는 요소들이라고 보면 되는데요.
input은 그 중 가장 다양한 폼을 가진 태그입니다.
input은 상당히 단순한 형태이지만 type에 따라 여러가지 폼들이 나타납니다.
일단 기본형을 확인해볼까요.

<input type="text" >
 

text

input의 가장 기본 타입인 text입니다.
우리가 흔히보는 텍스트를 입력하는 폼이 이것입니다.
가끔 이 텍스트박스에 글자가 미리 입력되있는 경우가 있는데요.
value와 palceholder로 나뉩니다.
간단히 보자면 value는 클릭후 글자 입력시 수동으로 글자를 지워야 하고
placeholder는 클릭후 글자를 입력하면 자동으로 글자가 사라집니다.
하지만 placeholder는 IE 구버전에서는 실행되지 않으니 참고하세요.
두개의 차이를 비교해 봅시다. 코드작성후 결과물에 글자를 입력해 보세요.

<input type="text" value="value는 안지워진다"><br><br>
<input type="text" placeholder="placeholder는 지워지지">
 

button

button은 이름 그대로 button을 만들어 줍니다.
button에서 value값을 적어주면 버튼위에 텍스트로 나옵니다.
설명 필요없이 바로 봅시다.

<input type="button" value="버튼입니다">
 

checkbox

우리가 문항을 고를때 쓰는 요소가 바로 checkbox입니다.
checkbox는 중복선택이 가능하고 나중에 value값으로 제어를 하기 때문에
겉으로 드러나진 않아도 value값을 설정해 주는 것이 좋습니다.
name은 checkbox의 전체 이름이라고 보시면 됩니다.
기본으로 태그 작성시 checkbox는 선택이 해지된 상태로 나옵니다.
만약 기본값으로 선택된 상태로 나오고 싶다면?
checked="checked"를 추가해 주시면 됩니다.
밑에 예를 보겠습니다.

<input type="checkbox" name="color" value="red">난 빨강을 좋아해<br>
<input type="checkbox" name="color" value="blue" checked="checked">난 파랑을 좋아해
 

난 빨강을 좋아해
난 파랑을 좋아해

마우스 클릭시에도, 모바일페이지 일때도
간혹 코딱지만한 checkbox때문에 불편할 때가 있습니다.
그럴때 label을 설정해주면 편하게 사용할 수 있습니다.
label을 사용하면 해당 글자만 클릭해도 check가 됩니다.
쥐똥만한 박스를 클릭하려고 확대할 필요가 없다는 겁니다.
label의 사용법은 checkbox쪽에 ID를 주어 for로 이어주면 됩니다.
아래 예시를 보면 쉽게 알 수 있지요.
label을 사용했을때와 하지 않았을때, 글자를 클릭하여 차이를 비교해 보세요.

<input type="checkbox" name="color" value="red" id="likeRed"><label for="likeRed">난 빨강을 좋아해</label><br>
<input type="checkbox" name="color" value="blue">난 파랑을 좋아해
 

난 빨강을 좋아해
난 파랑을 좋아해

radio

radio는 둥근 선택버튼입니다.
checkbox와 다른점은 radio는 하나만 선택된다는 겁니다.
name을 같게 설정한 radio버튼은 하나의 묶음으로
먼저 선택한 버튼이 있어도 다른 버튼을 선택하면 자동으로 선택 해제됩니다.
그 외에 label, checked는 checkbox와 동일합니다.
직접 클릭해서 확인해 봅시다.

<input type="radio" name="color" value="red" checked="checked">빨강<br>
<input type="radio" name="color" value="blue">파랑<br>
<input type="radio" name="color" value="green">초록
 

빨강
파랑
초록

file

file은 우리가 파일을 업로드 할때 쓰는 폼을 만들어 줍니다.
불러올 파일을 선택하는 버튼과 파일명이 나오는 곳이 출력됩니다.
자주 보던 폼이니 확인해 봅시다.

<input type="file">
 

html5 추가타입

html5에서 새로 추가된 타입들로 좀 더 세분화되고 편리해진 타입들입니다.
편리한 타입들이 많이 있으나 html5의 특성상 구버전의 브라우저에서는 적용이 안되기도 합니다.
input에는 이 외에도 많은 타입들이 있습니다. 검색해서 하나씩 확인해 보고 용도를 알아봅시다.

<input type="color"><br><br>
<input type="date"><br><br>
<input type="number"><br><br>
<input type="range">
 

* 개인적인 공부를 정리하는 블로그입니다.