Comment créer un formulaire de présentation ?

Rappel du premier message :

Bonjour à tous,

Etant un débutant en codage (car je fais une formation), je me demandais comment fait-on pour créer un formulaire de présentation.

Détails : Le membre devrait remplir le formulaire de présentation qui contiendrait ces questions :

• Pseudo
  
• Prénom
  
• Âge
  
• Lieu de Résidence
  
• Surnom
  
• Couleur préférée
  
• Animal Préféré
  
• Plat Préféré
  
• Passion(s)
  
• Losiir(s)
  
• Comptes-tu être actif ?
  
• Comment as-tu connu le forum ?
  
• Quelles sont tes impressions ?
  
• Autres :
  

Les champs : Pseudo, Prénom, Âge et Lieu de Résidence devraient être obligatoire à remplir.

Autres : Lorsque le membre aurait fini de remplir le formulaire, il clique sur envoyer. Et un nouveau sujet se créerait automatiquement avec en titre : Présentation de ..... Ce formulaire serait pour un forum.

Si vous avez des questions... posez-les moi.

Merci d'avance,
Cordialement.

Ps : Je ne savais pas ou poster cette question.

Et comment faut-il faire ?

Tu ajoute le code

Code:

<style type="text/css">  
<!--  
/*Arrondi Formulaire de présentation*/

Input#pseudo {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
Input#prenom {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
Input#age {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}

textarea#occupation {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#passion {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#ou {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#plus {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}

-->  
</style>

A la fin du code de ta page HTML

Si tu veux ajouter des cases, il te faudra modifier le code

Merci beaucoup, c'est parfait ! Encore une question : Est-ce qe l'on peut faire ceci : lorsque une présentation a été crée, que l'on soit prévenu par MP, juste le fondateur ou les admins ?

Je ne pense pas
Tu peut être averti lors de l'inscription d'un membre

Peut être si tu coche "Surveiller les sujets de ce forum" :
[Vous devez être inscrit et connecté pour voir cette image]

Le mieux, est de poser la question sur le Forum des Forums ForumActif

Oui. Et comment fait-on pour que le message envoyé ait la présentation suivante (je parle du BBCode et de la police) :
Prénom : XXXX
Origine de pseudo: xxxx
Age: xxxxx
De quelle région es-tu: xxxxxxxxx
Que fais tu dans la vie : xxxxxxxxx
 Quelles sont tes passions: xxxxxxxxx
Comment as-tu connu le forum : xxxxxxxxxxx
 Quelles sont tes premières impressions : xxxxxxxxxxxxxxxx
Que changerais-tu sur le forum :xxxxxxxxxxxxxx

Je pense que ça devrait le faire :

Code:

    + "[font=Comic Sans MS]Mon Prénom :[/font] " + "[b]" + form.prenom.value + "[/b]" + '\n'

Parfait merc beaucoup !

Voici le code que j'ai modifié :

Code:

<div style="width: 80%;margin: auto;"><script type="text/javascript">
            function envoiMessage(form)
            {
           
          // Créer un message à partir des informations fournies
            var txt_message = "[b]Fiche d'identité de :[/b] " + form.pseudo.value + '\n'
            + "[font=Comic Sans MS]Mon Prénom :[/font] " + "[b]" + form.prenom.value + "[/b]" + '\n'
            + "[font=Comic Sans MS]J'ai :[/font] " + "[/b]"+form.age.value + "[b]" ans" + '\n'
            + "[font=Comic Sans MS]Dans la vie :[/font] " + "[b]" + form.occupation.value + "[/b]" + '\n'
            + "[font=Comic Sans MS]Mes Passions :[/font] " + "[b]" + form.passion.value + "[/b]" + '\n'
            + "[font=Comic Sans MS]J'ai connu le forum :[/font] " + "[b]" + form.ou.value + "[/b]" + '\n'
            + "[font=Comic Sans MS]Message :[/font] " + "[b]" + form.plus.value + "[/b]" + '\n'
           
          // Insère le texte construit dans le champ caché "message" du formulaire
            form.message.value = txt_message;
           
          // Créer un titre de sujet dynamiquement (Présentation + pseudo) :
            form.subject.value = "Présentation de " + form.pseudo.value;
            }
            </script>
    <br><br>
            <center>Veuillez remplir le formulaire de présentation suivant:</center><br><br>
           
           
          <form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">
            <input name="lt" value="0" type="hidden">
            <input name="mode" value="newtopic" type="hidden">
            <input name="topictype" value="0" checked="checked" type="hidden">
            <input name="message" value="" type="hidden">
            <input name="subject" value="" type="hidden">
            <input name="f" value="3" type="hidden">
           
           
          <label for="pseudo">Pseudo :</label><br>
            <input name="pseudo" id="pseudo" value=" " size="50" maxlength="100" type="text">
           
          <br><br>
           
          <label for="prenom">Prénom :</label><br>
            <input name="prenom" id="prenom" value=" " size="50" maxlength="100" type="text">
           
          <br><br>
           
          <label for="age">Age :</label><br>
            <input name="age" id="age" value=" " size="10" maxlength="100" type="text">
           
          <br><br>
           
          <label for="occupation">Tu fais quoi de tes journée ? (étude, profession, loisirs...) :</label><br>
            <textarea name="occupation" id="occupation" rows="3" cols="150"></textarea>
           
          <br><br>
           
          <label for="passion">Tes passions :</label><br>
            <textarea name="passion" id="passion" rows="3" cols="150"> </textarea>
           
          <br><br>
           
          <label for="ou">Où as-tu connu le forum ?</label><br>
            <textarea name="ou" id="ou" rows="3" cols="150"> </textarea>
           
          <br><br>
           
          <label for="plus">Petit plus (quelques lignes pour nous parler de toi, tes petites confidences ...) :</label><br>
            <textarea name="plus" id="plus" rows="3" cols="150"></textarea>
            <br><br>
            <center>Ne pas oublier la mise à jour de votre profil </center>
            <br><br>
           
          <center><input name="post" value="Valider ma fiche de présentation" type="submit"></center>
           
          </form></div>
<style type="text/css"> 
<!-- 
/*Arrondi Formulaire de présentation*/

Input#pseudo {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
Input#prenom {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
Input#age {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}

textarea#occupation {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#passion {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#ou {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#plus {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}

--> 
</style>

Cela me met : vous devez précisez un titre à votre sujet avant de pouvoir l'envoyer...

Bonjour

Un simple problème de guillemet et d'espace.

Je t'ai modifié le code sur ton forum en modifiant un petit truc

Code:

<div style="width: 80%;margin: auto;"><script type="text/javascript">
            function envoiMessage(form)
            {
           
          // Créer un message à partir des informations fournies
            var txt_message = "[center][b]Fiche d'identité de :[/b] " + form.pseudo.value + "[/center]" + '\n'
            + "[font=Comic Sans MS]Mon Prénom :[/font] " + "[b]" + form.prenom.value + "[/b]" + '\n'
            + "[font=Comic Sans MS]J'ai :[/font] " + "[b]" +form.age.value + "[/b] ans" + '\n'
            + "[font=Comic Sans MS]Dans la vie :[/font] " + "[b]" + form.occupation.value + "[/b]" + '\n'
            + "[font=Comic Sans MS]Mes Passions :[/font] " + "[b]" + form.passion.value + "[/b]" + '\n'
            + "[font=Comic Sans MS]J'ai connu le forum :[/font] " + "[b]" + form.ou.value + "[/b]" + '\n'
            + "[font=Comic Sans MS]Message :[/font] " + "[b]" + form.plus.value + "[/b]" + '\n'
           
          // Insère le texte construit dans le champ caché "message" du formulaire
            form.message.value = txt_message;
           
          // Créer un titre de sujet dynamiquement (Présentation + pseudo) :
            form.subject.value = "Présentation de " + form.pseudo.value;
            }
            </script>
    <br><br>
            <center>Veuillez remplir le formulaire de présentation suivant:</center><br><br>
           
           
          <form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">
            <input name="lt" value="0" type="hidden">
            <input name="mode" value="newtopic" type="hidden">
            <input name="topictype" value="0" checked="checked" type="hidden">
            <input name="message" value="" type="hidden">
            <input name="subject" value="" type="hidden">
            <input name="f" value="3" type="hidden">
           
           
          <label for="pseudo">Pseudo :</label><br>
            <input name="pseudo" id="pseudo" value=" " size="50" maxlength="100" type="text">
           
          <br><br>
           
          <label for="prenom">Prénom :</label><br>
            <input name="prenom" id="prenom" value=" " size="50" maxlength="100" type="text">
           
          <br><br>
           
          <label for="age">Age :</label><br>
            <input name="age" id="age" value=" " size="10" maxlength="100" type="text">
           
          <br><br>
           
          <label for="occupation">Tu fais quoi de tes journée ? (étude, profession, loisirs...) :</label><br>
            <textarea name="occupation" id="occupation" rows="3" cols="150"></textarea>
           
          <br><br>
           
          <label for="passion">Tes passions :</label><br>
            <textarea name="passion" id="passion" rows="3" cols="150"> </textarea>
           
          <br><br>
           
          <label for="ou">Où as-tu connu le forum ?</label><br>
            <textarea name="ou" id="ou" rows="3" cols="150"> </textarea>
           
          <br><br>
           
          <label for="plus">Petit plus (quelques lignes pour nous parler de toi, tes petites confidences ...) :</label><br>
            <textarea name="plus" id="plus" rows="3" cols="150"></textarea>
            <br><br>
            <center>Ne pas oublier la mise à jour de votre profil </center>
            <br><br>
           
          <center><input name="post" value="Valider ma fiche de présentation" type="submit"></center>
           
          </form></div>
<style type="text/css"> 
<!-- 
/*Arrondi Formulaire de présentation*/

Input#pseudo {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
Input#prenom {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
Input#age {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}

textarea#occupation {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#passion {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#ou {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#plus {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}

--> 
</style>

Petit conseil, pour une question d’apparence, coche OUI à la question "Voulez-vous utiliser le haut et le bas de page de votre forum ?"

A+

C'est Magnifique merci beaucoup !!! Et comment fait-on pour modifier la police dans le formulaire lui-même ?

En CSS aussi.

Petite question pour toi
Pour toi, a quoi sert le HTML et à quoi sert le CSS dans une page web ??

J'essayerais de voir ton code dans la journée.

A insérer du contenu dans une page Web mais également à embellir les pages, à créer des tableaux; mettre en forme le contenu......

Re

Tu ajoute le code suivant dans la partie CSS du code HTML de ta page

Code:

/*police de caractère*/
Label{font-family:Cursive;}
Center {font-family:Cursive;}
Input {font-family:Cursive;}
Textarea{font-family:Cursive;}

J'ai pris la police Cursive mais tu mets se que tu veux !!

Bon aprém
A+

PS :

Tu devrais changer la valeur des Textarea

Code:

cols="150"

par

Code:

cols="75"

Ouah, vous êtes super !! Et comment fait-on pour mettre cette couleur de fond pour toutes les cellules du formulaire : #C1E9F3 ?

Il te faut ajouter le code (au bon endroit)

Code:

background-color:#C1E9F3;

dans le CSS de ta page.

J'ai réussi à le mettre pour la couleur de fond du tableau mais pas pour la couleur de fond des cellules.

Voici ton CSS complet de ta page HTML

Code:

/*police de caractère*/
Label{font-family:Cursive;}
Center {font-family:Cursive;}
Input {
   font-family:Cursive;
}
Textarea{
   font-family:Cursive;
   background-color:#C1E9F3;
}

/*Arrondi Formulaire + Couleur*/
Input#pseudo {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
background-color:#C1E9F3;
}
Input#prenom {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
background-color:#C1E9F3;
}
Input#age {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
background-color:#C1E9F3;
}

textarea#occupation {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#passion {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#ou {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
textarea#plus {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}

A+

Ouah super !!! Merci !

Si je veux ajouter un champ par exemple, surnom cela donnerait ceci ?

Code:

+ "[font=Comic Sans MS]Mon surnom :[/font] " + "[b]" + form.nickname.value + "[/b]" + '\n'

Plus loin :

Code:

 <label for="surnom">Surnom :</label><br>
            <input name="surnom id="surnom" value=" " size="50" maxlength="100" type="text">

Il me semble qu'il te manque un guillemet aprés:

Code:

<input name="surnom

Oui vous avez raison. Sinon le code est juste ?

La meilleure façon de savoir est d'essayer !!

Non cela me met vous devez préciser un titre...

Il te manque un guillemet après:

Code:

<input name="surnom

et remplace nickname par surnom

Parfait ! J'ai ajouté lieu de résidence cela marche correctement et j'ai ajouté couleur préférée mais cela me met vous devez insérer.....Voici les codes :

Code:

+ "[font=Comic Sans MS]Couleur Préférée :[/font] " + "[b]" + form.couleurpréférée.value + "[/b]" + '\n'

Code:

<label for="couleur préférée">Couleur Préférée :</label><br>
            <input name="couleur préférée" id="couleur préférée" value=" " size="50" maxlength="100" type="text">

Supprime les accents !!