Page d'Accueil .:. Contact .:. Livre d'Or .:. Bannières .:. Amis & Partenaires .:. Tops Sites

Personnaliser un formulaire Afin qu'ils s'intègrent à votre design, vous souhaitez peut être personnaliser vos formulaires. C'est très simple, voici comment procéder : mettre un texte par défaut dans les champs du formulaire Il suffit d'entrer le texte dans l'attribut "value" <input type="text" size="30" value="Texte par défaut" /> effacer le texte par défaut lorsque l'on clique dans le champs Ajouter ce qui est en rouge et veillez bien à ce que les 2 textes soulignés soient les mêmes. <input type="text" size="30" value="Texte par défaut" onfocus="javascript:if(this.value == 'Texte par défaut') this.value='';" /> rétablir le texte par défaut lorsque l'on clique ailleurs sans avoir rempli le champs Comme ci-dessus, ajoutez ce qui est en rouge et vérifiez que les 3 textes soulignés soient rigoureusement les mêmes. <input type="text" size="30" value="Texte par défaut" onfocus="javascript:if(this.value == 'Texte par défaut') this.value='';" onblur="javascript:if(this.value == '') this.value='Texte par défaut';" /> limiter le nombre de caractères dans un champs Dans l'exemple ci-dessous, nous limitons le nombre de caractères à 3. Essayez d'en taper 4... <input type="text" size="30" maxlength="3" value="Essayez" /> donner du style (couleur, police, taille, bordure...) Tout est renseigné dans l'attribut "style". <input type="text" size="30" style="text-align:center; color:#ffff00; background-color:#761f77; font-size:10pt; font-family:tahoma; font-weight:bold; border: 2px dashed #ffffff;" value="Exemple" /> text-align:center; = alignement du texte (ici centré) color:#ffff00; = couleur du texte (ici jaune) background-color:#761f77; = couleur du fond (ici violet) font-size:10pt; = taille du texte (ici 10 points) font-family:tahoma; = police de caractères (ici Tahoma) font-weight:bold; = texte en gras border: 2px dashed #ffffff; = bordure de 2 pixels d'épaisseur, en pointillés et blanche Il n'est pas obligatoire d'en mettre autant, vous pourriez par exemple seulement vouloir que le texte soit en gras, dans ce cas il suffirait de mettre : style="font-weight:bold;" Cela fonctionne de la même manière pour les zones de textes longs : Texte par défaut <textarea rows="4" cols="50" name="message" style="text-align:center; color:#ffff00; background-color:#761f77; font-size:10pt; font-family:tahoma; font-weight:bold; border: 2px dashed #ffffff;">Texte par défaut</textarea> Et pourquoi pas pour une liste déroulante : Chat Chien <select style="text-align:center; color:#ffff00; background-color:#761f77; font-size:10pt; font-family:tahoma; font-weight:bold; border: 2px dashed #ffffff;"> name="animal"> <option value="chat">Chat</option> <option value="chien">Chien</option> </select> Et pour le bouton d'envoi : <input type="button" value="Clic clic clic !" style="text-align:center; color:#761f77; background-color:#ffff00; font-size:10pt; font-family:tahoma; font-weight:bold; border: 2px solid #ff7301;" onclick="javascript:if(this.value != 'Patientez...') { this.value='Patientez...'; } else { return false; }"> A vous de jouer ! Si vous utilisez une feuille css, vous pouvez bien sūr y placer toutes ces infos de personnalisation afin qu'elles soient automatiquement prises en compte sur vos formulaires.