<INPUT>

Input tag

<input> 태그를 이용하면 웹에서 주로 사용하는 사용자 데이터를 입력 받을 수 있는 도구를 생성할 수 있다. 이를 통하여 데이터를 전달 받아 원하는 형태로의 사용이 가능하다.

type

type 속성을 통해 입력창의 형태를 결정할 수 있다. 사용자의 입력은 상황에 따라 다양하게 처리되어야 하므로 상황에 맞는 type을 선택하여야 한다.

type

설명

text

기본 한 줄 입력 도구

password

입력한 값이 가려지는 도구

date

연,월,일을 입력할 수 있는 도구

time

시간을 선택할 수 있는 도구

datetime

날짜와 시간을 선택할 수 있는 도구

color

색상을 선택할 수 있는 도구

file

파일을 지정할 수 있는 도구

삭제 아이콘이 포함된 검색어 입력 도구

number

스피너(Spinner)가 추가된 숫자 입력 도구

checkbox

단일 항목을 선택하거나 해제할 수 있는 도구

radio

여러개 중에서 하나의 값을 선택하게 하는 도구

이메일 주소를 입력하는 도구

tel

전화번호를 입력하는 도구

hidden

숨김 처리하여 보이지 않는 입력 도구

button

클릭하여 특정 기능을 실행할 수 있는 도구

submit

form을 전송하는 버튼 도구

reset

form의 입력창을 모두 초기화하는 도구

range

범위 내의 값 중에서 선택할 수 있는 도구

브라우저마다 지원하는 입력 도구들이 다르며, 디자인 또한 다르다. 따라서 모든 홈페이지에서 공통인 입력형태를 유지하고 싶다면 별도의 디자인이나 프로그래밍 처리가 필요하다. 브라우저별로 지원하는 입력 도구들을 확인하고 싶다면 다음 사이트를 이용해볼 수 있다.

그 외에도 submit, reset, image 등은 <form> 태그와 같이 사용해야 하는 등 입력 도구마다 가지고 있는 다양한 특징들을 파악하여 적재적소에 사용하는 것이 중요하다.

name

name 속성은 입력창이 포함된 <form>이 전송될 때 값에 부여될 식별자를 설정하는 데 사용한다.

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

위와 같은 입력창이 있을 때 입력창에 testuser라고 입력할 경우 전송되는 형태는 다음과 같다.

id=testuser

name이 같은 radio 버튼끼리는 항목을 동시에 선택할 수 없다.

value

value 속성은 입력창의 초기 표시값을 의미한다. 입력에 대한 변동사항이 없을 경우 입력창이 포함된 <form>이 전송될 때 지정된 name과 함께 전송할 값으로 처리된다. 입력에 변동이 있을 경우 변경된 입력값이 전송할 값으로 처리된다.

button 등에 value를 사용하면 입력창과 마찬가지로 버튼에 글자가 표시된다.

주의

파일 선택 도구에는 보안상의 이유로 value 속성을 지정할 수 없다. 만약 파일 선택 도구에 value를 지정할 수 있다면 시스템의 중요한 파일들을 임의의 기본값으로 지정할 수 있기 때문이다.

<input type="file" value="C:\Windows\system32\drivers\etc\hosts">

placeholder

placeholder 속성은 입력창에 입력값이 없을 경우에 표시할 도움말을 설정한다.

주의

date, time, color 등 지원하는 입력 형태가 있을 경우 placeholder는 표시되지 않는다. 다만 이를 지원하지 않는 브라우저에서는 text 형태로 표시되므로 placeholder에 작성된 내용이 도움말로 표시된다.

required, readonly, disabled

required, readonly, disabled 와 같은 속성들은 속성의 이름과 값이 같은 형태를 가진다.

<input required="required">
<input disabled="disabled">
<input readonly="readonly">

이처럼 속성명과 속성값이 같은 속성들은 속성명만 작성하면 설정 처리가 완료된다.

required - <form> 제출 전 반드시 입력되어야 할 항목을 설정
readonly - 수정이 불가능하지만 <form> 제출 시 전송은 가능한 항목을 설정
disabled - 비활성화된 입력창이며 <form> 제출 시에도 전송이 이루어지지 않는 항목을 설정

Previous<FORM>Next<SELECT>

Last updated 3 years ago