galeriedesformulaires

Créons votre formulaire :

Bienvenue,dans cette galerie on vous propose des formulaires pour vos sites web,formulaire d'inscription et de contacte (gratuitemnt).
On vous donne les codes css et HTML de ces formulaires.et vous devez juste les copiez dans votre logiciel de création de site.

Et voici nos formulaires :

formulaire :1

Formulaire d'inscription :

Auteur : Zahrane Bader

Description :
Cette source est un formulaire d'inscription constru autour de balise fieldset, legend, label, et toutes les autres balises de bases dans un formulaire.

Tester ce formulaire en ligne :

Code HTML

<h1>www.Tonweb.tk:
Formulaire 8</h1> <h2>Ajout CSS :
submit</h2>
<form id="monForm" action="#" method="post">
<fieldset>
<legend>Informations personnelles</legend>
<p>
<label for="form_firstname">Prénom :
</label>
<input type="text" id="form_firstname" name="firstname"
/>
</p> <p> <label
for="form_lastname">Nom :
</label> <input type="text" id="form_lastname"
name="lastname"
/> </p> <p> <label
for="form_gender">Sexe :
</label> <input type="text" id="form_gender"
name="gender"
/> </p> <p> <label
for="form_birthday">Date de
naissance : </label> <input type="text"
id="form_birthday"
class="form_ input_day_month" name="day" /> / <input
type="text"
class="form_input_day_month" name="month" /> / <input
type="text"
class="form_input_year" name="year" /> </p>
<p>
<label for="form_address">Adresse :
</label> <input
type="text" id="form_address" name="address" />
</p> <p>
<label for="form_postal_code">Code postal :
</label>
<input type="text" id="form_postal_code" name="postal_code"
/>
</p> <p> <label
for="form_city">Ville :
</label> <input type="text" id="form_city"
name="city" />
</p> <p> <label
for="form_country">Pays :
</label> <select id="form_country"
name="country">
<optgroup label="Amérique"> <option
value="ca">Canada</option> <option
value="us">États-Unis</option>
</optgroup>
<optgroup label="Europe"> <option
value="be">Belgique</option> <option
value="fr">France</option>
</optgroup> </select>
</p> </fieldset> <fieldset>
<legend>Compte</legend> <p>
<label
for="form_login">Identifiant : </label>
<input type="text"
id="form_login" name="login" /> </p>
<p> <label
for="form_password">Mot de passe : </label>
<input
type="password" id="form_password" name="password" />
</p>
<p> <label for="form_password2">Confirmer
le mot d e passe
: </label> <input type="password"
id="form_password2"
name="password2" /> </p> <p>
<label
for="form_mail">Adresse email : </label>
<input type="text"
id="form_mail" name="mail" /> </p>
<p> <label
for="form_question">Question secrète :
</label>
<input type="text" id="form_question" name="question" />
</p> <p> <label
for="form_response">Réponse :
</label> <input type="text" id="form_response"
name="response"
/> </p> </fieldset>
<p> <label
class="form_label_nostyle">&nbsp;</label>
<input
type="submit" name="submit" /> <input type="reset"
name="del"
/> </p> </form>

Code CSS :

@charset "utf-8";
body
{ background-color: #FAFAFA;
}
p
{ margin: 0; padding: 0;
}
#monForm
{ width: 60%;
}
#monForm p
{ margin: 2px 0;
}
/* fieldset , legend */
#monForm fieldset
{ margin-bottom: 10px; border: #CCC 1px solid;
}
#monForm fieldset:hover
{ background-color: #FFF;
}
#monForm fieldset legend
{ padding: 0 10px; border-left: #CCC 1px solid; border-right: #CCC 1px
solid; font-size: 1.2em; color: #999;
}
/* Label */
#monForm label
{ background-color: #FFCC66; display: block; width: 39%; float: left;
padding-right: 1%; text-align: right; letter-spacing: 1px;
}
#monForm label:hover
{ font-weight: bold;
}
#monForm .form_label_nostyle
{ background: none;
}
/* Input */
#monForm input, #monForm select
{ margin-left: 1%; width: 58%; border: #CCC 1px solid;
}
#monForm input:hover, #monForm select:hover, #monForm input:focus,
#monForm select:focus
{ border: #999 1px solid; background-color: #DDEEFF;
}
#monForm .form_input_day_month
{ width: 3%;
}
#monForm .form_input_year
{ width: 6%;
}
/* button submit */
#monForm input[type="submit"]
{ border: #DDEEFF 1px solid; width: 27%;
}
#monForm input[type="submit"]:hover
{ background-color: #66CC33; cursor: pointer;
}
#monForm input[type="reset"]
{ border: #DDEEFF 1px solid; width: 27%;
}
#monForm input[type="reset"]:hover
{ background-color: #E6484D; cursor: pointer;
}

Félicitatiuons vouscréer votre propre formulaire de contacte.

formulaire :2

Formulaire de contacte 1 :

Auteur : Zahrane Bader

Description :
Un formulaire de contact avec un fond noir et vert.

Tester ce formulaire en ligne :

Avont que vous copiez les codes de cette formulaire vous devez enregistrer les deux images au dessous pour dans le dossier òu vous mettez pages web (du site)Pour que votre formulaire soit comme notre formulaire.

Code HTML :

Code CSS :

/* * * CSSG Collections: Forms
* designed and coded by Zahrane Badr (http://www.tonweb.tk)
* brought to you by Templatica (http://wwww.tonweb.tk)
*
*/
body{ background:#f8f8f8; font:13px Trebuchet MS, Arial, Helvetica,
Sans-Serif; color:#333; line-height:160%; margin:0; padding:0;
text-align:center; }
h1{ font-size:200%; font-weight:normal; } h2, h3, h4, h5, h6{
font-weight:normal; margin:1em 0; } h2{ font-size:160%; } h3{
font-size:140%; }
h4{ font-size:120%; } a{ text-decoration:none; color:#f30; }
a:hover{ color:#999; } table, input, textarea, select, li{ font:100%
Trebuchet MS, Arial, Helvetica, Sans-Serif; line-height:160%;
color:#333; } p, blockquote, ul, ol, form{ margin:1em 0; }
blockquote{ }
img{ border:none; } hr{ display:none; } table{ margin:1em 0;
width:100%; border-collapse:collapse; }
th, td{ padding:2px 5px; } th{ text-align:left; }
li{ display:list-item; } #container{ margin:0 auto; background:#fff;
width:600px; padding:20px 40px; text-align:left; } /* form 2 */ #form2{
margin:1em 0; color:#fff; width:320px; /* customize width, this form
have fluid layout */ } #form2 h3{ margin:0; background:#57a700
url(form_heading.gif) repeat-x; color:#fff; font-size:20px; border:1px
solid #57a700; border-bottom:none; } #form2 h3 span{ display:block;
padding:10px 20px; background:url(form_ico.gif) no-repeat 93% 50%; }
#form2 fieldset{ margin:0; padding:0; border:none; border-top:3px solid
#000; background:#000 url(form_top.gif) repeat-x; padding-bottom:1em; }
#form2 legend{display:none;} #form2 p{margin:.5em 20px;} #form2
label{display:block;} #form2 input, #form2 textarea{ width:272px;
border:1px solid #111; background:#282828 url(form_input.gif) repeat-x;
padding:5px 3px; color:#fff; } #form2 textarea{ height:125px;
overflow:auto; } #form2 p.submit{ text-align:right; } #form2 button{
padding:0 20px; height:32px; line-height:32px; border:1px solid
#70ad2e; background:#5aae00 url(form_button.gif) repeat-x; color:#fff;
cursor:pointer; text-align:center; } /* // form 2 */

Félicitatiuons vouscréer votre propre formulaire de contacte.

formulaire :3

Formulaire de contacte 2 :

Auteur : Zahrane Bader

Description :
Un formulaire de contact avec une enveloppe en arrière-plan.Composé du HTML et CSS

Tester ce menu en ligne :

Code HTML :

Code CSS :

/* * * CSSG Collections: Forms
* designed and coded by ZAHRANE Badr (http://www.tonweb.tk)
* brought to you by Templatica (http://www.tonweb.tk)
*
*/
body{ background:#f8f8f8; font:13px Trebuchet MS, Arial, Helvetica,
Sans-Serif; color:#333; line-height:160%; margin:0; padding:0;
text-align:center; }
h1{ font-size:200%; font-weight:normal; } h2, h3, h4, h5, h6{
font-weight:normal; margin:1em 0; } h2{ font-size:160%; } h3{
font-size:140%; }
h4{ font-size:120%; } a{ text-decoration:none; color:#f30; }
a:hover{ color:#999; } table, input, textarea, select, li{ font:100%
Trebuchet MS, Arial, Helvetica, Sans-Serif; line-height:160%;
color:#333; } p, blockquote, ul, ol, form{ margin:1em 0; }
blockquote{ }
img{ border:none; } hr{ display:none; } table{ margin:1em 0;
width:100%; border-collapse:collapse; }
th, td{ padding:2px 5px; } th{ text-align:left; }
li{ display:list-item; } #container{ margin:0 auto; background:#fff;
width:600px; padding:20px 40px; text-align:left; } /* form 3 */ #form3{
margin:1em 0; background:url(form_bg.jpg) no-repeat 0 0; width:542px;
height:364px; /* fixed size (envelope graphic) */ overflow:hidden; }
#form3 h3{display:none;} #form3 fieldset{ margin:0; padding:0;
border:none; float:left; display:inline; width:200px; margin-left:34px;
padding-top:80px; } #form3 fieldset.last{ width:254px;
margin-left:17px; } #form3 legend{display:none;} #form3 p{margin:.5em
0;} #form3 label{display:block;} #form3 input, #form3 textarea{
width:192px; border:1px solid #ddd; background:#fff url(form_input.gif)
repeat-x; padding:3px; } #form3 textarea{ width:246px; height:200px;
overflow:auto; } #form3 p.submit{ margin:0 34px; clear:both;
position:relative; } #form3 button{ padding:0; position:absolute;
left:0; top:-3.5em; width:95px; height:36px; text-indent:-8000px;
overflow:hidden; border:none; background:url(form_button.gif) no-repeat
0 0; color:#fff; cursor:pointer; } /* // form 3 */

Félicitatiuons vouscréer votre propre formulaire de contacte.

On souhaite que nos formulaires vous plait. Si vous voulez laisser un commentaire ou un remerciemnt Cliquez ici

Pour des formulaires plus belle utilusez ces liens :

Retour à la galerie de CSS

Créons votre formulaire :

formulaire :1

formulaire :2

formulaire :3

Navigation

Liens :

Commentaires :

Tonweb :

Créons votre formulaire :

formulaire :1

formulaire :2

formulaire :3

Navigation

Commentaires :

Tonweb :