Installation d'un Plugboard    Installation d'un plugboard en photos  Plugboard 88X31  Plugboard 468X60

                      script Html de cette page
 
 
                                 Création HTML
Trucs et astuces pc Miniatures       Webmestres
optimisation moteurs Lithothérapie     Recettes Vidéos comiques
    CSS (feuille de style) Recherches sur les moteurs   News rss 
Faire son site B.a-ba Liste balises Création d'un tableau Création d'un formulaire Exercices Caractères spéciaux 1 Tutoriel The Gimp
 

Création d'un formulaire  
             (tableau)


   Plan du site

CBAdgénie VERROU-HTML Google Démasqué Référencement EVOLUTION
Script permettant des annonces textuelles style GOOGLE Adsense (design + dimension au choix). Comment protéger Vite et bien vos page web des cyber voleurs sans scrupules. Comment fonctionnent les robots de Google© et ce qu'ils feront des informations de vos sites. Des centaines de liens pointant vers votre site.
plus2visitheures VERROU-HTML murmuresduweb Référencement EVOLUTION
     Annonces By Visiograf  

Le Html et la création d'un formulaire

Personnaliser la page d'erreur ou page 404 NOT FOUND de votre site.


 

La création d'un formulaire et simple, je vous conseille de passer par une société de services webmestres pour éviter le spam. Le formulaire que je vous propose est à placer dans un tableau afin d'avoir une mise en page sans problème. Le même formulaire mais en position absolue est disponible ICI. 

La création d'un formulaire Html (tableau). 

Un formulaire se compose en deux parties, la première partie dans la feuille de style (CSS) et l'autre partie dans la feuille HTML.

Première partie du formulaire : section CSS

Cette partie du document HTML permet de régler, de restituer un formulaire aux couleurs de votre site grâce à la feuille d style (CSS). Vous pouvez intégrer des images dans les formulaires, vous amusez avec les bordures et obtenir un design original.

form : cadre du formulaire, supporte les attributs suivant : background-color, width, height, padding, class.

input : champ de saisies de données type nom, adresse... Supporte les attributs suivants : font-family et tous les attributs texte, background-color, border, class.

textarea : zone de saisie du texte pouvant comporter plusieur lignes.Supporte les attributs suivants : font-family et tous les attributs texte, background-color, border, class. 

.asterix : sous-classe

.txtform  : sous-classe

en construction...

Deuxième partie du formulaire : section HTML

Entre les balises form, balise ouvrante : obligatoire, balise fermante : interdite:

method="get"  ou "post" : méthode d'envoie des url, avec affichage des variables ou transmission sans affichage des variables dans l’URL.

action="http://" ou "mailto" : instruction pour le serveur.

enctype=" " : spécifie le  type de contenu défini pour soumettre le formulaire au serveur.

Les types de commande créés par l'élément INPUT <input> :

text : Crée une commande de saisie de texte sur une seule ligne.

password : identique à la valeur text mais la saisie des caractères est restituée par des *.

checkbox : Création d'une case à cocher.

radio : Création d'un bouton « radio ».

submit : Création d'un bouton de soumission.

image : Création d'un bouton graphique à l'aide de l'élément src, src="../..jpg" (plus adapté en CSS).

reset : création d'un bouton de annuler.

button : création d'un bouton poussoir.

hidden : création d'une commande cachée.

file : création d'une de sélection de fichier.

Définition des attributs pour l'élément INPUT :

Balise ouvrante : obligatoire, balise fermante : interdite

type =" text|password|checkbox|radio|submit|reset|file|hidden|image|button" : Cet attribut spécifie le type de commande à créer. La valeur par défaut de cet attribut est "text".

name ="" : Cet attribut assigne le nom de la commande.

value ="" : optionnel sauf si l'attribut type a pour valeur "radio" ou "checkbox".

size ="" : Largeur de la commande pour les valeurs "text" et "password".

maxlength ="" : indique le nombre maximum de caractères pour les valeurs "text" et "password".

checked : pour les valeurs "radio" ou "checkbox" de l'attribut type, indique que le bouton est sur marche.

src ="" : indique l'adresse de l'image.

Lisez les recommandations du W3C en ce qui concerne les formulaires HTML, ICI, docmentation en français.

Vous pouvez utiliser le formulaire ci-dessous pour me joindre, il est fonctionnel, mais vous pouvez aussi l'utiliser sur votre site web en copiant et en collant les codes plus bas dans votre éditeur wysiwyg. Faites  des tests, amusez vous à changer les valeurs, utilisez les bordures et les couleurs pour égayer vos formulaire.


Le champ marqué d'un * est obligatoire
Nom :
Prenom :
Adresse :
courriel* :
Tel :
Vos questions : 
 

Rien de tel que la pratique pour commencer à domestiquer les formulaires, pour utiliser ce formulaire, vous devez mettre votre identifiant I-service ou l'URL de votre choix dans l'attribut action de la partie body, la colonne de droite en dessous  :o))

Formulaire HTML/CSS avec tableau

Copiez le code ci-dessous et collez-le dans votre 
éditeur entre les balises <head> et </head>

Copiez le code ci-dessous et collez-le dans votre 
éditeur entre les balises <body> et </body>

 <style type="text/css">
form { background-image: url(formjaun.gif);
background-repeat: repeat;
background-position: left top;
background-attachment : fixed;
width : 450px;
height : 350px;
}
input { background-image: url(inptt.gif);
background-repeat: repeat;
background-position: left top;
background-attachment : fixed;
font-size: 12px;
background-color: rgb(174, 0, 0);
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
border : solid 2px rgb(0, 0, 0);color: rgb(255, 0, 0);
}
textarea { background-image: url(txt.gif);
background-repeat : repeat;
background-position: left top;
background-attachment : fixed;
color: rgb(0, 0, 230);
font-weight: 800;
font-size: 12px;
background-color: rgb(204, 102, 0);
font-family: Arial,Helvetica,sans-serif;
}
.asterix { background-image: url(formjaun.gif);
background-repeat: repeat;
background-position: left top;
background-color: rgb(255, 255, 0);
font-size: 12px;
color: rgb(255, 102, 0);
font-weight: bold;
font-style: normal;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif;
}
.txtform { background-image: url(formjaun.gif);
background-repeat: repeat;
background-position: left top;
background-color: rgb(255, 255, 0);
font-size: 14px;
color: rgb(0, 51, 0);
font-weight: bold;
text-decoration: none;
font-style: normal;
font-family: Arial,Helvetica,sans-serif;
}
  </style>

   <form method="post"
 action="http://www.i-services.net/membres/formmail/formmail.php?user=..."
 enctype="multipart/form-data" style="margin: 0px;"> <input
 name="_mail_priority" value="Normal" type="hidden"><input
 name="_mail_subject" value="" type="hidden"> <input
 name="_conform_copy" value="" type="hidden">
  <table style="width: 100%;" border="0"
 cellpadding="1" cellspacing="1"><tbody>
<td colspan="2"><span class="asterix">Le
champ marqu&eacute; d'un * est
obligatoire</span></td></tr><tr>
        <td align="right" width="30%"><span
 class="txtform">Nom :</span></td>
        <td><input style="width: 200px;" name="email"
 size="24"></td></tr><tr>
        <td align="right" width="30%"><span
 class="txtform">Prenom :</span></td>
        <td><input style="width: 200px;" name="prenom"
 size="24"></td></tr><tr>
        <td align="right" width="30%"><span
 class="txtform">Adresse :</span></td>
        <td><input style="width: 200px;" name="adresse"
 value="" size="24" type="text"></td></tr><tr>
        <td align="right" width="30%"><span
 class="txtform"> courriel  :</span></td>
        <td><input style="width: 200px;" name="email"
 size="24"></td></tr><tr>
        <td align="right" width="30%"><span
 class="txtform">Tel :</span></td>
        <td><input style="width: 200px;" name="tel"
 value="" size="24" type="text"></td></tr><tr>
        <td align="right" width="30%"><span
 class="txtform">Vos questions :&nbsp;</span></td>
        <td><textarea style="width: 260px;"
 name="demande" rows="6" cols="20"></textarea></td></tr><tr>
        <td align="right" width="30%">&nbsp;</td>
        <td><input name="submit" value="Envoyer"
 type="submit"></td>
      </tr></tbody></table></form>