<input> 태그란?
<input> 태그는 사용자가 내용을 입력하는 부분을 만들 때 사용합니다.
<input type="유형" [속성="속성 값"]>
<input> 태그로 만들 수 있는 폼 요소가 상당히 많은데 그것은 <input> 태그 안에 있는 type 속성을 이용해 구분합니다.
폼을 만들다 보면 똑같은 폼 요소가 여러번 사용되는데, 이를 구분하기 위해 사용하는 것이 id 속성입니다. id를 지정해 놓으면 <label> 태그를 이용해 캡션을 붙일 수도 있고 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수도 있습니다.
<input> 태그의 type 속성에서 사용 가능한 유형
유형 |
설명 |
hidden |
사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다. |
text |
한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 만든다. |
search |
검색 상자를 만든다. |
tel |
전화번호 입력 필드를 만든다. |
url |
URL 주소를 입력할 수 있는 필드를 만든다. |
메일 주소를 입력할 수 있는 필드를 만든다. |
|
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 웹 표준의 정석
'IT > HTML' 카테고리의 다른 글
[HTML 입문] 기타 폼 요소 (0) | 2017.03.28 |
---|---|
[HTML 입문] 여러 데이터를 나열하는 태그 (0) | 2017.03.27 |
[HTML 입문] 폼을 만드는 기본적인 태그 (0) | 2017.03.23 |
[HTML 입문] 링크 관련 태그 (0) | 2017.03.22 |
[HTML 입문] 이미지 관련 태그 (0) | 2017.03.22 |