[HTML 입문] <input> 태그

<input> 태그란?

<input> 태그는 사용자가 내용을 입력하는 부분을 만들 때 사용합니다. 

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

<input> 태그로 만들 수 있는 폼 요소가 상당히 많은데 그것은 <input> 태그 안에 있는 type 속성을 이용해 구분합니다.

<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">

<input type="text" id="snumber">

폼을 만들다 보면 똑같은 폼 요소가 여러번 사용되는데, 이를 구분하기 위해 사용하는 것이 id 속성입니다. id를 지정해 놓으면 <label> 태그를 이용해 캡션을 붙일 수도 있고 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수도 있습니다.

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

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

<input> 태그의 다양한 속성

속성	설명
autofocus	페이지를 불러오자마자 원하는 폼의 요소에 입력 커서를 표시할 수 있다.
placeholder	입력란에 힌트 내용을 표시할 수 있다.
readonly	사용자에게 내용을 보여 주기만 하고 입력은 할 수 없게 한다.
required	필수적으로 입력해야 하는 필드를 지정할 수 있다.
min, max	해당 필드의 최솟값과 최댓값을 지정한다.
step	허용된 범위 내의 숫자의 일정한 간격을 가리킨다.
size	한 줄짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할 지 지정한다.
maxlength	사용자가 최대 몇 글자까지 입력할 수 있는지 지정한다.
minlength	사용자가 최소 몇 글자 이상을 입력해야 하는지 지정한다.
formaction	실행할 프로그램을 연결한다. type="submit"이나 type="image"일 때 사용할 수 있다.
formenctype	서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할 것인지 지정한다. type="submit"이나 type="image"일 때 사용할 수 있다.
formmethod	서버로 폼을 전송하는 방식을 지정한다. 이미 <form> 태그 안에서 지정한 방식이 있어도 그 방식 은 무시된다.
formnovalidate	서버로 전송할 때 폼 데이터가 유효(validate)한지 여부를 표시할 수 있다.
formtarget	폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타깃을 지정한다.
height, width	type="image"일 때 이미지의 너비와 높이를 지정한다.
list	<datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나열해 보여준다.
multiple	type="email"이나 type="file"일 때 두개 이상의 값을 입력한다. <input> 태그 안에 속성 이름만 표 시하면 된다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석