HTML5 CSS3은 등록 양식을 구현합니다. example_html5 튜토리얼 기술

렌더링은 다음과 같습니다:

html 소스 코드:

코드 복사

코드

개인정보 🎜>계정:
> 비밀번호:
;label for=password2>비밀번호 반복:< ;/label>
=email>이메일 주소:

기타 정보

Age:<입력 ID =age class=textbox type=숫자 이름 =age min=18 step=2 패턴="[0-9]{1,3}" placeholder="연령 입력">
월급:

10000
<script> showValue(value) { <br>document.getElementById("rangevalue ").innerHTML=value <br>} <br></script>
Description:

코드 복사


코드는 다음과 같습니다.

본문{
배경:url(bg.jpg) 반복;
글꼴 계열:Arial Narrow, Arial, sans-serif;
여백:0;
패딩:0;
}
머리글, 섹션, 바닥글{
표시:블록;
}
헤더{
너비:100%;
배경색:rgb(0, 0, 0);
배경색:rgba(0, 0, 0, 0.9);
색상:#ccc;
패딩:15px 0;
글자 간격:1px;
여백-하단:20px;
위치:상대적;
}
헤더 h1{
여백:0 50px;
text-shadow:2px 2px 2px #888;
플로트:왼쪽;
}
#backlinks{
float:right;
여백:-10px 20px;
줄 높이:25px;
글꼴 두께:굵게;
글꼴 크기:12px;
텍스트 정렬:오른쪽;
}
#backlinks a{
color:#ccc;
텍스트 장식:없음;
여백:3px 0 0;
디스플레이:블록;
}
#backlinks a:hover{
color:#fff;
}
바닥글{
배경색:rgb(0, 0, 0);
배경색:rgba(0, 0, 0, 0.8);
높이:25px;
폭:100%;
줄 높이:25px;
위치:상대적;
글꼴 계열:Arial,Helvetica,sans-serif;
하단:0;
왼쪽:0;
색상:#888;
글꼴 크기:11px;
}
바닥글 범위{
padding-left:20px;
}
바닥글 a{
color:#1FA2E1;
}
#wrapper{
너비:770px;
여백:0 자동;
텍스트 정렬:가운데;
}
#wrapper hgroup{
margin:20px 0;
텍스트 그림자:1px 1px 1px #ccc;
}
#wrapper h1{
color:#146FA0;
글꼴 크기:42px;
여백:0;
}
#wrapper h2{
color:#71C1ED;
글꼴 크기:27px;
여백:0;
}
#lbl{
색상:#777;
글꼴 크기:17px;
글꼴 두께:굵게;
텍스트 그림자:1px 1px 0 #fff;
여백:10px 0;
}
*:초점{
개요:없음;
}
라벨, 입력, 텍스트 영역, 필드 세트{
디스플레이:블록;
}
fieldset#계정, fieldset#개인{
너비:250px;
패딩:0 50px 50px;
여백:10px;
플로트:왼쪽;
배경:rgb(244,244,244);
배경:rgba(244,244,244,0.7);
-webkit-border-radius: 25px;
-moz-국경-반경: 25px;
테두리 반경: 25px;
테두리:3px 더블 #999;
}
fieldset#confirm{
padding-top:10px;
지우기:둘 다;
테두리:없음;
줄 높이:15px;
여백:10px 0;
}
fieldset#confirm 라벨, fieldset#confirm 입력{
display:inline;
플로트:왼쪽;
여백:15px 5px 0;
}
범례{
글꼴 크기:20px;
글꼴 두께:굵게;
글자 간격:5px;
색상:#999;
왼쪽 여백:-20px;
텍스트 정렬:왼쪽;
패딩:0 10px;
텍스트 그림자:1px 1px 0 #ccc;
}
레이블{
글꼴 크기:17px;
글꼴 두께:굵게;
여백:17px 0 7px;
텍스트 정렬:왼쪽;
텍스트 그림자:1px 1px 0 #fff;
}
텍스트 영역{
크기 조정:둘 다;
최대 너비:230px;
}
input.textbox, textarea{
padding:5px 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
테두리 반경: 15px;
테두리:1px 단색 #fff;
폭:200px;
text-shadow:1px 1px 1px #777;
-moz-box-shadow: 0px 2px 0px #999;
-webkit-box-shadow: 0px 2px 0px #999;
상자 그림자: 0px 2px 0px #999;
-webkit-transition: 모두 0.5초의 easy-in-out;
-moz-transition: 모두 0.5초의 easy-in-out;
전환: 모두 0.5초 완화;
배경:url(required.png) 반복 없음 200px 5px #F0F0EF;
배경:-webkit-gradient(선형, 왼쪽 위, 왼쪽 아래, from(#E3E3E3), to(#FFFFFF)); /* Saf4, 크롬 */
background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* 크롬 10, Saf5.1 */
background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6 */
배경:-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input.textbox:focus, textarea:focus{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
변환: scale(1.1);
-moz-box-shadow: 5px 3px 1px #ccc;
-webkit-box-shadow: 5px 3px 1px #ccc;
상자 그림자: 7px 7px 2px #ccc;
text-shadow:1px 1px 3px #777;
}
input.textbox:required{
background:url(required.png) 반복 없음 200px 5px #F0F0EF;
배경:url(required.png) 반복 없음 200px 5px, -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(#E3E3E3), to(#FFFFFF)); /* Saf4, 크롬 */
background:url(required.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10 , Saf5.1 */
background:url(required.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6 */
배경:url(required.png) 반복 없음 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(required.png) 반복 없음 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* 오페라 11.10 */
}
input.textbox:required:valid{
배경:url(valid.png) 반복 없음 200px 5px #F0F0EF;
배경:url(valid.png) 반복 없음 200px 5px, -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(#E3E3E3), to(#FFFFFF)); /* Saf4, Chrome */
background:url(valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* 크롬 10, Saf5.1 */
background:url(valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6 */
배경:url(valid.png) 반복 없음 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
배경:url(valid.png) 반복 없음 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input.textbox:focus:invalid, input.textbox:not(:required):invalid{
background:url(invalid.png) no-repeat 200px 5px # F0F0EF;
배경:url(invalid.png) 반복 없음 200px 5px, -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(#E3E3E3), to(#FFFFFF)); /* Saf4, Chrome */
background:url(invalid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10 , Saf5.1 */
background:url(invalid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6 */
배경:url(invalid.png) 반복 없음 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(invalid.png) 반복 없음 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input[type=submit] {
padding:10px;
여백:0 10px !중요;
너비:300px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=range] {padding:0;}
}
#rangevalue {
디스플레이:블록;
텍스트 정렬:오른쪽;
여백 상단:-25px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #aaa;
글꼴 스타일:기울임꼴;
텍스트 그림자:1px 1px 0 #fff;
}
입력:-moz-placeholder, 텍스트 영역:-moz-placeholder {
색상: #aaa;
글꼴 스타일:기울임꼴;
텍스트 그림자:1px 1px 0 #fff;
}
.clearfix{
clear:both;
}