HTML에서 폼

  • 리비전 슬러그: HTML/HTML에서_폼
  • 리비전 제목: HTML에서 폼
  • 리비전 아이디: 268438
  • 제작일시:
  • 만든이: jisung
  • 현재 리비전인가요? 아니오
  • 댓글 label.control DOM property translated; 49 words added, 54 words removed

리비전 내용

{{ gecko_minversion_header("2") }}

HTML5에서 폼 요소 (element) 및 속성은 HTML4에 비해 더 높은 수준의 시맨틱 (semantic) 마크업 (mark-up)을 제공하고, HTML4에서 요구되던 지루한 스크립팅과 스타일링을 많은 부분을 없애준다. HTML5에 담긴 폼 기능들은 서로 다른 웹 사이트들 사이에서 더 일관되게 작동하고 데이타 입력에 대해 사용자에게 즉각적인 피드백을 제공함으로써 더 나은 경험을 사용자에게 제공한다. 이러한 기능들은 또한 브라우저에서 스크립트 기능을 꺼둔 사용자에게도 이러한 경험을 제공한다.

이 주제는 Gecko/Firefox가 지원하는 새롭거나 또는 바뀐 사항을 설명한다.

<input> 요소

{{ HTMLElement("input") }} 요소는 {{ htmlattrxref("type", "input") }} 속성에 새로운 값을 갖는다.

  • search: 이 요소는 검색 입력 항목을 나타낸다. 입력값에서 줄바꿈 문자들이 자동적으로 제거된다, 그러나 다른 문법 요소는 강제되지 않는다.
  • tel: 이 요소는 전화번호를 편집하는데 필요한 컨트롤 (control)을 나타낸다. 줄바꿈 문자는 자동적으로 입력값에서 제거된다, 그러나 국제적으로 전화번호 형식이 다르기 때문에, 다른 문법은 강제되지 않는다. 컨트롤에 입력되는 값을 제한하기 위해서 {{ htmlattrxref("pattern", "input") }} 및 {{ htmlattrxref("maxlength", "input") }}과 같은 속성을 사용할 수 있다.
  • url: 이 요소는 URL을 편집하는 컨트롤을 나타낸다. 줄바꿈 문자와 말머리 또는 말꼬리에 달린 공백 문자는 입력값에서 자동적으로 제거된다.
  • email: 이 요소는 이메일 주소를 나타낸다. 줄바꿈 문자는 입력값에서 자동적으로 제거된다. 유효하지 않은 이메일 주소를 설정할 수 있으나, 입력 항목은 이메일 주소가 ABNF 조합 (production) 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) (여기서 atext은 RFC 5322 section 3.2.3에서 정의되어 있으며, ldh-str는 RFC 1034 section 3.5.에 정의되어 있다.)을 만족하는 경우만 제약 조건을 충족시킨다.

    메모: {{ htmlattrxref("multiple", "input") }} 속성이 설정되어 있으면, 쉼표로 나누어진 목록 형태로 복수의 이메일 주소를 {{ HTMLElement("input") }} 항목에 입력할 수 있다, 그러나 현재 이것은 Firefox에 구현되어 있지 않다.

{{ HTMLElement("input") }} 요소는 또한 새로운 속성을 갖는다:

  • {{ htmlattrxref("list", "input") }}: 입력 항목의 힌트로써 쓰이거나 또는 추천 영역에서 추천 항목으로 보여지는 {{ HTMLElement("option") }} 요소들을 내용으로 하는 {{ HTMLElement("datalist") }}의 ID.
  • {{ htmlattrxref("pattern", "input") }}: 컨트롤의 값을 검증할 대상이 되는 정규표현식, 이 속성은 text, tel, search, url, and email의 {{ htmlattrxref("type", "input") }} 값과 함께 쓰일 수 있다.
  • {{ htmlattrxref("formmethod", "input") }}: 폼 제출시 HTTP 쓰일 메쏘드 (GET 또는 POST)를 지시하는 문자열; 이 문자열이 정의되어 있으면, {{ HTMLElement("form") }}의 {{ htmlattrxref("method", "form") }}를 무시한다 (override). {{ htmlattrxref("formmethod", "input") }}는 {{ htmlattrxref("type", "input") }}이 image 또는 submit일때만 적용된다.
  • {{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: 입력 항목의 검증이 실패했을 때 오류 메시지로 표시될 문자열. 이것은 모질라 확장 속성이며, 표준이 아니다.

<form> 요소

{{ HTMLElement("form") }}는 새로운 속성 하나를 갖는다:

  • {{ htmlattrxref("novalidate", "form") }}: 이 속성은 폼의 제출 전에 폼을 검증하는 것을 막는다.

<datalist> 요소

{{ HTMLElement("datalist") }} 요소는 {{ HTMLElement("input") }} 항목을 채울때 추천되는 {{ HTMLElement("option") }} 요소의 목록을 나타낸다.

특정한 {{ HTMLElement("datalist") }} 요소를 특정한 입력 항목과 연결하기 위하여 {{ HTMLElement("input") }}의 {{ htmlattrxref("list", "input") }} 속성을 사용할 수 있다.

<output> 요소

{{ HTMLElement("output") }} 요소는 연산의 결과를 나타낸다.

연산에 영향을 미치는 문서의 다른 요소 (예를 들어, 입력값 또는 변수처럼)와 {{ HTMLElement("output") }}와 사이의 관계를 {{ htmlattrxref("for", "output") }} 속성을 이용하여 적시할 수 있다. {{ htmlattrxref("for", "output") }}의 값은 다른 요소들의 ID의 공백으로 나누어진 목록이다.

{{ non-standard_inline() }} Gecko 2.0 (그러나 반드시 다른 브로우저 엔진도 지원하지는 않는다)은 {{ HTMLElement("output") }} 요소에 대한 커스텀 검증 조건 및 오류 메시지를 정의하는 것을 지원한다, 그리고 따라서 {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, 및 {{ Cssxref(":-moz-ui-valid") }} CSS 유사 클래스 (pseudo-classes)를 적용한다. 이는 연산된 결과가 비즈니스 규칙에 위배하나 어떤 구체적인 입력값이 위배하는 것이 아닌 경우 (예를 들어, "퍼센트의 총합은 100을 넘지 말아야한다.")에 유용할 수 있다.

placeholder 속성

{{ HTMLElement("input") }}{{ HTMLElement("textarea") }} 요소의 {{ htmlattrxref("placeholder", "input") }} 속성은 입력 항목에 어떤 것이 들어갈 수 있는지에 대한 힌트를 사용자에게 제공한다. placeholder의 텍스트는 캐리지 리턴 또는 라인-피드를 포함하면 안된다.

autofocus 속성

{{ htmlattrxref("autofocus", "input") }} 속성은 예를 들어, 다른 컨트롤에서 타이핑을 하는 것과 같이 사용자가 무시하지 (override) 않는 이상, 페이지가 로드되었을 때, 폼 컨트롤이 입력 포커스를 갖도록 지정할 수 있게 해준다. 문서에서 단 하나의 폼 아이템만이 불리언 값인, autofocus을 가질 수 있다. 이 속성은 {{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("select") }}, 그리고 {{ HTMLElement("textarea") }} 요소에 적용될 수 있다. 예외는 {{ htmlattrxref("type", "input") }} 속성이 hidden으로 설정되어있으면, {{ htmlattrxref("autofocus", "input") }} 요소에 autofocus은 적용될 수 없다는 점이다 (즉, 감춰진 컨트롤에 자동적으로 포커스가 가도록 설정할 수 없다는 것이다).

label.control DOM 속성(property)

HTMLLabelElement DOM 인터페이스는 HTML {{ HTMLElement("label") }}의 속성(attribute)에 상응하는 속성(property)에 더해서 추가로 속성을 제공한다. control 속성(property)는 레이블이 붙은 컨트롤을 반환한다(return), 즉, {{ htmlattrxref("for", "label") }} 속성 (정의되어있다면) 또는 첫번째 자식 (descendant) 컨트롤 요소에 의해 결정되는 레이블이 가리키는 컨트롤.

Constraint Validation

HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about input data.

If the title attribute is set on the {{ HTMLElement("input") }} element, that string is displayed in a tooltip when validation fails. If the title is set to the empty string, no tooltip is displayed. If the title attribute isn't set, the standard validation message (as specified by the {{ htmlattrxref("x-moz-errormessage") }} attribute or by calling the setCustomValidity() method) is displayed instead.

Note: Constraint validation is not supported on {{ HTMLElement("button") }} elements in a form; to style a button based on the validity of the associated form, use the {{ cssxref(":-moz-submit-invalid") }} pseudo-class.

HTML Syntax for Constraint Validation

The following items in HTML5 syntax can be used to specify constraints on form data.

  • The {{ htmlattrxref("required", "input") }} attribute on the {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, and {{ HTMLElement("textarea") }} elements indicates that a value must be supplied. (On the {{ HTMLElement("input") }} element, {{ htmlattrxref("required", "input") }} applies only in conjunction with certain values of the {{ htmlattrxref("type", "input") }} attribute.)
  • The {{ htmlattrxref("pattern", "input") }} attribute on the {{ HTMLElement("input") }} element constrains the value to match a specific regular expression.
  • The {{ htmlattrxref("min", "input") }} and {{ htmlattrxref("max", "input") }} attributes of the {{ HTMLElement("input") }} element constrain the minimum and maximum values that can be entered.
  • The {{ htmlattrxref("step", "input") }} attribute of the {{ HTMLElement("input") }} element (when used in combination with the {{ htmlattrxref("min", "input") }} and {{ htmlattrxref("max", "input") }} attributes) constrains the granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.
  • The {{ htmlattrxref("maxlength", "input") }} attribute of the {{ HTMLElement("input") }} and {{ HTMLElement("textarea") }} elements constrains the maximum number of characters (in Unicode code points) that the user can enter.
  • The values url and email for the {{ htmlattrxref("type", "input") }} constrain the value to being a valid URL or e-mail address, respectively.

In addition, you can prevent constraint validation by specifying the {{ htmlattrxref("novalidate", "form") }} attribute on the {{ HTMLElement("form") }}, or the {{ htmlattrxref("formnovalidate", "button") }} attribute on the {{ HTMLElement("button") }} element and on the {{ HTMLElement("input") }} element (when {{ htmlattrxref("type", "input") }} is submit or image). These attributes indicate that the form is not to be validated when it is submitted.

Constraint Validation API

The following DOM properties and methods related to constraint validation are available to client-side scripts:

  • On HTMLFormElement objects, the checkValidity() method, which returns true if all of this form element's associated elements that are subject to constraint validation satisfy their constraints, and false if any do not.
  • On form-associated elements:
    • willValidate property, which is false if the element has constraints that are not satisfied.
    • validity property, which is a ValidityState object representing the validity states that the element is in (i.e., constraint failure or success conditions).
    • validationMessage property, which is a message describing any constraint failures that pertain to the element.
    • checkValidity() method, which returns false if the element fails to satisfy any of its constraints, or true otherwise.
    • setCustomValidity() method, which sets a custom validation message, allowing for constraints to be imposed and validated beyond those that are predefined.

{{ languages({"es": "es/HTML/HTML5/Formularios_en_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5"}) }}

{{ HTML5ArticleTOC() }}

리비전 소스

<p>{{ gecko_minversion_header("2") }}</p>
<p>HTML5에서 폼 요소 (element) 및 속성은 HTML4에 비해 더 높은 수준의 시맨틱 (semantic) 마크업 (mark-up)을 제공하고, HTML4에서 요구되던 지루한 스크립팅과 스타일링을 많은 부분을 없애준다. HTML5에 담긴 폼 기능들은 서로 다른 웹 사이트들 사이에서 더 일관되게 작동하고 데이타 입력에 대해 사용자에게 즉각적인 피드백을 제공함으로써 더 나은 경험을 사용자에게 제공한다. 이러한 기능들은 또한 브라우저에서 스크립트 기능을 꺼둔 사용자에게도 이러한 경험을 제공한다.</p>
<p>이 주제는 Gecko/Firefox가 지원하는 새롭거나 또는 바뀐 사항을 설명한다.</p>
<h3><code>&lt;input&gt;</code> 요소</h3>
<p><code>{{ HTMLElement("input") }}</code> 요소는 {{ htmlattrxref("type", "input") }} 속성에 새로운 값을 갖는다.</p>
<ul> <li><code>search</code>: 이 요소는 검색 입력 항목을 나타낸다. 입력값에서 줄바꿈 문자들이 자동적으로 제거된다, 그러나 다른 문법 요소는 강제되지 않는다.</li> <li><code>tel</code>: 이 요소는 전화번호를 편집하는데 필요한 컨트롤 (control)을 나타낸다. 줄바꿈 문자는 자동적으로 입력값에서 제거된다, 그러나 국제적으로 전화번호 형식이 다르기 때문에, 다른 문법은 강제되지 않는다. 컨트롤에 입력되는 값을 제한하기 위해서 {{ htmlattrxref("pattern", "input") }} 및 {{ htmlattrxref("maxlength", "input") }}과 같은 속성을 사용할 수 있다.</li> <li><code>url</code>: 이 요소는 <a class=" external" href="http://en.wikipedia.org/URL" title="http://en.wikipedia.org/wiki/URL">URL</a>을 편집하는 컨트롤을 나타낸다. 줄바꿈 문자와 말머리 또는 말꼬리에 달린 공백 문자는 입력값에서 자동적으로 제거된다.</li> <li> <p><code>email</code>: 이 요소는 이메일 주소를 나타낸다. 줄바꿈 문자는 입력값에서 자동적으로 제거된다. 유효하지 않은 이메일 주소를 설정할 수 있으나, 입력 항목은 이메일 주소가 ABNF 조합 (production) <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> (여기서 <code>atext</code>은 RFC 5322 section 3.2.3에서 정의되어 있으며, <code>ldh-str</code>는 RFC 1034 section 3.5.에 정의되어 있다.)을 만족하는 경우만 제약 조건을 충족시킨다.</p> <div class="note"><strong>메모:</strong> {{ htmlattrxref("multiple", "input") }} 속성이 설정되어 있으면, 쉼표로 나누어진 목록 형태로 복수의 이메일 주소를 {{ HTMLElement("input") }} 항목에 입력할 수 있다, 그러나 현재 이것은 Firefox에 구현되어 있지 않다.</div> </li>
</ul>
<p>{{ HTMLElement("input") }} 요소는 또한 새로운 속성을 갖는다:</p>
<ul> <li>{{ htmlattrxref("list", "input") }}: 입력 항목의 힌트로써 쓰이거나 또는 추천 영역에서 추천 항목으로 보여지는 {{ HTMLElement("option") }} 요소들을 내용으로 하는 {{ HTMLElement("datalist") }}의 ID.</li> <li>{{ htmlattrxref("pattern", "input") }}: 컨트롤의 값을 검증할 대상이 되는 정규표현식, 이 속성은 <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, and <code>email</code>의 {{ htmlattrxref("type", "input") }} 값과 함께 쓰일 수 있다.</li> <li>{{ htmlattrxref("formmethod", "input") }}: 폼 제출시 HTTP 쓰일 메쏘드 (GET 또는 POST)를 지시하는 문자열; 이 문자열이 정의되어 있으면, {{ HTMLElement("form") }}의 {{ htmlattrxref("method", "form") }}를 무시한다 (override). {{ htmlattrxref("formmethod", "input") }}는 {{ htmlattrxref("type", "input") }}이 <code>image</code> 또는 <code>submit</code>일때만 적용된다.</li> <li>{{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: 입력 항목의 검증이 실패했을 때 오류 메시지로 표시될 문자열. 이것은 모질라 확장 속성이며, 표준이 아니다.</li>
</ul>
<h3><code>&lt;form&gt;</code> 요소</h3>
<p>{{ HTMLElement("form") }}는 새로운 속성 하나를 갖는다:</p>
<ul> <li>{{ htmlattrxref("novalidate", "form") }}: 이 속성은 폼의 제출 전에 폼을 검증하는 것을 막는다.</li>
</ul>
<h3><code>&lt;datalist&gt;</code> 요소</h3>
<p>{{ HTMLElement("datalist") }} 요소는 {{ HTMLElement("input") }} 항목을 채울때 추천되는 {{ HTMLElement("option") }} 요소의 목록을 나타낸다.</p>
<p>특정한 {{ HTMLElement("datalist") }} 요소를 특정한 입력 항목과 연결하기 위하여 {{ HTMLElement("input") }}의 {{ htmlattrxref("list", "input") }} 속성을 사용할 수 있다.</p>
<h3><code>&lt;output&gt;</code> 요소</h3>
<p><code>{{ HTMLElement("output") }}</code> 요소는 연산의 결과를 나타낸다.</p>
<p>연산에 영향을 미치는 문서의 다른 요소 (예를 들어, 입력값 또는 변수처럼)와 <code>{{ HTMLElement("output") }}</code>와 사이의 관계를 {{ htmlattrxref("for", "output") }} 속성을 이용하여 적시할 수 있다. {{ htmlattrxref("for", "output") }}의 값은 다른 요소들의 ID의 공백으로 나누어진 목록이다.</p>
<p>{{ non-standard_inline() }} Gecko 2.0 (그러나 반드시 다른 브로우저 엔진도 지원하지는 않는다)은 {{ HTMLElement("output") }} 요소에 대한 커스텀 검증 조건 및 오류 메시지를 정의하는 것을 지원한다, 그리고 따라서 {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, 및 {{ Cssxref(":-moz-ui-valid") }} CSS 유사 클래스 (pseudo-classes)를 적용한다. 이는 연산된 결과가 비즈니스 규칙에 위배하나 어떤 구체적인 입력값이 위배하는 것이 아닌 경우 (예를 들어, "퍼센트의 총합은 100을 넘지 말아야한다.")에 유용할 수 있다.</p><h3>placeholder 속성</h3>
<p><code>{{ HTMLElement("input") }}</code> 및 <code>{{ HTMLElement("textarea") }}</code> 요소의 {{ htmlattrxref("placeholder", "input") }} 속성은 입력 항목에 어떤 것이 들어갈 수 있는지에 대한 힌트를 사용자에게 제공한다. placeholder의 텍스트는 캐리지 리턴 또는 라인-피드를 포함하면 안된다.</p><h3>autofocus 속성</h3>
<p>{{ htmlattrxref("autofocus", "input") }} 속성은 예를 들어, 다른 컨트롤에서 타이핑을 하는 것과 같이 사용자가 무시하지 (override) 않는 이상, 페이지가 로드되었을 때, 폼 컨트롤이 입력 포커스를 갖도록 지정할 수 있게 해준다. 문서에서 단 하나의 폼 아이템만이 불리언 값인, <code>autofocus</code>을 가질 수 있다. 이 속성은 <code>{{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("button") }}</code>, <code>{{ HTMLElement("select") }}</code>, 그리고 <code>{{ HTMLElement("textarea") }}</code> <!-- and <code>keygen</code> --> 요소에 적용될 수 있다. 예외는 {{ htmlattrxref("type", "input") }} 속성이 <code>hidden</code>으로 설정되어있으면, {{ htmlattrxref("autofocus", "input") }} 요소에 <code>autofocus</code>은 적용될 수 없다는 점이다 (즉, 감춰진 컨트롤에 자동적으로 포커스가 가도록 설정할 수 없다는 것이다).</p><h3>label.control DOM 속성(property)</h3>
<p><code><a href="/en/DOM/HTMLLabelElement" title="en/DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM 인터페이스는 HTML <code>{{ HTMLElement("label") }}</code>의 속성(attribute)에 상응하는 속성(property)에 더해서 추가로 속성을 제공한다. <strong>control</strong> 속성(property)는 레이블이 붙은 컨트롤을 반환한다(return), 즉, {{ htmlattrxref("for", "label") }} 속성 (정의되어있다면) 또는 첫번째 자식 (descendant) 컨트롤 요소에 의해 결정되는 레이블이 가리키는 컨트롤.</p><h3>Constraint Validation</h3>
<p>HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about input data.</p>
<p>If the <code>title</code> attribute is set on the {{ HTMLElement("input") }} element, that string is displayed in a tooltip when validation fails. If the <code>title</code> is set to the empty string, no tooltip is displayed. If the <code>title</code> attribute isn't set, the standard validation message (as specified by the {{ htmlattrxref("x-moz-errormessage") }} attribute or by calling the <code>setCustomValidity()</code> method) is displayed instead.</p>
<div class="note"><strong>Note:</strong> Constraint validation is not supported on {{ HTMLElement("button") }} elements in a form; to style a button based on the validity of the associated form, use the {{ cssxref(":-moz-submit-invalid") }} pseudo-class.</div>
<h4>HTML Syntax for Constraint Validation</h4>
<p>The following items in HTML5 syntax can be used to specify constraints on form data.</p>
<ul> <li>The {{ htmlattrxref("required", "input") }} attribute on the {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, and {{ HTMLElement("textarea") }} elements indicates that a value must be supplied. (On the {{ HTMLElement("input") }} element, {{ htmlattrxref("required", "input") }} applies only in conjunction with certain values of the {{ htmlattrxref("type", "input") }} attribute.)</li> <li>The {{ htmlattrxref("pattern", "input") }} attribute on the {{ HTMLElement("input") }} element constrains the value to match a specific regular expression.</li> <li>The {{ htmlattrxref("min", "input") }} and {{ htmlattrxref("max", "input") }} attributes of the {{ HTMLElement("input") }} element constrain the minimum and maximum values that can be entered.</li> <li>The {{ htmlattrxref("step", "input") }} attribute of the {{ HTMLElement("input") }} element (when used in combination with the {{ htmlattrxref("min", "input") }} and {{ htmlattrxref("max", "input") }} attributes) constrains the granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.</li> <li>The {{ htmlattrxref("maxlength", "input") }} attribute of the {{ HTMLElement("input") }} and {{ HTMLElement("textarea") }} elements constrains the maximum number of characters (in Unicode code points) that the user can enter.</li> <li>The values <code>url</code> and <code>email</code> for the {{ htmlattrxref("type", "input") }} constrain the value to being a valid URL or e-mail address, respectively.</li>
</ul>
<p>In addition, you can prevent constraint validation by specifying the {{ htmlattrxref("novalidate", "form") }} attribute on the {{ HTMLElement("form") }}, or the {{ htmlattrxref("formnovalidate", "button") }} attribute on the {{ HTMLElement("button") }} element and on the {{ HTMLElement("input") }} element (when {{ htmlattrxref("type", "input") }} is <code>submit</code> or <code>image</code>). These attributes indicate that the form is not to be validated when it is submitted.</p>
<h4>Constraint Validation API</h4>
<p>The following DOM properties and methods related to constraint validation are available to client-side scripts:</p>
<ul> <li>On <code><a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> objects, the <code>checkValidity()</code> method, which returns true if all of this form element's associated elements that are subject to constraint validation satisfy their constraints, and false if any do not.</li> <li>On <a href="/en/HTML/Content_categories#form-associated" title="en/HTML/Content Categories#form-associated">form-associated elements</a>: <ul> <li><code>willValidate</code> property, which is false if the element has constraints that are not satisfied.</li> <li><code>validity</code> property, which is a <code><a href="/en/DOM/ValidityState" title="en/DOM/ValidityState Interface">ValidityState</a></code> object representing the validity states that the element is in (i.e., constraint failure or success conditions).</li> <li><code>validationMessage</code> property, which is a message describing any constraint failures that pertain to the element.</li> <li><code>checkValidity()</code> method, which returns false if the element fails to satisfy any of its constraints, or true otherwise.</li> <li><code>setCustomValidity()</code> method, which sets a custom validation message, allowing for constraints to be imposed and validated beyond those that are predefined.</li> </ul> </li>
</ul>
<p>{{ languages({"es": "es/HTML/HTML5/Formularios_en_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5"}) }}</p>
<p>{{ HTML5ArticleTOC() }}</p>
Revert to this revision