Le formulaire pour les forums

Sujet: Le formulaire pour les forums Jeu 28 Oct - 18:24

Le formulaire - Sans JavaScript!

Bonjour,

Donc aujourd'hui, je vais ~~tenter~~ de vous expliquer le fonctionnement du formulaire.

Nous allons donc voir les composant du code étape par étape.

●Donc, la première partie du code sera:

Code:

Cette partie est l'une des parties les plus importantes, elle délimite ce que le formulaire prendra dans son envoi. Rien à modifier sur cette partie.

●La deuxième partie sera:

*Pour une seule ligne

Code:

Donc, il faut un peu d'explication sur cette partie je pense.
-"type="text"" = la forme sous lequel le texte s'affichera dans la barre, si vous remplacez "text" par "password", le texte s'affichera sous sorte de petits "●".
-"size="16""= Cette partie sera la longueur de votre barre de tape, pour agrandir ou diminuer, changez le chiffre 16.
-"maxlength="12"" = Cette partie sert à limiter le nombre de caractères dans votre formulaire, là, vous pourez mettre 12 lettres maximum, pour ne mettre aucune limite, retirez cette partie Wink

.
-"value="Tape ta réponse ici!"" = Ceci est le texte défini dans le membre arrive devant le formulaire.

Pour le moment ça donne:

*Pour un multi-lignes:

Code:

Donc, j'explique un peu les composants:
-"cols="40"" = Cette partie définit la largeur de la barre de tape, pour le changer, modifiez la valeur "40".
-"rows="4"" = Pour cette partie, on définit la hauteur que fera le formulaire.

Ce qui donne:

●La troisième partie du code est:

Code:

Donc cette partie est la partie qui sert à envoyer vos messages, vous ne pouvez modifier qu'une des chose et qui d'ailleurs est à changer obligatoirement, vous devrez changer:

-"value="2334"" = Le topic dans lequel sera posté votre message, vous avez ces 4 chiffres de cette façon:

Citation:

http://www.school-of-pub.net/concours-jeux-f37/mon-concours-sera-t3960.htm

Vous placerez donc ces 4 chiffres (il se peut que vous n'en n'ayez que 1, 2, 3 ou plus), à la place du 2334.

●La 4éme et dernière partie du code est:

Code:

Dans cette partie du code, euh, il ne vous est possible que de changer le nom du bouton, en changeant:
-"value="Envoyer"" = Vous changez le mot "envoyer" par le mot que vous voulez.

Ce qui donne comme code:
*Pour le simple:

Spoiler:

*Pour le multi-lignes:

Spoiler:

Ce qui donne au complet:

*Pour le simple:

*Pour le multi-lignes:

Voilà, vous savez toutes les bases Smile

Le formulaire - Sans JavaScript! - Mise en page

Nous voilà dans la deuxième partie du tuto, nous allons voir ensemble la mise en page.
Pour les maniaques qui veulent mettre ça en plus présentable ^^

Donc, un seul moyen de mettre en page les cases:

Code:

style='border:2px solid #C6B38E;background-image:url(http://img267.imageshack.us/img267/6506/wallrep.jpg);cursor:pointer;font-size:9pt;font-family:arial;font-weight:bold;color:'#694F29'

Donc, je vous explique le code:
-"border:2px" = le 2 détermine la taille de bordure du cadre.
-"solid #C6B38E" = Ceci détermine la couleur du bord du cadre, pour changer la couleur, changer le #C6B38E par votre code couleur (vous pouvez trouver les codes couleurs [ICI])
-"background-image:url(http://img267.imageshack.us/img267/6506/wallrep.jpg)" = ici, c'est l'image de fond, ici, j'ai mis le fond de SoP, il y a un moyen de mettre une couleur en faisant: background-color:'#694F29', et comme pour le précédent, vous changez le '#694F29' par la couleur voulue.
-"cursor:pointer" = Ceci est la forme du curseur quand on le passe dans la case du formulaire. Pas moyen de mettre une image.
-"font-size:9pt" = La taille de l'écriture dans le formulaire, changez le 9 pour agrandir/réduire la taille du texte.
-"font-family:arial" = La police de l'écriture dans le formulaire, changez le "Arial" pour avoir une autre police.
-"font-weight:bold" = Ça met le texte en gras, vous pouvez le retirer, ce qui retirera la mise en gras du texte.
-"color:'#694F29'" = Ici, on met la couleur du texte, vous pouvez donc changer la couleur du texte en changeant le #694F29 par votre code couleur (vous pouvez trouver les codes couleurs [ICI]).

Ce qui donne comme code:
*Pour le simple:

Spoiler:

*Pour le multi-lignes:

Spoiler:

Et l'exemple:

*Pour le simple:

*Pour le multi-lignes:

A vous de mettre en page à vos souhaits maintenant!

Vous allez devenir le meilleur. :p

Xjujuxleo

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]