[HTML] 입력에 필요한 input 태그 정리

HTML언어로 웹 개발을 진행시에 사용자가 입력한 내용을 입력받는 방법은 <input> 태그로 이용하는 경우가 많습니다. 예를들어, 아이디나 비밀번호, 이메일 주소, 전화번호, 날짜, 시간, 버튼 등등 다양합니다. 다양한 형식의 입력받는 방법을 정리해보겠습니다. 

 

반응형

 

 

<input> 태그

사용자가 입력하는 내용, 텍스트나 비밀번호 같은 요소인데 이런요소을 만들때 사용하는 것이 <input>태그 입니다.

<input type="유형" [속성="속성 값"]>

<input>태그로 만들 수 있는 폼 요소가 상당히 많은데, 이것은 <input> 태그 안에 type 속성으로 구분합니다. 예를들어 <input type="text">로 만들면 간단한 텍스트를 입력받는 텍스트 필드가 생성되며, <input type="button">으로 생성하면 이벤트를 조작할 수 있는 버튼이 생성됩니다.

 

[예시]

<input type="text">

<input type="button" value="버튼">

1. <input> 태그에 id 속성

여러개의 <input> 태그를 이용해서 똑같은 폼 요소를 만들 수 있습니다. 하지만 여러개의 폼 요소들을 구분하기 위해서는 어떻게 해야할까? 그것은 id 속성을 이용해서 구분하면 됩니다. 나중에 id 속성을 활용해 이벤트도 설정할 수 있고, CSS로 특정 요소에만 스타일 시트를 적용할 수 있습니다.

<input type="text" id="ibx1">
<input type="text" id="ibx2">

 

 

 

2. <input> 태그의 type 속성

유형	설명
* hidden	사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가집니다.
* text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다.
search	검색상자를 넣습니다.
tel	전화번호 입력 필드를 넣습니다.
url	URL 주소를 입력할 수 있는 필드를 넣습니다.
email	메일 주소를 입력할 수 있는 필드를 넣습니다.
* password	비밀번호를 입력할 수 있는 필드를 넣습니다.
* datetime	국제 표준시(UTC)로 설정된 날짜와 시간를 넣습니다.
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간을 넣습니다.
* date	사용자 지역을 기준으로 날짜(연,월,일)를 넣습니다.
month	사용자 지역을 기준으로 날짜(연,월)를 넣습니다.
week	사용자 지역을 기준으로 날짜(연,주)를 넣습니다.
time	사용자 지역을 기준으로 시간(시,분,초,분할 초)을 넣습니다.
* number	숫자를 조절할 수 있는 화살표를 넣습니다.
range	숫자를 조절할 수 있는 슬라이드 막대를 넣습니다.
color	색상 표를 넣습니다.
* checkbox	주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣습니다.
* radio	주어진 항모게서 1개만 선택할 수 있는 라디오 버튼을 넣습니다.
* file	파일을 첨부할 수 있는 버튼을 넣습니다.
* submit	서버 전송 버튼을 넣습니다.
image	submit 버튼 대신 사용할 이미지를 넣습니다.
reset	리셋 버튼을 넣습니다.
* button	버튼을 넣습니다.

자주 사용하는 type에는 *를 표시해두었습니다.(개인판단)

 

 

[참고서적]

[이지스퍼블리싱]Do it! HTML5+CSS3 웹 표준의 정석

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."