[HTML] <input> 태그의 type

웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다.

사용자가 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데 이런 부분을 만들 때 사용하는 태그가 <input> 태그이다.

 

id 속성 사용하기

input에서 id 속성은 매우 중요하다. 똑같은 폼 요소들을 많이 사용할 수도 있기때문에 이것을 구분해주고, 또 폼마다 다른 css를 적용해줄 때 id 값이 필요하다.

 

또한 id를 지정해놓으면 <label>태그를 이용해 캡션을 붙일 수도있다.

 

<input> 태그의 type 속성에서 사용 가능한 유형

---

유형	설명
hidden	사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다.
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다. * 사용 가능한 속성 name - 텍스트 필드를 구별할 수 있도록 이름을 붙인다. size - 텍스트 필드의 길이를 지정한다.(화면에 몇 글자가 보이도록 할 것인지를 지정) value - 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용. maxlength - 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정.
search	검색 상자를 넣는다.
tel	전화번호 입력 필드를 넣는다.
url	URL 주소를 입력할 수 있는 필드를 넣는다.
email	메인 주소를 입력할 수 있는 필드를 넣는다.
password	비밀번호를 입력할 수 있는 필드를 넣는다. *로 표시된다.
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣는다.
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣는다.
date	사용자 지역을 기준으로 날짜(연, 월, 일)을 넣는다.
month	삿용자 지역을 기준으로 날짜(연, 월)을 넣는다.
week	사용자 지역을 기준으로 날짜(연, 주)를 넣는다.
time	사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)를 넣는다.
number	숫자를 조절할 수 있는 화살표를 넣는다. ※크롬, IE 에서는 일반 텍스트 필드처럼 나타나는데, 파이어폭스에서는 스핀박스로 표시된다.
range	숫자를 조절할 수 있는 슬라이드 막대를 넣는다. * 사용 가능한 속성 min - 필드에 입력할 수 있는 최솟값을 지정 max - 필드에 입력할 수 있는 최댓값을 지정 step - 숫자 간격을 지정할 수 있다.기본 값은 1이며 생략할 수 있다. value - 필드에 표시할 초기값
color	색상 표를 넣는다.
checkbox	주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣는다. *사용 가능한 속성(radio와 동일) name - 라디오나 체크박스가 여러 개 있을 경우, 이것들을 구분하기 위해 name설정을 꼭 해줘야 한다. radio 버튼은 여러 개 중 하나만 선택하는 것이기 때문에 관련 있는 그룹끼리 name 속성 값을 똑같이 만든다. checkbox는 똑같을 필요 없음. value - 선택한 라디오 버튼이나 체크박스를 서버로 알려 줄 때 넘길 값을 지정한다. 이 값은 영문이거나 숫자여야하며 필수 속성이다. checked - 기본으로 선택표시를 해놓을 항목에 사용한다.
radio	주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다.
file	파일을 첨부할 수 있는 버튼을 넣는다.
submit	서버 전송 버튼을 넣는다.
image	submit 버튼 대신 사용할 이미지를 넣는다.
reset	리셋 버튼을 넣는다.
button	버튼을 넣는다.

 

라디오 버튼과 체크박스 삽입하기

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

서버에 값을 전달해야하므로 value을 필수로 지정해줘야한다.

그리고 radio 는 여러 개 중에서 하나만 선택해야하므로 radio의 name속성은 모두 똑같아야 한다.