Commentaire: Le formulaire d'inscription est implémenté à l'aide de la disposition HTML5 + CSS3, et l'effet est assez bon. Les concepteurs de sites Web frontaux intéressés peuvent y faire référence. J'espère que cela peut vous aider
Les rendus sont les suivants:Code source HTML:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<link href = "css / style.css" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </ script>
</ head>
<body>
<div id = wrapper>
<div id = lbl> </div>
<formulaire
<fieldset id = compte>
<gend> Informations personnelles </GENDED>
<étiquette pour = nom d'utilisateur> compte: </bablocde>
<input id = username class = textbox type = text name = username requis placeholder = "Veuillez remplir votre compte" />
<étiquette pour = mot de passe1> Mot de passe: </ label>
<entrée id = mot de passe1 class = TextBox Type = Motword Name = Password1 requis placeholder = "Veuillez remplir votre mot de passe" />
<étiquette pour = mot de passe2> Répéter le mot de passe: </ label>
<IND ID = Password2 Class = TextBox Type = Nom de mot de passe = Password2 requis Planholder = "Veuillez répéter le mot de passe" />
<étiquette pour = e-mail> Adresse e-mail: </ label>
<entrée id = e-mail class = textbox type = e-mail Nom = e-mail requis.
</ fieldset>
<Fieldset id = personnel>
<gend> Autres informations </GENDED>
<étiquette pour = site Web> URL personnelle: </ label>
<entrée id = site Web class = TextBox Type = URL Name = site Web requise placeholder = "http://www.example.com" />
<étiquette pour = Âge> Age: </ Label>
<entrée id = Âge class = TextBox Type = Number Name = Age min = 18 Step = 2 Pattern = "[0-9] {1,3}" Planholder = "Remplacez l'âge">
<étiquette pour = salaire> Salaire mensuel: </abétique>
<ID de saisie = classe de salaire = Text Type = Range Name = Salaire min = 0 Max = 50000 Step = 500 Pattern = "[0-9] {2,}" Payholder = "Qu'est-ce que le salaire mensuel" Value = 10000 Onchange = "ShowValue (this.value)" />
<span id = rangeValue> 10000 </span>
<cript>
fonction showValue (valeur) {
document.getElementById ("rangeValue"). innerHtml = valeur;
}
</cript>
<étiquette pour = Description> Description: </abétique>
<TextArea id = Description Name = Description Cols = 30 Rows = 5 Planholder = "Voici une description détaillée"> </ TextArea>
</ fieldset>
<fieldset id = confirm>
<entrée type = soumettre valeur = "soumettre" />
<div> </div>
</ fieldset>
</ form>
</div>
</docy>
</html>
Code source CSS:
corps{
CONTEXTE: URL (BG.JPG) répéter;
Font-Family: Arial étroit, Arial, Sans-Serif;
marge: 0;
rembourrage: 0;
}
en-tête, section, pied de page {
Affichage: bloc;
}
en-tête {
Largeur: 100%;
Color d'arrière-plan: RVB (0, 0, 0);
Color d'arrière-plan: RGBA (0, 0, 0, 0,9);
Couleur: #ccc;
rembourrage: 15px 0;
Espacement des lettres: 1px;
marge-fond: 20px;
Position: relative;
}
en-tête h1 {
marge: 0 50px;
Text-shadow: 2px 2px 2px # 888;
flottant: à gauche;
}
#backLinks {
flottant: à droite;
marge: -10px 20px;
hauteur de ligne: 25px;
Police-poids: Bold;
taille de police: 12px;
Texte-aligne: à droite;
}
#backLinks a {
Couleur: #ccc;
Décoration du texte: aucune;
marge: 3px 0 0;
Affichage: bloc;
}
#backLinks A: Hover {
Couleur: #ffff;
}
pied de page {
Color d'arrière-plan: RVB (0, 0, 0);
Color d'arrière-plan: RGBA (0, 0, 0, 0,8);
hauteur: 25px;
Largeur: 100%;
hauteur de ligne: 25px;
Position: relative;
Font-Family: Arial, Helvetica, Sans-Serif;
en bas: 0;
à gauche: 0;
Couleur: # 888;
taille de police: 11px;
}
bas de page {
Padding-Left: 20px;
}
pied de page a {
Couleur: # 1FA2E1;
}
#Wrapper {
Largeur: 770px;
marge: 0 auto;
Texte-aligne: Centre;
}
#wrapper hgroup {
marge: 20px 0;
Text-shadow: 1px 1px 1px #ccc;
}
#Wrapper H1 {
Couleur: # 146FA0;
taille de police: 42px;
marge: 0;
}
#Wrapper H2 {
Couleur: # 71C1ed;
taille de police: 27px;
marge: 0;
}
#lbl {
Couleur: # 777;
taille de police: 17px;
Police-poids: Bold;
Text-shadow: 1px 1px 0 #fff;
marge: 10px 0;
}
*:se concentrer{
Aperçu: aucun;
}
étiquette, entrée, textarea, jeu de champ {
Affichage: bloc;
}
Fieldset # Compte, Fieldset # personnel {
Largeur: 250px;
rembourrage: 0 50px 50px;
marge: 10px;
flottant: à gauche;
Contexte: RVB (244 244444);
Contexte: RGBA (244 244 2444,0,7);
-Webkit-Border-Radius: 25px;
-Moz-Border-Radius: 25px;
Border-Radius: 25px;
Border: 3px Double # 999;
}
Fieldset # Confirm {
Tableau de rembourrage: 10px;
Clear: les deux;
Border: aucun;
hauteur de ligne: 15px;
marge: 10px 0;
}
Fieldset # Confirmer Label, Fieldset # Confirmer l'entrée {
Affichage: en ligne;
flottant: à gauche;
marge: 15px 5px 0;
}
légende{
taille de police: 20px;
Police-poids: Bold;
Espacement des lettres: 5px;
Couleur: # 999;
marge-gauche: -20px;
Texte-aligne: gauche;
rembourrage: 0 10px;
Text-shadow: 1px 1px 0 #ccc;
}
étiquette{
taille de police: 17px;
Police-poids: Bold;
marge: 17px 0 7px;
Texte-aligne: gauche;
Text-shadow: 1px 1px 0 #fff;
}
TextArea {
redimensionner: les deux;
largeur maximale: 230px;
}
input.textbox, textarea {
rembourrage: 5px 10px;
-Webkit-Border-Radius: 15px;
-Moz-Border-Radius: 15px;
Border-Radius: 15px;
Border: 1px solide #ffff;
Largeur: 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: Tous les 0,5 s facilités de facilité;
-Moz-Transition: Tous les 0,5 s facilités de facilité;
Transition: toutes les 0,5 s facilités;
Contexte: URL (requis.png) sans répétition 200px 5px # f0f0ef;
Contexte: -Webkit-gradient (linéaire, haut gauche, bas gauche, de (# e3e3e3), à (#fffff)); / * Saf4 +, chrome * /
Contexte: -Webkit-linear-gradient (top, # e3e3e3, #fffff); / * Chrome 10+, saf5.1 + * /
Contexte: -moz-linear-gradient (top, # e3e3e3, #fffff); / * Ff3.6 + * /
CONTEXTE: -MS-LINEAR-GRADIENT (TOP, # E3E3E3, #FFFFFF); / * Ie10 * /
Contexte: -o-linéaire-gradient (haut, # e3e3e3, #fffff); / * Opéra 11.10+ * /
}
input.textbox: focus, textarea: focus {
-Webkit-transform: échelle (1.1);
-Moz-transform: échelle (1.1);
transformée: échelle (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: requis {
Contexte: URL (requis.png) sans répétition 200px 5px # f0f0ef;
Contexte: URL (requis.png) sans répétition 200px 5px, -webkit-gradient (linéaire, haut gauche, bas gauche, de (# e3e3e3), à (#fffff)); / * Saf4 +, chrome * /
Contexte: URL (requis.png) No-Repeat 200px 5px, -webkit-linear-gradient (top, # e3e3e3, #fffff); / * Chrome 10+, saf5.1 + * /
Contexte: URL (requis.png) No-Repeat 200px 5px, -moz-linear-gradient (top, # e3e3e3, #fffff); / * Ff3.6 + * /
CONTEXTE: URL (requis.png) No-Repeat 200px 5px, -ms-linear-gradient (TOP, # E3E3E3, #FFFFFF); / * Ie10 * /
Contexte: URL (requis.png) No-Repeat 200px 5px, -o-linear-gradient (top, # e3e3e3, #fffff); / * Opéra 11.10+ * /
}
input.textbox: requis: valide {
Contexte: URL (valid.png) sans répétition 200px 5px # f0f0ef;
Contexte: URL (valid.png) sans répétition 200px 5px, -webkit-gradient (linéaire, haut gauche, bas gauche, de (# e3e3e3), à (#fffff)); / * Saf4 +, chrome * /
Contexte: URL (valid.png) No-Repeat 200px 5px, -webkit-linear-gradient (top, # e3e3e3, #fffff); / * Chrome 10+, saf5.1 + * /
CONTEXTE: URL (valid.png) No-Repeat 200px 5px, -moz-linear-gradient (top, # e3e3e3, #fffff); / * Ff3.6 + * /
Contexte: URL (valid.png) sans répétition 200px 5px, -ms-linear-gradient (top, # e3e3e3, #ffffff); / * Ie10 * /
Contexte: URL (valid.png) No-Repeat 200px 5px, -o-linear-gradient (top, # e3e3e3, #fffff); / * Opéra 11.10+ * /
}
input.textbox: focus: invalid, input.textbox: non (: requis): invalide {
Contexte: URL (invalid.png) sans répétition 200px 5px # f0f0ef;
CONTEXTE: URL (invalid.png) sans répétition 200px 5px, -webkit-gradient (linéaire, haut gauche, bas gauche, de (# e3e3e3), à (#fffff)); / * Saf4 +, chrome * /
CONTEXTE: URL (invalid.png) No-Repeat 200px 5px, -webkit-linear-gradient (top, # e3e3e3, #fffff); / * Chrome 10+, saf5.1 + * /
Contexte: URL (invalid.png) sans répétition 200px 5px, -moz-linear-gradient (top, # e3e3e3, #fffff); / * Ff3.6 + * /
CONTEXTE: URL (invalid.png) sans répétition 200px 5px, -ms-linear-gradient (top, # e3e3e3, #fffff); / * Ie10 * /
CONTEXTE: URL (invalid.png) No-Repeat 200px 5px, -o-linear-gradient (TOP, # E3E3E3, #FFFFF); / * Opéra 11.10+ * /
}
entrée [type = soumettre] {
rembourrage: 10px;
Marge: 0 10px! IMPORTANT;
Largeur: 300px;
}
Écran @media et (-webkit-min-device-pixel-ratio: 0) {
entrée [type = plage] {rembourrage: 0;}
}
#RangeValue {
Affichage: bloc;
Texte-aligne: à droite;
marge: -25px;
}
entrée :: - webkit-int-placeholder, textarea :: - webkit-int-placeholder {
Couleur: #AAA;
Style de police: italique;
Text-shadow: 1px 1px 0 #fff;
}
Entrée: -moz-lieuholder, textarea: -moz-employeur {
Couleur: #AAA;
Style de police: italique;
Text-shadow: 1px 1px 0 #fff;
}
.ClearFix {
Clear: les deux;
}