input 태그

input 태그는 다양한 HTML 폼 요소를 생성합니다: 일반 입력 필드, 비밀번호 입력 필드, 체크박스(checkbox), 라디오 버튼(radio), 버튼.

input 태그는 form 태그 내부에 위치해야 합니다. 이것은 필수는 아니지만, 데이터를 서버로 전송하고 PHP를 통해 처리하기 위해서는 필요합니다.

닫는 태그가 필요하지 않습니다.

속성

속성	설명
type	입력 필드의 유형을 지정합니다. 옵션은 아래를 참조하세요.
value	입력 필드의 기본값입니다. 버튼의 경우 버튼 텍스트를 지정합니다. 자세한 내용은 value 속성을 참조하세요.
placeholder	입력 필드의 힌트, 자세한 내용은 placeholder 속성을 참조하세요.
name	입력 필드의 이름. PHP에서 입력 필드 데이터를 추출하기 위해 필요합니다. 폼의 정상적인 작동을 위해 입력 필드의 이름은 서로 중복되어서는 안 됩니다 (하나의 폼 내에서). 중복되는 경우 PHP에는 HTML 코드에서 더 아래에 있는 입력 필드의 데이터가 전달됩니다.
disabled	폼 요소(input뿐만 아니라 거의 모든 요소)를 비활성화합니다. 자세한 내용은 disabled 속성을 참조하세요.

type 속성의 값

값	설명
text	일반 텍스트 입력 필드를 생성합니다.
password	비밀번호를 위한 텍스트 입력 필드를 생성합니다. 텍스트를 입력해 보세요 - 별표로 표시됩니다.
checkbox	체크박스(checkbox)를 생성합니다. 자세한 내용은 checkbox를 참조하세요.
radio	라디오 버튼(radio)을 생성합니다. 자세한 내용은 radio를 참조하세요.
hidden	화면에 보이지 않지만 value 속성에 포함된 데이터를 서버로 전송하는 숨겨진 입력 필드를 생성합니다.
button	버튼을 생성합니다. 이 버튼을 클릭해도 폼이 서버로 전송되지 않습니다. 이 버튼은 링크 내부나 JavaScript를 통해 사용할 수 있습니다. 기본적으로 버튼에는 텍스트가 없습니다(텍스트 없는 버튼 예: ), 텍스트는 value를 사용하여 지정합니다. 버튼을 만드는 또 다른 태그인 button도 참조하세요.
submit	데이터를 서버로 전송하는 버튼을 생성합니다. 버튼 텍스트는 브라우저에 따라 다르며, value를 사용하여 변경할 수 있습니다. 버튼을 만드는 또 다른 태그인 button도 참조하세요.
reset	채워진 폼을 지우는 버튼을 생성합니다. 버튼 텍스트는 브라우저에 따라 다르며, value를 사용하여 변경할 수 있습니다.
file	파일 선택 버튼을 생성합니다. 이 버튼의 디자인은 CSS를 통해 변경하는 것이 금지되어 있습니다 (그러나 교묘한 방법들이 있습니다). 폼에 이러한 필드가 필요한 경우, form 태그는 enctype 속성 값이 multipart/form-data여야 합니다.

HTML5에서 새로 추가된 type 속성 값

이 속성 값들은 새롭고, HTML5에서만 등장했기 때문에 일부 브라우저에서는 작동하지 않거나 다른 브라우저에서 다르게 작동할 수 있습니다.

브라우저가 type 속성의 내용을 이해할 수 없는 경우 (예: 지원되지 않거나 잘못 입력된 경우), 브라우저는 해당 요소를 type 값이 text인 일반 텍스트 입력 필드로 간주합니다.

아래 예제를 다른 브라우저에서 확인해 보세요. 입력 필드에 텍스트를 입력하고 전송 버튼을 눌러보세요. 텍스트가 올바르지 않거나 필드가 비어 있으면 브라우저가 오류를 표시합니다. 예를 들어, email 유형의 필드에 잘못된 이메일을 입력하면 브라우저는 폼 전송을 허용하지 않고 오류 메시지를 표시합니다 (오류 텍스트 및 외관은 html css로 변경할 수 없습니다). 필드가 비어 있으면 브라우저도 오류를 표시하는데, 이는 required 속성을 통해 가능합니다:

값	설명
email
number
url
tel
search
color
date
month
week
datetime
datetime-local
range

참고 항목