input type 정리

오늘은 일하면서 자주 썼던 input type 에 대해서 정리해볼게요.

인풋태그의 타입은 굉장히 다양하지만, 저는 아직 몇가지 타입밖에 써보질 못했어요.

 

제일 많이 사용하는 타입 순서대로 나열해보자면, 이렇게 5가지 정도 됩니다.

• <input type="text">
• <input type="checkbox">
• <input type="date">
• <input type="hidden">
• <input type="radio">

1, input type="text"

말 그대로 text 타입이다.

한줄의 입력필드가 생성된다.

<input type="text">

 

2, input type="checkbox"

클릭하면 체크되고, 다시 클릭하면 체크가 풀리는 체크박스

<input type="checkbox" name="이름" value="값" checked>

name = 전달할 값의 이름

value = 전달한 값

checked = 선택된 상태로 표현된다.

* 체크박스는 여러개 선택 가능 

* label태그와 같이 쓸 경우엔 input 의 id 와 label 의 for를 동일하게 줘야한다.

그래야 라벨태그 클릭했을때 체크박스에 체크가 들어간다.

<input type="checkbox" id="check1" name="이름" value="값" checked>
<label for="check1">체크해주세요</label>

 

3, input type="date"

인풋창을 클릭했을때 사용자가 날짜를 입력할 수 있게 달력이 뜬다.

요즘은 데이트피커를 많이 사용하는 추세.

기본 "date"만 사용할 경우 브라우저별로 네이티브 디자인의 달력이 뜬다.

브라우저마다 동일한 디자인을 원할경우엔 데이트피커를 사용한다.

<input type="date">

 

4, input type="hidden"

사용자에게는 보이지 않는 입력 필드를 생성한다.

보통은 사용자에게 필요한 필수값을 넣어 서버에 전송할때 사용한다.

<input type="hidden" value="필요한값">

 

5, input type="radio"

여러개의 선택값 중 하나의 값만 선택가능한 라디오버튼이 생성된다.

<input type="radio" name="이름" value="값" checked>

name 의 값이 같은 라디오들끼리 선택이 가능하다.

ex) fruit 라는 항목 중 하나만 선택한다.

<input type="radio" name="fruit" value="apple">
<input type="radio" name="fruit" value="banana">

*체크박스와 달리 리셋이 불가능 하기 때문에 초기화 버튼을 만드는것이 좋다.

form 태그 안의 입력값을 전체 리셋시켜준다.

<input type="reset" value="Reset">