HTML5 양식이있는 HTML5 자습서 로그인 페이지
HTML5는 많은 기능과 개선 사항을 제공합니다. 웹 양식, 소개 된 새로운 속성과 입력 유형이 있습니다. 주로 웹 개발자의 삶을 더 쉽게 만들고 웹 사용자에게 더 나은 경험을 제공합니다..
그래서,이 포스트에서 우리는 다음을 사용하여 로그인 페이지를 만들 것입니다. HTML5 양식 새로 추가 된 기능의 작동 방식보기.
- 데모
- 소스 다운로드
HTML5 입력
다음 마크 업을 살펴 보겠습니다..
이전에 HTML 양식으로 작업 한 적이 있다면 익숙 할 것입니다. 그러나 차이점을 발견하게 될 것입니다. 입력은 자리 표시 자 과 필수 HTML5의 새로운 속성 인 속성.
자리 표시 자
그만큼 자리 표시 자 속성을 사용하면 입력에 초기 텍스트를 제공 할 수 있습니다. 초점 상태 또는 채워져 있습니다. 이전에는 자바 스크립트를 사용 했었지만 이제는이 새로운 속성으로 인해 훨씬 쉽게됩니다..
필수 속성
그만큼 필수 속성은 필드를 필수로 설정하므로 양식을 제출하기 전에 비워 둘 수 없으므로 사용자가 필드를 채우지 않으면 다음 오류가 나타납니다.
CSS3에도 새로운 선택 도구가 도입되었습니다., : 필수 로 대상 필드 필수 속성. 다음은 그 예입니다.
입력 : 필수 border : 1px solid red;
이메일 입력 유형
첫 번째 입력 유형은 다음과 같습니다. 이메일 실제로는 새로운 필드 유형 HTML5에도 추가되었습니다. 그만큼 이메일 유형은 현장에서 기본 이메일 주소 확인을 제공합니다. 사용자가 전자 메일 주소로 필드를 채우지 않으면 브라우저에 다음 알림이 표시됩니다.
이메일 입력 유형을 사용하면 iPhone 및 Android 사용자와 같은 모바일 사용자에게 더 나은 환경을 제공 할 수 있습니다. 이메일에 최적화 된 온 스크린 키보드 헌신적 인 “@” 전자 메일 주소를 더 빠르게 입력하는 데 도움이되는 단추.
단점
HTML5에서 제공되는 새로운 양식 기능은 강력하고 구현하기 쉽지만 일부 영역에서는 여전히 부족합니다. 예를 들면;
그만큼 자리 표시 자 속성, 최신 브라우저에서만 지원됩니다. - Firefox 3.7 이상, Safari 4 이상, Chrome 4 이상 및 Opera 11+. 따라서 지원되지 않는 브라우저에서 작동해야하는 경우이 폴리 폴리을 Modernizr과 함께 사용할 수 있습니다.
같은 일이 필수 속성. 오류 알림을 개인 설정할 수 없으며 오류가 유지됩니다. “이 입력란을 작성하십시오.” 오히려 “이름을 기입하십시오.”, 이 속성 지원은 최신 브라우저로 제한됩니다..
따라서 JavaScript를 사용하여 필요한 필드의 유효성을 검사하는 것이 (지금까지) 더 나은 옵션입니다..
function validateForm () var x = document.forms [ "login"] [ "username"]. 값; if (x == null || x == "") alert ( "사용자 이름을 기입하십시오"); false를 반환;
양식 스타일 지정하기
이제 로그인 양식을 CSS로 장식 해 보겠습니다. 먼저 배경에 나무 패턴을 HTML 꼬리표.
html background : url ( 'wood_pattern.png'); 글꼴 크기 : 10pt;
그런 다음 기본 채우기 및 여백을 제거해야합니다. ul 전체를 감싸는 태그 투입물 떠 다니고 리 왼쪽으로, 그래서 입력은 가로로 나란히 표시됩니다.
.loginform ul 패딩 : 0; margin : 0; .loginform li 디스플레이 : 인라인; 왼쪽으로 뜨다;
우리는 리, 부모는 무너질 것이고, 그래서 우리는 부모님 주위를 clearfix 해킹으로 해결할 필요가있다..
라벨 디스플레이 : 블록; color : # 999; .cf : before, .cf : after content : ""; 전시 : 테이블; .cf : after clear : both; .cf * zoom : 1; : focus outline : 0;
CSS3에는 부정 선택자가 있습니다. 그래서, 우리는 그것을 목표로 사용할 것입니다. 투입물 이외의 제출하다 유형,이 경우에는 이메일 및 비밀번호 입력을 타겟팅합니다.;
.loginform input : not ([type = submit]) 패딩 : 5px; margin-right : 10px; 국경 : 1px 솔리드 rgba (0, 0, 0, 0.3); border-radius : 3px; 상자 그림자 : 삽입 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px rgba (250, 250, 250, 0.5);
마지막으로, 우리는 제출 버튼을 클릭합니다..
.loginform 입력 [type = submit] border : 1px 솔리드 rgba (0, 0, 0, 0.3); 배경 : # 64c8ef; / * 오래된 브라우저 * / 배경 : -moz-linear-gradient (상단, # 64c8ef 0 %, # 00a2e2 100 %); / * FF3.6 + * / background : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0 %, # 64c8ef), 컬러 스톱 (100 %, # 00a2e2)); / * Chrome, Safari4 + * / background : -webkit-linear-gradient (상단, # 64c8ef 0 %, # 00a2e2 100 %); / * Chrome10 +, Safari5.1 + * / 배경 : -o 선형 그라데이션 (위쪽, # 64c8ef 0 %, # 00a2e2 100 %); / * Opera 11.10 이상 * / 배경 : -ms-linear-gradient (상단, # 64c8ef 0 %, # 00a2e2 100 %); / * IE10 + * / 배경 : 선형 그래디언트 (아래쪽, # 64c8ef 0 %, # 00a2e2 100 %); / * W3C * / filter : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color : #fff; 패딩 : 5px 15px; margin-right : 0; margin-top : 15px; border-radius : 3px; 텍스트 그림자 : 1px 1px 0px rgba (0, 0, 0, 0.3);
이제는 다음 링크에서 로그인 양식을 시도 할 수 있습니다..
- 데모
- 소스 다운로드
최종 단어
이 튜토리얼에서는 HTML5 양식의 몇 가지 새로운 기능을 살펴 보았습니다.자리 표시 자, 필수 과 이메일 입력 유형을 사용하여 간단한 로그인 페이지를 작성하십시오. 우리는 또한 속성의 단점을 극복하여 더 나은 접근 방법을 결정할 수 있습니다.
다음 글에서는 또 다른 새로운 HTML5 양식 기능을 살펴볼 예정이므로 계속 지켜봐 주시기 바랍니다..
