비디오: 웹에플리케이션 만들기 - HTML 속성 2024
HTML5는 새로운 양식 요소를 도입하고 모든 양식 요소에 몇 가지 새로운 기능을 제공합니다.
-
autofocus : 이 속성을 가진 요소는 첫 번째 사용자 입력의 초점입니다. 일반적으로 양식의 첫 번째 요소에 autofocus 속성을 적용하고 양식 당 하나의 자동 초점 필드 만 사용합니다. 코드는 다음과 같습니다.
이름
브라우저가 자동 초점 속성을 허용하지 않으면 아무런 해가 없으며 JavaScript 기반 솔루션을 계속 사용할 수 있습니다.
-
pattern : 이 형식을 사용하여 폼의 유효성 검사에 사용되는 정규식을 지정할 수 있습니다. 내용이 정규 표현식과 일치하면 해당 필드는 유효한 것으로 간주됩니다. 정규 표현식을 디버그하는 것이 어려울 수 있으므로 표준 유효성 검증 기술이 충분하지 않은 경우에만이 속성을 사용하십시오.
브라우저에서이를 사용자의 팁으로 사용할 수 있습니다. 패턴 정보를 자리 표시 자 텍스트로 추가하는 것도 유용 할 수 있습니다.자리 표시 자
: 자리 표시자는 레이블 태그를 사용하지 않고 텍스트 필드의 용도를 나타내는 임시 레이블 역할을합니다. 사용자가 필드를 활성화하자마자 자리 표시 자 텍스트가 사라집니다. 간단한 코드 샘플:
자리 표시 자 텍스트는 특히 입력의 형식을 지정하는 데 유용합니다 (특히 유효성 검사 또는 패턴으로 적용 할 경우).
필수
-
: 지원 브라우저가 채워지지 않은 경우 필수 입력란을 모두 빨간색으로 강조 표시하여 필수 입력란을 표시합니다. 일부 브라우저는 사용자가 양식을 제출하려고 할 때 경고 메시지를 보냅니다. 빈 필수 필드.
필수 pseudo-class를 사용하면 양식의 모든 필수 요소에 CSS 스타일을 적용 할 수 있습니다 (예: 테두리 또는 배경색 지정) . : 필수 {border: 1px solid red;}필드가 필수 속성 (필수 속성 포함) 일 경우, CSS 스타일은 빨간색 테두리가있는 필수 요소를 표시하는 데 사용됩니다. 그것은 약간의 가치를 담고있다.
유효성 검사:
양식 유효성 검사는 웹 개발에서 가장 까다로운 부분 중 하나입니다. 사용자 정보를 묻는 양식을 설정하는 것은 꽤 쉽지만 사용자가 정보를 올바르게 입력했는지 확신하는 것은 매우 어려울 수 있습니다.
HTML5가 도움이됩니다. 특수 목적 입력 요소를 사용하면 브라우저가 자동으로 양식 필드를 검사하여 올바른 형식인지 확인합니다. 항목이 유효하지 않은 경우 양식은 (일반적으로) 제출되지 않으며 특수: 유효하지 않은 CSS 의사 클래스가 유효하지 않은 필드와 연관됩니다. 무효 상태: : 유효하지 않은 {background-color: red;}
이 CSS 상태가 활성화되면 유효하지 않은 모든 필드에는 다음과 같은 잘못된 스타일이 적용됩니다. 예를 들어 색상 필드와 여기에 정의 된 빨간색 배경 CSS 스타일이있는 경우 사용자가 유효한 색상 (인식 된 색상 이름 또는 16 진수 색상 값)을 입력하지 않으면 색상 필드는 빨간색 배경을 갖습니다. 마찬가지로 유효한 전자 메일 주소가 입력 될 때까지 전자 메일 필드가 빨간색으로 표시됩니다. 양식에 다른 코드를 추가하지 않아도됩니다. 잘못된 항목을 표시하기 위해 CSS를 추가하기 만하면 브라우저가 나머지 작업을 수행합니다.
해당 요소에 novalidate 속성을 추가하여 모든 필드의 유효성을 해제 할 수 있습니다.
모든 필드의 유효성이 검사 될 때까지 브라우저가 양식 처리를 거부 할 가능성이 있지만이 동작은 아직 HTML5 호환 브라우저에서 보편적이지는 않습니다.
