HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML: <input> 태그

HTML <input> 태그는 사용자에게 데이터 입력을 위해 상호작용 가능한 컨트롤을 제공하는 입력 컨트롤입니다. 전통적으로, <input> 태그는 <form> 태그 내에 위치하며 적절한 type 속성을 설정하여 텍스트 필드, 체크박스, 드롭다운 메뉴, 버튼 및 다른 입력을 표시할 수 있습니다. 이 태그는 일반적으로 <input> 요소라고도 합니다.

온라인 예제

간단한 HTML 양식, 두 개의 텍스트 입력 필드와 제출 버튼이 포함되어 있습니다:

예제

!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　footer 태그 사용(기본 튜토리얼 웹사이트 oldtoolbag.com)</title>
</head>
<body>
<h1>oldtoolbag.com 기본 튜토리얼</h1>
<form　action="demo-form.php"　method="post">
　　회사:　<input　type="text"　name="company"><br>
　　주소:　<input　type="text"　name="address"><br>
　　<input　type="submit"　value="Submit">
</form>
</body>
</html>

테스트를 보세요 ‹/›

이 HTML5문서 예제에서는 <form> 태그를 사용하여 HTML 양식을 생성했습니다. 이 양식에는 회사와 주소를 입력하는 데 사용되는 두 개의 <input> 컨트롤과 제출 버튼을 입력하는 데 사용되는 <input> 컨트롤이 포함되어 있습니다.

브라우저 호환성

IEFirefoxOperaChromeSafari

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

태그 정의 및 사용 설명

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

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

type 속성을 설정하여 <input> 요소를 텍스트 필드, 체크박스, 라디오 버튼, 드롭다운 메뉴, 버튼, 비밀번호 필드 등으로 만들 수 있습니다!

HTML 4.01 HTML과5과의 차이

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

HTML5중, <input> 태그에 몇 가지 속성이 추가되었으며, 해당 값도 추가되었습니다.

HTML과 XHTML 간의 차이

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

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

속성

New　: 　HTML5새 태그.

속성	값	설명
accept	audio/* video/* image/*MIME_type	파일 업로드를 통해 제출되는 파일의 유형을 정의합니다. (type="file"에만 적용됩니다)
align	left right top middle bottom	HTML5사용되지 않음, 사용하지 않음을 권장합니다. 이미지 입력의 정렬 방식을 정의합니다. (type="image"에만 적용됩니다)
alt	text	이미지 입력의 대체 텍스트를 정의합니다. (type="image"에만 적용됩니다)
autocompleteHTML5	on off	autocomplete 속성은 <input> 요소 입력 필드가 자동 완성 기능을 활성화할지 여부를 지정합니다.
autofocusHTML5	autofocus	페이지 로드 시 <input> 요소가 자동으로 포커스를 받도록 정의합니다.
checked	checked	checked 속성은 페이지 로드 시 사전 선택되어야 하는 <input> 요소를 정의합니다. (type="checkbox" 또는 type="radio"에만 적용됩니다)
dirnameHTML5	inputname.dir	提交된 텍스트 방향을 지정합니다.
disabled	disabled	disabled 속성은 비활성화되어야 하는 <input> 요소를 정의합니다.
formHTML5	form_id	form 속성은 <input> 요소가 속한 하나 또는 여러 개의 양식을 지정합니다.
formactionHTML5	URL	속성은 양식이 제출될 때 입력 컨트롤의 파일을 처리할 URL을 정의합니다. (type="submit"과 type="image"에만 적용됩니다)
formenctypeHTML5	application/x-www-form-urlencoded multipart/form-data text/plain	속성은 양식 데이터를 서버로 전송할 때 어떻게 인코딩될지 정의합니다. (type="submit"과 type="image"에만 적용됩니다)
formmethodHTML5	get post	정의는 양식 데이터를 action URL로 전송하는 HTTP 메서드를 정의합니다. (type="submit"과 type="image"에만 적용됩니다)
formnovalidateHTML5	formnovalidate	formnovalidate 속성은 <form> 요소의 novalidate 속성을 대체합니다。
formtargetHTML5	_blank _self _parent _topframename	framename 속성은 제출 양식 후에 수신된 응답을 표시할 위치 또는 키워드를 정의합니다. (type="submit"과 type="image"에만 적용됩니다)
heightHTML5	pixels	height 속성은 <input> 요소의 높이를 정의합니다. (만약 type="image"이면)
listHTML5	datalist_id	속성은 <datalist> 요소를 참조하여, <input> 요소의 предопределенные опции를 포함합니다。
maxHTML5	number date	속성은 <input> 요소의 최대 값을 지정합니다。
maxlength	number	속성은 <input> 요소에서 허용할 수 있는 최대 문자 수를 지정합니다。
minHTML5	number date	속성은 <input> 요소의 최소 값을 지정합니다。
multipleHTML5	multiple	속성은 사용자가 <input> 요소에 여러 값을 입력할 수 있도록 정의합니다。
name	text	name 속성은 <input> 요소의 이름을 지정합니다。
patternHTML5	regexp	pattern 속성은 <input> 요소의 값을 검증하는 정규 표현식을 정의합니다。
placeholderHTML5	text	placeholder 속성은 입력 <input> 필드의 예상 값을 설명하는 짧은 튜링 텍스트를 정의합니다。。
readonly	readonly	readonly 속성은 입력 필드가 읽기 전용임을 정의합니다。
requiredHTML5	required	속성은 제출 양식 전에 입력 필드를 작성해야 한다고 정의합니다。
size	number	size 속성은 <input> 요소의 시각적 너비를 문자 수로 정의합니다。
src	URL	src 속성은 제출 버튼으로 표시되는 이미지의 URL을 정의합니다. (만약 type="image")
stepHTML5	number	step 속성은 <input> 요소의 유효한 수치 간격을 지정합니다.
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type 속성은 표시할 <input> 요소의 유형을 정의합니다.
value	text	<input> 요소의 value 값을 지정합니다.
widthHTML5	pixels	width 속성은 <input> 요소의 너비를 정의합니다. (type="image"에 대해서만 적용됩니다)

전체 속성

<input> 태그는 전체 속성을 지원하며, 전체 속성 테이블을 확인하십시오 HTML 전체 속성。

이벤트 속성

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

HTML: <ins> 태그 HTML: <img> 태그