<입력>


HTML <input> 태그

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


브라우저 지원

1000.png

현재 대부분의 브라우저는 <input> 태그를 지원합니다.


태그 정의 및 사용 지침

<input> 태그는 사용자가 데이터를 입력할 수 있는 입력 필드를 지정합니다.

<input> 요소는 <form> 요소에서 사용자가 데이터를 입력할 수 있는 입력 컨트롤을 선언하는 데 사용됩니다.

입력 필드는 유형 속성에 따라 다양한 방식으로 변경될 수 있습니다.


팁 및 메모

참고: <input> 요소는 비어 있으며 label 속성만 포함합니다.

팁: <label> 요소를 사용하여 <input> 요소의 레이블을 정의할 수 있습니다.


HTML 4.01과 HTML5의 차이점

HTML 4.01에서는 "정렬" 데이터가 더 이상 사용되지 않습니다. 이 속성은 HTML5에서 지원되지 않습니다. CSS를 사용하여 <input> 요소의 정렬을 정의할 수 있습니다.

HTML5에서 <input>은 여러 속성과 해당 값을 추가합니다.


HTML과 XHTML의 차이점

HTML에서 <input> 태그에는 닫는 태그가 없습니다.

XHTML에서는 <input> 태그를 올바르게 닫아야 합니다.


Attribute

New : HTML5 새 태그.

propertyvaluedescription
acceptaudio/* 동영상/* image/*MIME_type파일 업로드를 통해 제출된 파일 유형을 지정합니다. (type="file"에만 해당)
alignleft 오른쪽 맨 위 가운데 BottomHTML5는 더 이상 사용되지 않으며 더 이상 사용되지 않습니다. 이미지 입력의 정렬을 지정합니다. (type="image"인 경우에만)
alttext이미지 입력에 대한 대체 텍스트를 정의합니다. (type="image"에만 해당)
autocompleteNewon offautocomplete 속성은 <input> 요소 입력 필드가 자동 완성을 활성화해야 하는지 여부를 지정합니다.
autofocusNewautofocus 속성은 페이지가 로드될 때 <input> 요소가 자동으로 포커스를 얻도록 지정합니다.
checkedcheckedchecked 속성은 페이지가 로드될 때 미리 선택되어야 하는 <input> 요소를 지정합니다. (type="checkbox" 또는 type="radio"에만 해당)
disableddisableddisabled 속성은 비활성화해야 하는 <input> 요소를 지정합니다.
formNewform_id form 속성은 <input> 요소가 속하는 하나 이상의 양식을 지정합니다.
formactionNewURL 속성은 양식이 제출될 때 입력 컨트롤을 처리하는 파일의 URL을 지정합니다. (type="submit" 및 type="image"에만 해당)
formenctypeNewapplication/x-www-form-urlencoded 다중 부분/양식 데이터 text/plain 속성은 서버에 제출할 때 양식 데이터가 인코딩되는 방식을 지정합니다(type="submit" 및 type="image"에만 적합).
formmethodNewget post는 양식 데이터를 작업 URL로 보내는 HTTP 메서드를 정의합니다. (type="submit" 및 type="image"에만 적합)
formnovalidateNewformnovalidate formnovalidate 속성은 <form> 요소의 novalidate 속성을 재정의합니다.
formtargetNew_blank _본인 _조상 _topframename은 양식 제출 후 받은 응답의 이름이나 키워드를 표시할 위치를 지정합니다. (type="submit" 및 type="image"에만 적합)
heightNewpixels <input> 요소의 높이를 지정합니다.(type="image"에만 해당)
listNewdatalist_id 속성은 <input> 요소에 대해 사전 정의된 옵션이 포함된 <datalist>
maxNew번호 date 속성은 <input> 요소의 최대값을 지정합니다.
maxlengthnumber 속성은 <input> 요소에 허용되는 최대 문자 수를 지정합니다.
minNew번호 date 속성은 <input> 요소의 최소값을 지정합니다.
multipleNewmultiple 속성은 사용자가 <input> 요소에 여러 값을 입력할 수 있음을 지정합니다.
nametext name 속성은 <input> 요소의 이름을 지정합니다.
patternNewregexppattern 속성은 <input> 요소의 값을 확인하는 데 사용되는 정규식을 지정합니다.
placeholderNewtextplaceholder 속성은 입력 <input> 필드의 예상 값을 설명하는 짧은 도구 설명을 지정합니다. .
readonlyreadonly readonly 속성은 입력 필드가 읽기 전용임을 지정합니다.
requiredNewrequired 속성은 양식을 제출하기 전에 입력 필드를 채워야 한다고 규정합니다.
sizenumbersize 속성은 <input> 요소의 표시 너비를 문자 수로 지정합니다.
srcURLsrc 속성은 제출 버튼으로 표시될 이미지의 URL을 지정합니다. (만 type="image")
stepNewnumberstep 속성은 <input> 요소에 대한 유효한 숫자 간격을 지정합니다.
typebutton
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
제출
tel
text
시간
url
week
type 속성은 표시할 <input> 요소의 유형을 지정합니다.
valuetext <input> 요소 값을 지정합니다.
widthNewpixelswidth 속성은 <input> 요소의 너비를 지정합니다. (type="image"에만 해당)


Global attribute

<input> 태그는 전역 속성을 지원합니다. 전체 속성 테이블 HTML 전역 속성을 확인하세요.


이벤트 속성

<input> 태그는 모든 HTML 이벤트 속성을 지원합니다.