양식

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 type 특성(input 요소)의 새로운 상태, input 요소의 새로운 특성 및 progress 요소를 비롯하여 HTML5 양식을 새롭게 지원합니다. 이 지원을 통해 개발자는 최소한의 스크립트로 사용자 프롬프트, 입력 유효성 검사 및 피드백을 빠르고 쉽게 제공할 수 있습니다. HTML5 폼은 W3C(World Wide Web 컨소시엄) HTML5 사양섹션 4.10에 설명되어 있습니다.

이러한 HTML5 input 유형 및 특성이 제공되기 전에는, 전화 번호에 알파 문자가 포함되지 않았는지 확인하거나 올바른 형식의 메일 주소를 입력했는지 확인하려면 개발자가 별도의 유효성 검사 논리를 작성해야 했습니다. 이제 HTML5 클라이언트 쪽 양식 및 입력 유효성 검사가 지원되므로 개발자가 유효성 검사 함수를 작성하는 대신 다른 업무에 집중할 수 있습니다.

새 입력 상태 지원

HTML5 양식은 input 요소의 type 특성에 대한 여러 입력 상태를 정의합니다. Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 URL, Email 및 Range 상태를 새롭게 지원합니다.

Search 상태

Search 상태는 input 요소의 type 특성을 search로 설정할 때 발생합니다. Text 상태와 같으며, 유일한 차이점은 DOM(문서 개체 모델)에서 "검색" 입력 형식으로 식별된다는 것입니다.


<input id="search" type="search" placeholder="Search..."/>

Telephone 상태

input 요소의 type 특성을 tel로 설정할 때 발생하는 Telephone 입력 상태는 필드에 206-555-0012 또는 (425) 555-0034 같은 전화 번호를 입력할 수 있음을 나타냅니다. 전화 번호는 다양한 형식일 수 있으므로 Telephone 상태는 한 가지만 적용하지 않습니다. 특정 형식을 적용해야 하는 경우 pattern 특성을 사용합니다.


<input id="work_phone" type="tel" required placeholder="(425) 555-0067"/>

URL 및 Email 상태

URLEmail 상태는 URL 및 메일 입력 형식에 대한 기본 제공 유효성 검사를 개발자에게 제공합니다.

input 요소의 type 특성을 url로 설정할 때 발생하는 URL 입력 상태는 필드에 "http://www.contoso.com" 같은 정규화된 웹 주소를 입력할 수 있음을 나타냅니다.

마찬가지로, Email 입력 상태는 "joe@contoso.com" 같은 (구문상) 유효한 메일 주소만 허용합니다. 다음 예제에서 사용자가 URL 또는 메일 주소를 올바르게 입력하지 않으면 오류 메시지가 표시됩니다.


<input type="url" name="myUrl"/>
<input type="email" name="myEmail"/>


Number 상태

Number 상태는 input 요소의 type 특성을 number로 설정할 때 발생합니다. 이 경우 value 특성이 지정되었거나 비어 있지 않으면 유효한 부동 소수점 숫자를 포함해야 합니다.


<input type="number" name="desiredQuantity" value="1" />

Range 상태

Range 입력 상태 지원을 통해 범위 또는 슬라이더 입력 컨트롤을 쉽게 만들 수 있습니다. Range 입력 상태는 input 요소의 type 특성을 range로 설정할 때 발생합니다. 범위 컨트롤은 min, max, stepvalue의 네 가지 특성을 사용하여 컨트롤의 값 범위와 확인을 정의합니다. 아래 예제에서는 0에서 100 사이의 값을 증분 5로 반환하고 값 50이 미리 설정된 범위 컨트롤을 만듭니다.


<input type="range" min="0" max="100" step="5" value="50"/>

범위 컨트롤은 실제로 input 요소이므로 브라우저에서 지원되지 않는 경우 값 inside가 기본값인 텍스트 상자로 렌더링됩니다.

progress 요소

HTML5 사양의 섹션 4.10.16에 정의되어 있는 progress 요소는 작업 진행률(확정된 모드)을 표시하거나 작업이 실행 중이지만 완료율을 알 수 없음(확정되지 않은 모드)을 표시하거나 둘 다를 표시하는 표시줄을 만듭니다. 예를 들어 확정되지 않은 진행률 표시줄을 먼저 표시한 다음 특정 작업의 수행 기간을 계산한 후 확정된 진행률 표시줄로 전환할 수 있습니다.

작업만 표시하는 진행률 표시기를 만들려면 value 특성을 생략합니다. value 특성을 요소에 설정하거나 스크립트에서 이 특성에 값을 할당하면 확정된 표시줄이 됩니다. 표시줄은 0에서 시작하고 max 특성에 설정된 값으로 이동합니다. max 특성을 생략하면 진행률 범위는 0에서 1 사이입니다. valuemax는 모두 부동 소수점 숫자입니다.

확정되지 않은 모드 구문


<progress>fallback text</progress>

확정된 모드 구문


<progress id="progCtrl" max="100" value="50">fallback text</progress>

사용자 브라우저가 HTML5 진행률 컨트롤을 지원하지 않는 경우 태그 사이에 대체 텍스트를 넣을 수 있습니다(여기서는 "대체 텍스트"로 표시됨). 태그 사이에 value 특성의 값을 텍스트로 표시할 수도 있습니다. 예를 들어 "이 작업의 진행률은 x%입니다." 등의 텍스트로 대체 텍스트를 업데이트하는 스크립트를 작성합니다. 여기서 xvalue 특성의 현재 값을 나타냅니다.

또한 progress 요소의 position 특성은 value 특성 값을 max 특성 값으로 나눈 몫 또는 컨트롤이 확정되지 않은 모드 상태인 경우 "-1"과 같습니다. position 특성은 읽기 전용입니다.

예제: Range 입력 상태 및 진행률 컨트롤

다음 예제에서는 Range 입력 상태와 진행률 컨트롤을 결합합니다. 페이지를 처음 로드할 때 progress 요소는 확정되지 않은 모드 상태(할당된 값 없음)입니다. 슬라이더 막대를 이동하면 슬라이더를 이동한 대상 값이 진행률 컨트롤에 할당되고 함께 이동합니다.


<!DOCTYPE html>
<html>

<head>
<title>Range and progress example</title>
<style type="text/css">
input[type=range] {
  padding-left: 0px;
  padding-right: 0px;
}
</style>
<script type="text/javascript">
  function changeValue() {
    document.getElementById("progCtrl").value = document.getElementById("rangeCtrl").value;
  }
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("rangeCtrl").addEventListener('change', changeValue, false);
  }, false);
</script>
</head>

<body>

<progress id="progCtrl" max="100" >Sorry, your browser doesn't support the progress 
element.</progress>
<br><br>
<input id="rangeCtrl" max="100" min="0" step="5" type="range" value="50" />

</body>

</html>


처음 로드할 때 이 예제는 Windows 8의 Internet Explorer 10에서 다음과 같이 나타납니다. 진행률 표시줄은 확정되지 않은 모드이며, Windows 8에서는 나타났다가 사라지는 애니메이션 효과를 준 애니메이션 점으로 표시됩니다.

확정되지 않은 진행률 표시줄(위) 및 범위 컨트롤(아래) 예제

슬라이더 컨트롤을 오른쪽(값 75)으로 이동하면 예제가 다음과 같이 나타납니다. 이제 진행률 표시줄이 확정된 모드 상태이며 슬라이더를 "따라" 값을 일치시켰습니다.

확정된 진행률 표시줄(위) 및 범위 컨트롤(아래) 예제

이 페이지를 보세요.

참고  다른 브라우저와 운영 체제에서는 진행률 표시줄과 슬라이더 컨트롤이 다르게 표시됩니다.

양식 및 입력 유효성 검사를 포함한 HTML5 양식의 실습 데모는 IE 테스트 드라이브HTML5 양식(영문)을 참조하세요.

새 input 특성 지원

required, pattern, placeholder 등의 새 HTML5 input 지원을 통해 개발자는 웹 페이지에서 필요한 데이터를 사용자가 입력하도록 하고 올바른 데이터인지 확인할 수 있습니다.

required 특성

required 특성은 값 없이 제출할 수 없는 요소를 표시합니다. 이 특성은 텍스트, URL, 메일, 선택, 확인란 또는 라디오 단추 컨트롤과 textareaselect 요소에 설정할 수 있습니다. 부울 특성이며 한 요소에만 지정해야 합니다. 사용자가 필수 필드를 마우스로 가리키면 필수 필드임을 알리는 도구 설명이 표시됩니다. title 특성을 설정한 경우 이 특성이 대신 표시됩니다.


<form id="yourname">
  <label>Enter your first name: 
    <input name="firstname" type="text" required><input type="submit" value="Go"/>
  </label>
</form>


사용자가 필드에 정보를 입력하지 않고 양식을 제출하려고 하면 오류 메시지가 표시되고 입력이 누락된 필드로 커서 초점이 이동합니다.

"This is a required field"라는 텍스트가 도구 설명에 표시된 입력 필드 예제 그림

pattern 특성

pattern 특성을 사용하면 사용자 입력이 일치해야 하는 정규식을 정의할 수 있습니다. pattern 특성은 type 특성이 text, search, url, tel, email 또는 password로 설정된 input 요소에 사용할 수 있습니다.


<form>
<label>
  <input type="tel" name="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" 
   title="enter a telephone number in   the format (xxx) xxx-xxxx"/>
  <input type="submit"/>
</label>
</form>


min, max 및 step 특성

min, maxstep 특성은 type 특성이 number 또는 range로 설정된 input 컨트롤에 적용할 수 있습니다. range 입력 형식에 대한 자세한 내용은 이 항목의 Range 상태를 참조하세요.

minmax 특성은 허용되는 최소값과 최대값을 정의합니다.

step 특성은 허용되는 값의 간격을 정의합니다. 예를 들어 min이 "0"으로 설정되고 step이 "1"로 설정된 경우 0, 1, 2, 3 등의 값만 허용됩니다. 마찬가지로, min이 "1.1"로 설정되고 step이 "1"로 설정된 경우 1.1, 2.1, 3.1 등의 값만 허용됩니다.

다음 예제는 0에서 10 사이의 짝수가 필요한 입력 필드를 보여 줍니다. 해당 범위를 벗어난 숫자나 홀수를 제출하면 오류 메시지가 표시됩니다.


<form>
  <label>Enter an even number between 0 and 10: 
    <input type="number" min="0" max="10" step="2"/> 
    <input type="submit"/>
  </label>
</form>


placeholder 특성 및 :-ms-input-placeholder 의사 클래스

사용자를 올바른 입력 필드로 보내고 데이터 입력 방법을 표시하면 유효한 데이터를 얻을 가능성이 커집니다. placeholder 특성 지원을 통해 양식 필드에 올바른 데이터를 입력하도록 사용자를 안내할 수 있습니다.

placeholder 특성은 입력 필드 내부에 표시할 짧은 프롬프트나 예제 텍스트를 정의합니다. type 특성이 text, search, url, tel, emailpasswordtextarea 요소로 설정된 input 컨트롤 내에서 사용할 수 있습니다.

placeholder 특성을 사용하여 다음 코드 조각과 같이 입력 필드에 직접 올바른 입력 예를 넣을 수 있습니다.


<input name="url" type="url" placeholder="http://www.contoso.com" />

위 태그는 커서 초점이 해당 필드에 있을 때까지 필드에 자리 표시자 텍스트를 표시합니다.

자리 표시자 텍스트가 있는 입력 필드 그림

기본적으로 자리 표시자 텍스트는 연한 회색이지만 :-ms-input-placeholder 의사 클래스 선택기를 사용하여 CSS 스타일시트로 원하는 스타일을 지정할 수 있습니다. 다음 예제에서는 사용자 지정 스타일이 있는 주소 및 우편 번호 필드를 강조 표시합니다.


<!DOCTYPE html >
<html>
<head>
  <title>Placeholder style example</title>
  <style type="text/css">
  input  /* normal style */
  {
    background-color:LightGray;
    color:Purple;
  }   
  input.address:-ms-input-placeholder /* placeholder only style */   
  {
    font-style:italic;        
    background-color:yellow;
    color:Red;
  }

  </style></head>
<body>
  <form id="test">
    <p><label>Enter Name: <input id="name" placeholder="Your Name"/></label></p>
    <p><label>Enter Street: <input id="street" class="address" 
placeholder="Your address" /></label></p>
    <p><label>Enter a zip code: <input type="num" pattern="(0-9){5}" 
id="zip" class="address" placeholder="5 digit zip" /></label></p>
    <input type="submit" />
  </form>
</body>
</html>


필드에 초점이 설정되어 입력할 수 있게 되기 전에는 자리 표시자 텍스트가 지정한 스타일로 표시됩니다. 필드에 초점이 있으면 입력 필드의 보통 스타일로 돌아가고 자리 표시자 텍스트가 사라집니다.

각각 자리 표시자 텍스트를 포함하고 배경색과 텍스트로 스타일이 지정된 세 개의 입력 필드 그림

이 페이지를 보세요. 이 페이지를 올바르게 렌더링하려면 Internet Explorer 10이 필요합니다.

autofocus 특성

autofocus 특성을 사용하면 웹 페이지가 로드된 후 필드나 컨트롤로 초점을 보내 사용자를 특정 필드로 안내할 수 있습니다. 이 특성은 사용자에게 지침과 편리함을 모두 제공할 수 있으며, 페이지가 열릴 때 양식 컨트롤을 클릭하거나 탭해야 하는 필요성을 줄이는 데 도움이 됩니다.

문서에서 하나의 컨트롤에만 autofocus를 지정할 수 있습니다. 여러 요소에 이 특성이 있는 경우 페이지가 열릴 때 페이지의 첫 번째 요소에만 초점이 설정됩니다. 부울 특성이므로 값으로 설정할 필요가 없습니다. 이 특성이 있으면 "true"임을 암시합니다.


<input name="email" type="text" placeholder="joe@contoso.com" autofocus />

novalidate 및 formnovalidate 특성

유효성 검사 제약 조건이 있는 form 요소에 novalidate 특성을 설정하면 유효성 검사 없이 양식을 제출할 수 있습니다.

양식에 대해 여러 제출 단추를 사용할 수 있습니다. 예를 들어 양식을 제출하는 단추와 사용자가 나중에 완료할 수 있도록 부분적으로 작성된 양식을 저장하는 단추를 사용합니다. 주 제출 단추가 유효성 검사 제약 조건이 있는 양식 요소의 유효성을 검사하도록 하는 동시에 "나중을 위해 저장" 단추가 해당 요소의 유효성을 검사하지 않도록 할 수 있습니다. 이렇게 하려면 전체 양식에 novalidate 특성을 설정하는 대신 나중을 위해 양식을 저장하는 단추에 formnovalidate 특성을 설정합니다.

다음 예제는 두 특성의 사용 방법을 보여 줍니다. formnovalidate 특성은 나중을 위해 저장 단추에 설정하고 novalidate 특성은 두 번째 form 요소에 설정합니다. 즉, 첫 번째 양식에서 제출 단추는 유효성 검사 제약 조건이 있는 양식 요소의 유효성을 검사하지만 나중을 위해 저장 단추는 검사하지 않습니다. 두 번째 양식에서는 유효성 검사 제약 조건에 관계없이 양식 요소의 유효성을 검사하지 않습니다.


<!DOCTYPE html>
<html>
<head>
  <title>novalidate and formnovalidate Example</title>
</head>
<body>
  <form>
    <p><label>*Name: <input type="text" required /></label></p>
    <p><label>*Street: <input type="text" required /></label></p>
    <p><label>*Zip: <input type="text" pattern="[0-9](5|10)" placeholder="5 or 9 digit ZIP" required /></label></p>
    <input type="submit" name=submit value="Submit" />
    <input type="submit" formnovalidate name="save" value="Save for Later" />
    <p>* Required field</p>
  </form>
  <form novalidate>
    <p>Unvalidated area</p>
    <p><label>Name: <input type="text" required /></label></p>
    <p><label>Street: <input type="text" required /></label></p>
    <p><label>Zip: <input type="text" pattern= "[0-9](5|10)" placeholder="5 or 9 digit zip" required /></label></p>
    <input type="submit" name=submit value="Submit" />
  </form>
</body>
</html>


사용자 지정 유효성 검사 오류 메시지

Internet Explorer 10은 input 요소의 다양한 유효성 검사 오류에 대해 여러 일반 메시지를 표시합니다. input 요소의 title 특성을 사용하여 이러한 메시지를 사용자 지정할 수 있습니다. title 특성의 콘텐츠는 필드의 도구 설명 텍스트로 표시되며 일반 패턴 불일치 오류 메시지에 추가됩니다. 다음 예제는 전화 입력 필드에서 번호 형식을 표시하는 프롬프트를 사용자에게 제공하는 방법을 보여 줍니다.


<form>
  <label>Enter a phone number: 
  <input type="text" title="xxx-xxx-xxxx" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
  <input type="submit" />
  </label>
</form>


사용자가 대시를 생략하거나 필드에 문자를 입력하면 다음 응답이 나타납니다. "You must use this format:" 텍스트가 자동으로 표시됩니다.

올바른 형식을 표시하는 도구 설명 텍스트가 있는 전화 입력 필드 그림

암호 필드의 Caps Lock 경고

Caps Lock 키가 켜져 있어서 잘못된 암호를 입력하고 있음을 사용자가 더 빠르게 확인할 수 있도록 Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 typepassword인 입력 필드에 초점이 있고 Caps Lock 키가 켜져 있을 경우 경고 메시지를 추가합니다. 추가로 필요한 코딩은 없습니다.

Caps Lock 키가 켜져 있음을 나타내는 도구 설명 텍스트가 있는 암호 입력 필드 그림

:valid 및 :invalid 의사 클래스를 사용하여 유효성이 검사된 필드 스타일 지정

입력이 유효한지 여부를 나타내는 시각적 피드백을 사용자에게 제공하면 오류 메시지보다 더 나은 환경을 제공할 수 있습니다. Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 CSS 의사 클래스 :valid:invalid를 지원합니다. 이러한 선택기를 사용하면 입력 형식이나 패턴에 따라 입력 필드에 스타일을 지정할 수 있습니다. 예를 들어 올바른 형식의 주소가 입력될 때까지 URL 필드 주위에 빨간색 테두리를 표시할 수 있습니다.

필수 필드는 올바른 입력을 제공할 때까지 유효하지 않습니다. 필수는 아니지만 예를 들어 올바른 형식의 주소가 입력될 때까지 URL 필드 주위에 빨간색 테두리를 표시할 수 있습니다.

각각 :required:optional 의사 클래스를 사용하여 필수 필드나 선택적 필드에 스타일을 지정할 수도 있습니다. "필수" 필드는 이전 섹션에서 설명합니다. "선택적" 필드는 required 특성을 허용할 수 있지만 설정되지 않은 input 필드와 required 특성이 설정되지 않은 textareaselect 요소로 정의됩니다.

다음 예제에서는 유효한 경우 필드에 녹색 테두리를 설정하고 유효하지 않은 경우 굵은 텍스트와 함께 빨간색 테두리를 설정합니다. 메일 필드는 필수이지만 다른 필드는 필수가 아닙니다. URL 필드에는 잘못된 URL이 미리 채워져 있으므로 페이지가 열릴 때 유효하지 않습니다. 또한 두 개의 선택적 필드는 연한 회색 배경으로 스타일이 지정되고 필수 필드는 선명한 노란색 배경으로 스타일이 지정됩니다.


<!DOCTYPE html >
<html>
<head>
  <title>:valid/:invalid Pseudo-class Example</title>
  <style type="text/css">

  #PC1 input:valid { 
    border :solid lime;
    font-weight:normal;
  }
  #PC1 input:invalid { 
    border:solid red;
    font-weight:bold;
  }
  #PC1 input:required{
    background-color:Yellow;
  }
  #PC1 input:optional{
    background-color:LightGray;
  }       
  </style>
</head>
<body>
  <form id="PC1">
    <p><label>Enter some text: <input type="text"/></label></p>
    <p><label>*Enter a valid email address: <input type="email" required /></label></p>
    <p><label>Enter a valid URL: <input type="url" value="not a url"/></label></p>       
    <p>* required field</p>
  </form>
</body>
</html>


메일 주소 필드에 메일 주소를 처음 입력하면 다음과 같이 나타납니다.

여러 입력 필드가 포함된 그림. 메일 입력 필드에는 불완전한 메일 주소가 있고 필드의 테두리 색(빨간색)이 이를 나타냅니다.

(구문상) 유효한 메일 주소를 입력하면 다음과 같이 필드의 테두리 색이 빨간색에서 녹색으로 바뀌고 텍스트가 더 이상 굵게 표시되지 않습니다.

여러 입력 필드가 포함된 그림. 메일 입력 필드에는 완전한 메일 주소가 있고 필드의 테두리 색(녹색)이 이를 나타냅니다.

이렇게 스타일을 지정하면 사용자가 입력하는 동안 필드가 변경되기 때문에 사용자에게 즉시 피드백이 제공됩니다.

이 페이지를 보세요. 이 페이지를 정확하게 렌더링하려면 Internet Explorer 10 또는 양식 유효성 검사 의사 클래스를 지원하는 브라우저가 필요합니다.

입력 유효성 검사를 위한 DOM 메서드, 특성 및 개체

JavaScript로 작성된 양식과 요소의 유효성 검사 상태에 프로그래밍 방식으로 액세스할 수 있게 하는 새 API가 Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱에 추가되었습니다.

checkValidity 메서드[HTMLFormElement의 경우]

checkValidity 메서드는 HTML5 사양의 섹션 4.10.21.2에 설명된 대로 form 요소의 제약 조건 유효성을 정적으로 검사하며 유효성 제약 조건이 양수 결과를 반환하는 경우 "true"를 반환하고, 음수 결과를 반환하는 경우 "false"를 반환합니다.

checkValidity 메서드[HTMLInputElement 및 다른 모든 양식 요소의 경우]

checkValidity 메서드는 요소가 유효한지 확인하고, 유효하면 "true"를 반환합니다. 그렇지 않으면 "false"를 반환합니다. 요소가 유효하지 않으면 취소 가능하지만 기본 이벤트를 포함하지 않는 간단한 invalid 이벤트도 발생합니다.

willValidate 특성

willValidate 특성은 요소의 유효성을 검사할 수 있는 경우(예: url 또는 email 입력 형식이나 validation 특성이 설정된 요소) "true"를 반환하고, 그렇지 않으면 "false"를 반환합니다.

validity 특성

validity 특성은 요소의 유효 상태 개체(ValidityState)를 반환합니다. 개체는 라이브 상태이며 특성을 검색할 때마다 동일한 개체가 반환됩니다.

validationMessage 특성

validationMessage 특성은 양식의 현재 상태에 따라 표시되는 오류 메시지를 반환합니다. 예를 들어 당시에 양식을 제출한 경우 유효하지 않습니다.

setCustomValidity(DOMString 오류) 메서드

setCustomValidity 메서드는 요소의 사용자 지정 유효성 오류 메시지를 설정합니다.

ValidityState 개체

ValidityState 개체는 다음 읽기 전용 부울 특성에 대해 "true" 또는 "false"를 반환합니다.

특성설명

valueMissing

사용자가 필수 필드에 값을 입력하지 않았습니다.

typeMismatch

사용자가 잘못된 형식의 URL이나 메일 주소 등 올바른 구문이 아닌 내용을 입력했습니다.

patternMismatch

사용자가 pattern 특성에 지정된 것과 일치하지 않는 내용을 입력했습니다(숫자가 필요할 때 문자를 입력함).

tooLong

컨트롤 값이 maxlength 특성에 지정된 것보다 더 깁니다. Windows Internet Explorer에서는 사용자가 maxlength자의 문자만 입력할 수 있으므로 이 오류는 대체로 기본값에 너무 많은 문자가 포함된 경우에 발생합니다.

rangeUnderflow

사용자가 min 특성에 지정된 것보다 작은 값을 입력했습니다.

rangeOverflow

사용자가 max 특성에 지정된 것보다 큰 값을 입력했습니다.

stepMismatch

사용자가 stepmin 특성에 지정된 허용 값과 일치하지 않는 값을 입력했습니다. 예를 들어 짝수가 필요할 때 사용자가 홀수를 입력했습니다.

customError

컨트롤에 요소의 setCustomValidity 메서드로 설정된 메시지가 있습니다(문자열이 비어 있지 않음).

valid

다른 조건은 true가 아닙니다.

 

API 참조

:invalid
:optional
:required
:valid
checkValidity
input
progress
setCustomValidity
validationMessage
validity
ValidityState
willValidate

샘플 및 자습서

폼 컨트롤 샘플
폼 유효성 검사 샘플

Internet Explorer 테스트 드라이브 데모

터치 중심 컨트롤

IEBlog 게시물

터치가 용이한 사이트 빌드 지침

사양

HTML5: 섹션 4.10

 

 

표시:
© 2014 Microsoft