HTML5 CSS3 implémente un formulaire d'inscription example_html5 compétences du didacticiel

Le rendu est le suivant :

Code source html :

Copier le code

Le code est la suivante :

"text/html; charset =utf-8" />
ajax.googleapis.com/ ajax/libs/jquery/1.7.1/jquery.min.js">

🎜>Compte :
> Mot de passe :
;label for=password2>Répéter le mot de passe :< ;/label>
Adresse e-mail :

Autres informations
URL personnelle : class=textbox type=url name=website requirejs placeholder="http://www.example.com" />
Age : =classe d'âge=textbox type=numéro nom =âge min=18 step=2 pattern="[0-9]{1,3}" placeholder="Remplissez l'âge">
Salaire mensuel :


<script> showValue(value) { <br>document.getElementById("rangevalue ").innerHTML=value; <br></script>

confirmer>

/form>

< ;/body>



code source CSS :





Copier le code


Le code est le suivant :

corps{
background:url(bg.jpg) répéter ;
famille de polices : Arial Narrow, Arial, sans-serif ;
marge : 0 ;
remplissage : 0 ;
}
en-tête, section, pied de page{
display:block;
}
en-tête{
largeur : 100 % ;
couleur de fond:rgb(0, 0, 0);
couleur de fond:rgba(0, 0, 0, 0.9);
couleur :#ccc;
remplissage : 15px 0 ;
espacement des lettres : 1px ;
marge inférieure : 20 px ;
position : relative ;
}
en-tête h1{
marge :0 50px ;
text-shadow:2px 2px 2px #888;
float:gauche;
}
#backlinks{
float:right;
marge : -10px 20px ;
hauteur de ligne : 25px ;
font-weight: gras;
taille de police : 12px ;
text-align:right;
}
#backlinks a{
color:#ccc;
text-decoration:aucun;
marge :3px 0 0 ;
affichage:bloc;
}
#backlinks a:hover{
color:#fff;
}
footer{
background-color:rgb(0, 0, 0);
couleur de fond:rgba(0, 0, 0, 0.8);
hauteur : 25 px ;
largeur : 100 % ;
hauteur de ligne : 25px ;
position : relative ;
famille de polices : Arial, Helvetica, sans-serif ;
bas :0 ;
gauche :0 ;
couleur : #888 ;
taille de police : 11px ;
}
footer span{
padding-left:20px;
}
pied de page a{
color:#1FA2E1;
}
#wrapper{
width:770px;
marge : 0 auto ;
text-align:center;
}
#wrapper hgroup{
margin:20px 0;
text-shadow:1px 1px 1px #ccc;
}
#wrapper h1{
couleur :#146FA0;
taille de police : 42 px ;
marge : 0 ;
}
#wrapper h2{
couleur :#71C1ED ;
taille de police : 27px ;
marge : 0 ;
}
#lbl{
couleur :#777 ;
taille de police : 17px ;
font-weight: gras;
text-shadow:1px 1px 0 #fff;
marge : 10px 0 ;
}
*:focus{
outline:aucun;
}
étiquette, entrée, zone de texte, champset{
display:block;
}
fieldset#account, Fieldset#personal{
width:250px;
remplissage :0 50px 50px ;
marge : 10px ;
float:gauche;
arrière-plan : rvb (244 244 244 );
arrière-plan :rgba(244,244,244,0.7);
-webkit-border-radius : 25px ;
-moz-border-radius : 25px ;
rayon de bordure : 25 px ;
bordure : 3px double #999 ;
}
fieldset#confirm{
padding-top:10px;
clair : les deux ;
frontière : aucune ;
hauteur de ligne : 15px ;
marge : 10px 0 ;
}
fieldset#confirm label, fieldset#confirm input{
display:inline;
float:gauche;
marge : 15px 5px 0 ;
}
légende{
font-size:20px;
font-weight: gras;
espacement des lettres : 5px ;
couleur : #999 ;
marge gauche : -20px ;
text-align:left;
remplissage :0 10px ;
text-shadow:1px 1px 0 #ccc;
}
étiquette{
font-size:17px;
font-weight: gras;
marge : 17px 0 7px ;
text-align:left;
text-shadow:1px 1px 0 #fff;
}
textarea{
resize:both ;
largeur maximale : 230 px ;
}
input.textbox, textarea{
padding:5px 10px;
-webkit-border-radius : 15px ;
-moz-border-radius : 15px ;
rayon de bordure : 15 px ;
bordure : 1px solide #fff ;
largeur : 200 px ;
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 : toutes les entrées et sorties faciles en 0,5 s ;
-moz-transition : toutes les entrées et sorties faciles en 0,5 s ;
transition : toutes les entrées et sorties faciles en 0,5 s ;
background:url(required.png) sans répétition 200px 5px #F0F0EF;
background:-webkit-gradient(linéaire, en haut à gauche, en bas à gauche, de(#E3E3E3), à(#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);
transformation : scale(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;
background:url(required.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#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); /* Opéra 11.10 */
}
input.textbox:required:valid{
background:url(valid.png) no-repeat 200px 5px #F0F0EF;
background:url(valid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#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;
background:url(invalid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, 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 */
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;
marge :0 10px !important;
largeur : 300 px ;
}
@media screen et (-webkit-min-device-pixel-ratio:0) {
input[type=range] {padding:0;}
}
#rangevalue {
affichage:bloc;
text-align:right;
marge supérieure : -25 px ;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #aaa;
style de police : italique ;
text-shadow:1px 1px 0 #fff;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #aaa;
style de police : italique ;
text-shadow:1px 1px 0 #fff;
}
.clearfix{
clear: les deux ;
}