클라이언트 검증은 웹 클라이언트 프로그램의 가장 일반적으로 사용되는 기능 중 하나입니다. HTML5는 이미 양식 검증 기능을 제공했습니다. 왜 인기가 없는지에 관해서는, 호환되는 것으로 추정되며 스타일은 너무 못 생겼습니다.
아래는 HTML 및 CSS 만 사용하여 HTML5 및 CSS3의 양식 검증을 단계별로 생성합니다.
다음은 다음과 같습니다.
1 단계 : 검증 필드를 정렬하고 타이핑하십시오우선, 우리는 다음 분야가 필요합니다.
사용자가 정보를 입력 한 후에는 오류 데이터와 서버에 대한 데이터를 피하기 위해 사용자의 정보가 올바른지 확인해야합니다.
HTML5의 새로운 사양에서 입력 입력 상자는 다음과 같은 다양한 입력 유형을 제공합니다. 예를 들어, 숫자는 모바일 키보드의 순수한 숫자로 자동 전환되며 이메일 키보드는@키보드로 자동 전환됩니다.
2 단계 : 양식 스타일을 결정하십시오우리는 또한 형식의 최종 스타일을 결정해야합니다. 여기서 나는이 시간의 데모 스타일로 드리블의 양식 스타일을 찾았습니다.
3 단계 : 템플릿 코드표준 HTML5 문 코드를 사용하십시오
<!4 단계 : 양식을 만듭니다
기본 형식 요소를 만듭니다. 여기서는 데이터를 제출하지 않습니다.
<양식 action = onsubmit = return false> </form>5 단계 : 요소를 만듭니다
테이블 요소에는 다음 요소 구성이 있습니다.
UL 및 LI 요소는 타이포그래피 레이아웃에 사용되며 테이블 장치 요소 및 레이아웃을 나누는 데 사용됩니다. 레이블은 양식의 필드 프롬프트 텍스트에 사용됩니다. 입력은 사용자 입력 데이터에 사용됩니다. 스팬은 이모티콘을 사용하여 사용자 필드가 올바르게 채워 졌는지 표시하는 데 사용됩니다.
<ul> <li> <label for = name> full name </label> <입력 유형 = 텍스트 id = 이름 이름 = 이름 자리 표시 자 = 이름을 입력하십시오/> <span class = icon-name> </span> < /span> </span> li> </ul>
양식 HTML 코드 완료 코드는 다음과 같습니다.
6 단계 : 스타일을 추가하십시오양식 요소의 글쓰기를 완료하고 스타일을 강하게 개선하여 더 아름답게 보이게합니다.
Body {Display;} 형태 : 0 10%; 마진-바닥 : #333; 색상; 절대;CSS 코드는 다음과 같이 코드를 완성합니다.
7 단계 : 이모티콘 프롬프트를 추가하십시오각 양식 구조에서 이름 필드에 <span class = icon-name> </span> 레이블을 추가하는 것과 같은 스팬 태그를 추가했습니다. 이제 학교 시험장의 상태에 스타일을 추가하십시오.
li {display : posity; 오른쪽;