HTML5 CSS3 implementiert ein Registrierungsformular. example_html5 Tutorial-Fähigkeiten

Das Rendering ist wie folgt:

HTML-Quellcode:

Code kopieren

Der Code lautet wie folgt:

ajax.googleapis.com/ ajax/libs/jquery/1.7.1/jquery.min.js">

🎜>Account: > Passwort: ;label for=password2>Passwort wiederholen:< ;/label> =email>E-Mail-Adresse:

Andere Informationen

Persönliche URL: class=textbox type=url name=website required placeholder="http://www.example.com" />Age: =Alter Klasse=Textfeld Typ=Nummer Name =Alter min=18 Schritt=2 Muster="[0-9]{1,3}" Platzhalter="Alter ausfüllen"> Monatsgehalt:
10000 showValue(value) {
document.getElementById("rangevalue").innerHTML=value;
}

bestätigen>

/form>

Code kopieren


Der Code lautet wie folgt:

body{
background:url(bg.jpg) wiederholen;
Schriftfamilie:Arial Narrow, Arial, serifenlos;
Rand:0;
padding:0;
}
Kopfzeile, Abschnitt, Fußzeile{
display:block;
}
header{
width:100%;
Hintergrundfarbe:rgb(0, 0, 0);
Hintergrundfarbe:rgba(0, 0, 0, 0.9);
Farbe:#ccc;
padding:15px 0;
Buchstabenabstand:1px;
margin-bottom:20px;
Position:relativ;
}
header h1{
margin:0 50px;
text-shadow:2px 2px 2px #888;
float:left;
}
#backlinks{
float:right;
Rand: -10px 20px;
Linienhöhe:25px;
font-weight:bold;
Schriftgröße:12px;
text-align:right;
}
#backlinks a{
color:#ccc;
text-decoration:none;
margin:3px 0 0;
display:block;
}
#backlinks a:hover{
color:#fff;
}
footer{
background-color:rgb(0, 0, 0);
Hintergrundfarbe:rgba(0, 0, 0, 0.8);
Höhe:25px;
Breite:100 %;
Linienhöhe:25px;
Position:relativ;
Schriftfamilie:Arial,Helvetica,Sans-Serif;
unten:0;
links:0;
Farbe:#888;
Schriftgröße:11px;
}
footer span{
padding-left:20px;
}
Fußzeile a{
color:#1FA2E1;
}
#wrapper{
width:770px;
margin:0 auto;
text-align:center;
}
#wrapper hgroup{
margin:20px 0;
text-shadow:1px 1px 1px #ccc;
}
#wrapper h1{
color:#146FA0;
Schriftgröße:42px;
Rand:0;
}
#wrapper h2{
color:#71C1ED;
Schriftgröße:27px;
Rand:0;
}
#lbl{
color:#777;
Schriftgröße:17px;
font-weight:bold;
text-shadow:1px 1px 0 #fff;
Rand:10px 0;
}
*:focus{
outline:none;
}
Label, Eingabe, Textbereich, Feldsatz{
display:block;
}
fieldset#account, fieldset#personal{
width:250px;
padding:0 50px 50px;
Rand:10px;
float:left;
Hintergrund:rgb(244,244,244);
Hintergrund:rgba(244,244,244,0.7);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
Rahmenradius: 25px;
border:3px double #999;
}
fieldset#confirm{
padding-top:10px;
clear:both;
border:none;
Linienhöhe:15px;
Rand:10px 0;
}
fieldset#confirm label, fieldset#confirm input{
display:inline;
float:left;
Rand:15px 5px 0;
}
legend{
font-size:20px;
font-weight:bold;
Buchstabenabstand:5px;
Farbe:#999;
margin-left:-20px;
text-align:left;
padding:0 10px;
text-shadow:1px 1px 0 #ccc;
}
label{
font-size:17px;
font-weight:bold;
Rand:17px 0 7px;
text-align:left;
text-shadow:1px 1px 0 #fff;
}
textarea{
resize:both;
max-width:230px;
}
input.textbox, textarea{
padding:5px 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
Rahmenradius: 15px;
border:1px solid #fff;
Breite:200px;
text-shadow:1px 1px 1px #777;
-moz-box-shadow: 0px 2px 0px #999;
-webkit-box-shadow: 0px 2px 0px #999;
box-shadow: 0px 2px 0px #999;
-webkit-transition: alle 0,5 Sekunden Easy-in-out;
-moz-transition: alle 0,5 s Ease-in-out;
Übergang: alle 0,5 Sekunden Easy-in-out;
Hintergrund:URL(erforderlich.png) keine Wiederholung 200px 5px #F0F0EF;
Hintergrund:-webkit-gradient(linear, links oben, links unten, von(#E3E3E3), bis(#FFFFFF)); /* Saf4 , Chrome */
background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10 , Saf5.1 */
background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6 */
background:-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);
transformieren: Skala(1.1);
-moz-box-shadow: 5px 3px 1px #ccc;
-webkit-box-shadow: 5px 3px 1px #ccc;
box-shadow: 7px 7px 2px #ccc;
text-shadow:1px 1px 3px #777;
}
input.textbox:required{
background:url(required.png) no-repeat 200px 5px #F0F0EF;
Hintergrund:url(erforderlich.png) no-repeat 200px 5px, -webkit-gradient(linear, links oben, links unten, von(#E3E3E3), bis(#FFFFFF)); /* Saf4 , Chrome */
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 */
background:url(required.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(required.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input.textbox:required:valid{
background:url(valid.png) no-repeat 200px 5px #F0F0EF;
Hintergrund:url(valid.png) no-repeat 200px 5px, -webkit-gradient(linear, links oben, links unten, von(#E3E3E3), bis(#FFFFFF)); /* Saf4 , Chrome */
background:url(valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10 , Saf5.1 */
background:url(valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6 */
background:url(valid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(valid.png) no-repeat 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;
Hintergrund:url(invalid.png) no-repeat 200px 5px, -webkit-gradient(linear, links oben, links unten, von(#E3E3E3), bis(#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 */
background:url(invalid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(invalid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input[type=submit] {
padding:10px;
margin:0 10px !important;
Breite:300px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=range] {padding:0;}
}
#rangevalue {
display:block;
text-align:right;
margin-top:-25px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #aaa;
font-style:italic;
text-shadow:1px 1px 0 #fff;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #aaa;
font-style:italic;
text-shadow:1px 1px 0 #fff;
}
.clearfix{
clear:both;
}