English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5새 표单 속성이 추가되었습니다. form은 autocomplete와 novalidate를, input 컨트롤러는 autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height와 width, list, min과 max, multiple, pattern (regexp)를 추가했습니다.
HTML5 의 <form>과 <input> 태그에 몇 가지 새 속성이 추가되었습니다.
<form> 새 속성:
autocomplete
novalidate
<input> 새 속성:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 과 width
list
min 과 max
multiple
pattern (regexp)
placeholder
required
step
autocomplete 속성은 form 또는 input 영역이 자동 완성 기능을 가져야 한다고 정의합니다.
사용자가 자동 완성 필드에서 입력을 시작할 때, 브라우저는 해당 필드에서 채워진 옵션을 표시해야 합니다.
알림: autocomplete 속성은 form 요소에서 활성화되었지만 input 요소에서는 비활성화될 수 있습니다.
주의: autocomplete는 <form> 태그와 다음과 같은 <input> 태그에 적용됩니다: text, search, url, telephone, email, password, datepickers, range 및 color.
HTML 양식에서 autocomplete를 활성화하려면 (한 개의 input 필드는 autocomplete를 끄세요):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> <p>양식을 작성하고 제출한 후 페이지를 다시 새로고침하여 자동으로 채워지는 내용을 확인하세요.</p> <p>주의: form의 autocomplete 속성이 "on"(켜기)으로 설정되어 있지만 e-mail 자동으로 "off"(끄기)으로 설정됩니다.</p> </body> </html>테스트 보기 ‹/›
안내: 일부 브라우저에서는 이 속성이生效하기 위해 자동 완성 기능을 활성화해야 할 수 있습니다.
novalidate 속성은 boolean(부울) 속성입니다.
novalidate 속성은 양식 또는 input 필드가 제출될 때 검증되지 않아야 한다고 정의합니다.
검증하지 않고 제출할 수 있는 양식 데이터
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> <p><strong>주의：</strong> Safari와 Internet Explorer에서 9 이전 버전에서는 novalidate 속성을 지원하지 않습니다.</p> </body> </html>테스트 보기 ‹/›
autofocus 속성은 boolean 속성입니다.
autofocus 속성은 페이지 로드될 때 필드가 자동으로 초점을 받도록 정의합니다.
"이름" 입력 필드가 페이지 로드될 때 자동으로 초점을 맞추도록 합니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> 이름: <input type="text" name="fname" autofocus><br> Last name: <input type="text" name="lname"><br> <input type="submit"> </form> <p><strong>주의：</strong> 인터넷 익스플로러 9较早的 IE 版本不支持 input 标签的 autofocus 属性。</p> </body> </html>테스트 보기 ‹/›
form 属性规定输入域所属的一个或多个表单。
알림:如需引用一个以上的表单，请使用空格分隔的列表。
位于 form 表单外的 input 字段引用了 HTML form (该 input 表单仍然属于 form 表单的一部分):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="제출"> </form> <p> "Last name" 字段没有在 form 表单之内，但它也是 form 表单的一部分。</p> Last name: <input type="text" name="lname" form="form1"> <p><b>注意:</b> IE 不支持 form 属性</p> </body> </html>테스트 보기 ‹/›
The formaction 属性用于描述表单提交的 URL 地址.
The formaction 属性会覆盖<form> 元素中的 action 属性.
주의: The formaction 属性用于 type="submit" 和 type="image".
以下 HTML form 表单包含了两个不同地址的提交按钮：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="제출"><br> <input type="submit" formaction="demo-admin.php" value="提交"> </form> <p><strong>주의：</strong> 인터넷 익스플로러 9较早的 IE 版本不支持 input 标签的 formaction 属性。</p> </body> </html>테스트 보기 ‹/›
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
主要: 该属性与 type="submit" 和 type="image" 配合使用。
第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-post-enctype.php" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="제출"> <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交"> </form> <p><strong>주의：</strong> 인터넷 익스플로러 9较早的 IE 版本不支持 input 标签的 formenctype 属性。</p> </body> </html>테스트 보기 ‹/›
formmethod 속성은 폼 제출 방식을 정의합니다.
formmethod 속성은 <form> 요소의 method 속성을 덮습니다.
주의: 이 속성은 type="submit"와 type="image"와 함께 사용될 수 있습니다。
폼 제출 방식 재정의 예제:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="제출"> <input type="submit" formmethod="post" formaction="demo-form.php value="POST 메서드로 제출 사용"> </form> <p><strong>주의：</strong> 인터넷 익스플로러 9또는 이전 IE 버전은 input 태그의 formmethod 속성을 지원하지 않습니다.</p> </body> </html>테스트 보기 ‹/›
novalidate 속성은 boolean 속성입니다.
novalidate 속성은 폼 제출 시 <input> 요소가 검증되지 않도록 설명합니다.
formnovalidate 속성은 <form> 요소의 novalidate 속성을 덮습니다.
주의: formnovalidate 속성은 type="submit"와 함께 사용됩니다
두 개의 제출 버튼이 있는 폼(검증 사용 및 사용하지 않음):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="제출"><br> <input type="submit" formnovalidate="formnovalidate" value="검증 없이 제출"> </form> <p><strong>주의：</strong> 인터넷 익스플로러 9또는 이전 IE 버전이나 Safari는 input 태그의 formnovalidate 속성을 지원하지 않습니다.</p> </body> </html>테스트 보기 ‹/›
formtarget 속성은 폼이 제출된 후 데이터를 표시할 이름이나 키워드를 지정합니다.
formtarget 속성은 <form> 요소의 target 속성을 덮습니다.
주의: formtarget 속성은 type="submit"와 type="image"와 함께 사용됩니다.
두 개의 제출 버튼이 있는 폼, 다른 창에서 표시됩니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="정상 제출"> <input type="submit" formtarget="_blank" value="새 페이지로 제출"> </form> <p><strong>주의：</strong> 인터넷 익스플로러 9및 이전 IE 버전은 input 태그의 formtarget 속성을 지원하지 않습니다。</p> </body> </html>테스트 보기 ‹/›
height 및 width 속성은 image 유형의 <input> 태그의 이미지 높이와 너비를 정의합니다。
주의: height 및 width 속성은 image 유형의 <input> 태그에만 적용됩니다。
알림:이미지는 일반적으로 높이와 너비 속성을 동시에 지정합니다. 이미지에 높이와 너비를 설정하면 이미지가 필요로 하는 공간 페이지를 로드할 때 유지됩니다. 이러한 속성이 없으면 브라우저는 이미지의 크기를 알 수 없으며 예약할 수 없습니다 적절한 공간. 이미지가 로드되는 동안 페이지 레이아웃 효과가 변경됩니다 （그래도 이미지가 로드되었습니다）。
이미지 제출 버튼을 정의했습니다. height 및 width 속성을 사용했습니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="image" src="login_button.gif" alt="Submit"> </form> </body> </html>테스트 보기 ‹/›
list 속성은 입력 필드의 datalist을 정의합니다。datalist은 입력 필드의 옵션 목록입니다。
<datalist>에서 <input> 값을 사전 정의합니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>주의:/strong> 인터넷 익스플로러 9（오래된 IE 버전에서는），Safari는 datalist 태그를 지원하지 않습니다.</p> </body> </html>테스트 보기 ‹/›
min, max 및 step 속성은 숫자나 날짜를 포함하는 input 유형에 제한(구속)을 설정하는 데 사용됩니다。
주의: min, max 및 step 속성은 다음 유형의 <input> 태그에 적용됩니다: 날짜 선택기, 숫자 및 range。
<input> 요소의 최소값과 최대값 설정:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> 입력 1980-01-01 이전의 날짜: <input type="date" name="bday" max="1979-12-31><br> 입력 2000-01-01 이후의 날짜: <input type="date" name="bday" min="2000-01-02><br> 수량(1와5사이): <input type="number" name="quantity" min="1" max="5><br> <input type="submit"> </form> <p><strong>주의:/strong> 인터넷 익스플로러 9구 버전의 IE와 Firefox는 input 태그의 max와 min 속성을 지원하지 않습니다.</p> <p><strong>주의:/strong> 인터넷 익스플로러 10max와 min 속성은 입력 날짜와 시간을 지원하지 않습니다. IE 10 이 입력 유형을 지원하지 않습니다.</p> </body> </html>테스트 보기 ‹/›
multiple 속성은 boolean 속성입니다.
multiple 속성은 input 요소에서 여러 가지 값을 선택할 수 있도록 합니다.
주의: multiple 속성은 다음과 같은 input 태그 유형에 적용됩니다: email과 file:
여러 개의 파일을 업로드하세요:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> 이미지 선택: <input type="file" name="img" multiple> <input type="submit"> </form> <p>한 장이나 여러 장의 이미지를 선택해 주세요.</p> <p><strong>주의:/strong> 인터넷 익스플로러 9구 버전의 IE는 input 태그의 multiple 속성을 지원하지 않습니다.</p> </body> </html>테스트 보기 ‹/›
pattern 속성은 input 요소의 값을 검증하는 정규 표현식을 설명합니다。
주의:pattern 속성은 다음과 같은 input 태그 유형에 적용됩니다: text, search, url, tel, email, 그리고 password.
툴팁: 전역으로 사용됩니다 title 속성은 패턴을 설명합니다.
아래 예제는 숫자와 특수 문자를 포함하지 않고 세 글자만 입력할 수 있는 텍스트 필드를 보여줍니다：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 튜토리얼(oldtoolbag.com)</title>
</head>
<body>
<form action="demo-form.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3" title="Three letter country code">
<input type="submit">
</form>
<p><strong>주의:/strong> 인터넷 익스플로러 9구 버전의 IE나 Safari는 input 태그의 pattern 속성을 지원하지 않습니다.</p>
</body>
</html>테스트 보기 ‹/›placeholder 속성은 입력 필드가 기대하는 값을 설명하는 힌트를 제공합니다.
단短的 힌트는 사용자가 입력 값을 입력하기 전에 입력 필드에 표시됩니다.
주의: placeholder 속성은 다음 input 태그 유형에 적용됩니다: text, search, url, telephone, email 및 password。
input 필드 텍스트 힌트 t:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> <input type="text" name="fname" placeholder="First name"><br> <input type="text" name="lname" placeholder="Last name"><br> <input type="submit" value="제출"> </form> <p><strong>주의：</strong> 인터넷 익스플로러 9및 이전 IE 버전은 input 태그의 placeholder 속성을 지원하지 않습니다.</p> </body> </html>테스트 보기 ‹/›
required 속성은 boolean 속성입니다.
required 속성은 입력 필드가 제출 전에 필수로 입력되어야 한다고 정의합니다(비어 있을 수 없습니다).
주의:required 속성은 다음 input 태그 유형에 적용됩니다: text, search, url, telephone, email, password, 날짜 선택기, number, checkbox, radio 및 file。
비어 있을 수 없는 input 필드:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Username: <input type="text" name="usrname" required> <input type="submit"> </form> <p><strong>주의：</strong> 인터넷 익스플로러 9및 이전 IE 버전, 또는 Safari는 input 태그의 required 속성을 지원하지 않습니다.</p> </body> </html>테스트 보기 ‹/›
step 속성은 입력 필드에 유효한 숫자 간격을 정의합니다.
step="3“”이면 유효한 수는 다음과 같습니다: -3,0,3,6 와 같습니다.
푸시: step 속성은 다음과 같은 속성과 함께 사용될 수 있습니다: max와 min 속성이 범위 값을 생성합니다.
주의: step 속성은 다음 type 유형과 함께 사용됩니다: number, range, date, datetime, datetime-local, month, time, week.
input step 단계를 설정합니다.3:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> <input type="number" name="points" step="3"> <input type="submit"> </form> <p><strong>주의：</strong> 인터넷 익스플로러 9및 이전 IE 버전, 또는 Firefox는 input 태그의 step 속성을 지원하지 않습니다.</p> </body> </html>테스트 보기 ‹/›
| 태그 | 설명 |
| <form> | form 양식 정의 |
| <input> | input 필드 정의 |