자동 완성 기능은 이제 인터넷에서 인기 있는 기능입니다. 양식 필드에 무언가를 입력하면 브라우저는 해당 기능이 활성화되어 있고 브라우저에서 지원하는 경우 추천 단어 목록을 제공합니다.
이제 이러한 애플리케이션을 매우 쉽게 구현할 수 있습니다. 이렇게 하려면 입력 요소에 자동 완성 속성을 할당하면 됩니다.
<입력 유형="텍스트" 자동 완성="켜기" />
값은 필드에 대한 자동 완성을 활성화합니다. 이제부터 브라우저는 필드에 입력한 값을 기억하고 나중에 선택 목록을 통해 제공합니다. 이렇게 하면 양식을 훨씬 더 빠르게 완성할 수 있습니다.
그러나 모든 필드에서 이 동작이 바람직한 것은 아닙니다. 이러한 경우에는 자동 완성을 명시적으로 비활성화할 수 있습니다. 이렇게 하려면 자동 완성 속성에 off 값을 할당합니다.
<입력 유형="텍스트" 자동 완성="꺼짐" />
또는 양식 요소에 자동 완성 속성을 추가할 수도 있습니다. 여기서 값을 켜짐 또는 꺼짐으로 사용했는지 여부에 따라 전체 양식에 대해 자동 완성 기능이 활성화되거나 비활성화됩니다.
<form autocomplete="on"> ... </form>
그러나 양식 내에 반대되는 사양이 있는 경우 해당 사양이 적용됩니다.
<양식 자동 완성="켜짐"> 이름: <입력 유형="텍스트" 이름="vname" 자동 완성="꺼짐" /><br /> 이름입니다: <입력 유형="text" name="nname" /><br /> 우편번호: <입력 유형="text" name="plz" /><br /> 도시: <입력 유형="text" name="ort" /> </form>
이 예에서는 도입 양식 요소에서 자동 완성 값이 켜짐으로 설정되었으므로 모든 양식 필드에 자동 완성이 적용됩니다. 여기서 유일한 예외는 vname 필드입니다. 이 필드에 대해 자동 완성 기능이 명시적으로 비활성화되었기 때문입니다.
자동 완성 기능이 작동하려면 해당 브라우저에서 이 기능을 지원해야 하며 비활성화되어 있지 않아야 합니다. 또한 이미 한 번 입력한 값만 제안 목록에 표시됩니다.
데이터리스트 요소는 제안 목록의 값에 실질적인 영향을 미칠 수 있도록 HTML5와 함께 도입되었습니다. 이 요소는 브라우저에서 눈에 보이는 출력을 생성하지 않습니다. 제안 목록의 값은 하위 옵션 요소를 통해 정의할 수 있습니다. 예를 들어 보겠습니다:
<div> Language: <br /> <입력 유형="텍스트" 자동 완성="켜짐" 목록="언어" /> </div> <데이터리스트 id="언어"> <옵션 값="HTML5"></옵션> <옵션 값="XHTML"></옵션> <옵션 값="php"></옵션> <옵션 값="JavaScript"></옵션> </datalist>
입력 요소의 목록 속성은 입력 필드와 데이터리스트 요소 간의 논리적 연결을 만드는 데 사용됩니다. 이렇게 하려면 목록 속성과 데이터 목록 요소의 id 속성에 동일한 값을 사용해야 합니다.
포커스 설정
페이지가 호출될 때 양식 필드에 포커스를 자동으로 할당할 수 있습니다. 예를 들어 Google 홈페이지에서 이러한 기능을 알 수 있습니다. 이 페이지가 호출되면 검색/입력 필드에 커서를 수동으로 놓을 필요 없이 검색어를 바로 입력할 수 있습니다.
HTML5에는 이러한 경우를 위한 자동 초점 속성이 있습니다. 이 속성을 사용하면 페이지가 로드될 때 해당 속성이 있는 양식 필드에 자동으로 포커스가 할당됩니다.
예시입니다:
<양식> <입력 이름="검색 필드" 자동 초점="자동 초점" /> <입력 유형="제출" 값="검색" /> </양식>
자동 초점 속성을 인식하지 못하는 브라우저는 이를 무시하기만 하면 됩니다. 이 무시에는 부정적인 영향이 없습니다. (단, 필드에 초점이 맞춰지지 않습니다).
항목 확인
지금까지는 HTML 도구만으로는 양식 항목을 확인할 수 없었습니다. 예를 들어 사용자가 양식 필드에 이메일 주소를 실제로 입력했는지 테스트하려면 일반적으로 JavaScript나 php를 사용해야 했습니다. HTML5에서는 이러한 '왜곡'이 더 이상 필요하지 않습니다. HTML에는 이제 유효성 검사 API가 함께 제공되기 때문입니다. 그리고 많은 기능을 제공합니다. 이제 아주 적은 노력으로 양식 항목을 확인할 수 있습니다.
HTML5에는 필드 유효성 검사 방법을 결정하는 여러 가지 규칙이 있습니다. 예를 들어 이메일 유형의 입력 필드는 구문적으로 올바른 이메일 주소가 입력되었는지 확인합니다.
- url - URL을 확인합니다.
- email - 이메일 주소 확인
- 범위 - 부동 소수점 숫자인지 확인합니다.
- number - 부동 소수점 숫자인지 확인합니다.
필드를 필수 필드로 표시하려면 필수 속성이 필드에 할당됩니다.
<입력 id="vname" name="vname" type="text" required="required" />
이 속성으로 레이블이 지정된 필드는 반드시 입력해야 하며, 비어 있으면 안 됩니다.
하지만 필드의 유효성을 검사하려면 특정 요구 사항을 충족해야 합니다.
- 이름 속성이 요소에 할당되어야 합니다.
- 요소는 양식 요소 내에 있어야 합니다. 즉, HTML 양식에 있어야 합니다. 또는 양식 속성을 통해 양식에 대한 연결을 설정할 수도 있습니다.
- 요소에 읽기 전용 또는 비활성화 속성이 없어야 합니다.
올바른 애플리케이션은 다음과 같습니다:
<form action="form.php"> <input id="vname" name="vname" type="text" required="required" /> <input type="submit" /> </form>
여기서 브라우저는 필드가 채워졌는지 여부를 확인합니다. 필드가 비어 있는데도 양식을 제출하려고 시도하면 이제 브라우저에 오류 메시지가 표시됩니다.
양식 필드 유형인 이메일, 범위, 번호, 전화 및 URL은 이미 이 시리즈에서 여러 번 언급했습니다. 이러한 필드는 값이 포함되어 있는지 여부뿐만 아니라 입력한 값이 올바른지 여부도 확인합니다.
<form action="form.php"> <input id="email" name="email" type="email" /> <input type="submit" /> </form>
예를 들어 이메일 유형 필드의 경우 시스템은 입력된 값이 실제로 구문상 올바른 이메일 주소인지 확인합니다. 그렇지 않은 경우 브라우저에 오류 메시지가 표시됩니다.
오류 메시지 표시는 브라우저의 책임입니다.
자동으로 확인되지 않는 필드
입력 항목의 자동 유효성 검사가 항상 바람직한 것은 아닙니다. 전체 양식의 유효성 검사를 방지하려면 도입 양식 요소에 novalidate 속성을 할당하세요.
<form action="form.php" novalidate> <input id="email" name="email" type="email" /> <input type="submit" /> </form>
또는 formnovalidate 속성을 제출 버튼에 추가할 수도 있습니다. 예를 들어 제출 버튼과 병행하여 양식을 임시로 저장하는 버튼을 제공하는 경우 유용합니다.
<form action="form.cgi" method="post"> <입력 id="이메일" 이름="이메일" 유형="이메일" /> <입력 유형="제출" 이름="제출" 값="보내기" /> <입력 유형="제출" formnovalidate="formnovalidate" 값="저장" /> <입력 유형="제출" formnovalidate="양식 유효성 검사" 값="로그아웃" /> </form>
이 경우 양식은 첫 번째 제출 버튼을 통해서만 유효성이 검사됩니다. 나머지 두 개는 저장 및 로그아웃에 사용됩니다. 이러한 경우에는 유효성 검사가 필요하지 않습니다.
