Modifier un formulaire

[TheDirector]

Bonsoir, voici mon générateur :

Code:

<center><style>
  form{width:600px;}
  label{
      color:#FFFFFF;
      display: block;
      width: 280px;
      margin-right:10px;
      float: middle;
  }
p{
    text-align:center;
  }
</style>
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "Bonjour/bonsoir tout le monde, " + "\n"
+ "<strong>Prénom :</strong> " + form.prenom.value + "\n"
+ "<strong>Ton âge :</strong> " + form.age.value + "\n"
+ "<strong>Sexe :</strong> " + form.sexe.value + "\n"
+ "<strong>Ce que tu aime :</strong> " + form.aime.value + "\n"
+ "<strong>Ce que tu n'aime pas :</strong> " + form.aimepas.value + "\n"
+ "<strong>Comment as-tu découvert ce forum ?</strong> " + form.decouvert.value + "\n"
+ "<strong>Des remarques, des conseils pour l'améliorer ?</strong> " + form.remarque.value + "\n"
+ "<strong>Tes passions :</strong> " + form.passion.value + "\n"
+ "<strong>Ton orientation sexuelle :</strong> " + form.lien.value + "\n"
+ "<strong><font color=#FF0000>Tu as lu et tu accepte le règlement de ce forum :</font></strong> " + form.reglement.value + "\n"
+ "<font color=#1D702D><b>Code du règlement :</b></font> " + form.code.value + "\n"
+ "Voilà pour ma présentation :): , à bientôt :;p:" + "\n" ;
 
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
 
<form method="post" action="/post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<!-- champs invisibles -->
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="topictype" value="0" checked="checked" />
<input type="hidden" name="message" value="" />
<input type="hidden" name="subject" value="" />
<input type="hidden" name="f" value="2" />

<font color=#FFFFFF><b>Les champs comportant un * sont obligatoires !</b></font>

<label for="titre">Titre automatique :</label>
<input type="text" name="subject" id="titre" value="Présentation de " size="45" maxlength="60" class="USERNAME" readonly="readonly" /><br /><br />

<label for="prenom">Prénom : </label>
<input type="text" name="prenom" id="prenom" size="45" maxlength="60"  /><br /><br />

<label for="age">Âge :* </label>
<input type="text" name="age" id="age" size="45" maxlength="60" required="required" /><br /><br />

<label for="sexe">Sexe :* </label>
<select name="sexe" id="sexe">
<option value="Masculin" selected="selected">Masculin</option>
<option value="Féminin">Féminin</option></select><br /><br />
 
<label for="decouvert">Comment as-tu decouvert ce forum ?* </label><br />
<textarea name="decouvert" id="decouvert" rows="6" cols="80" required="required"></textarea><br /><br />

<label for="remarque">Des remarques, des conseils pour l'améliorer ?* </label><br />
<textarea name="remarque" id="remarque" rows="6" cols="80" required="required"></textarea><br /><br />

<label for="aime">Ce que tu aime :* </label><br />
<textarea name="aime" id="aime" rows="6" cols="80" required="required"></textarea><br /><br />

<label for="aimepas">Ce que tu n'aime pas :* </label><br />
<textarea name="aimepas" id="aimepas" rows="6" cols="80" required="required"></textarea><br /><br />

<label for="passion">Tes passions :* </label><br />
<textarea name="passion" id="passion" rows="6" cols="80" required="required"></textarea><br /><br />
 
<label for="lien">Quelle est ton orientation sexuelle ?* </label>
<select name="lien" id="lien">
<option value="Homosexuel" selected="selected">Homosexuel</option>
<option value="Homosexuelle">Homosexuelle</option>
<option value="Bisexuel">Bisexuel</option>
<option value="Bisexuelle">Bisexuelle</option>
<option value="Hétérosexuel">Hétérosexuel</option>
<option value="Hétérosexuelle">Hétérosexuelle</option></select><br /><br />*

<label for="reglement"><font color=#ff0000><b>J'ai lu et j'accepte le règlement de ce forum :* </b></font> </label>
<select name="reglement" id="reglement">
<option value="Non" selected="selected">Non</option>
<option value="Oui">Oui</option></select><br /><br />

<label for="code"><font color=#8bb336><b>Code du règlement :* </b></font> </label>
<input type="text" name="code" id="code" size="45" maxlength="60" required="required" /><br /><br />

<font color=#FF0000>Attention, en cliquant sur "Envoyer", un sujet sera créé automatiquement; celui-ci sera votre présentation. Avant de cliquer, vérifiez que vos informations sont bien correctes !</font>
 
<p><input type="submit" name="post" value="Envoyer" /></p>
</form></center>

J'aimerais qu'il devienne comme ça :


Sachant que "quelle est votre orientation sexuelle ?" reste un menu déroulant mais que "Sexe" et "J'ai lu et je respecte le règlement de ce forum" ne seront plus des menus déroulants mais des boutons radios.

Merci

[Ea]

Bonjour,


Pour l'image de fond il faudrait mettre une image de fond.

Pour les blocs orchestrés comme cela, il faudrait faire un tableau comme cela :
https://i.imgur.com/WPOIL.jpg

Cela pourrait être fait avec une structure :

TABLEAU
-- LIGNE 1
---- LIGNE 1 CASE 1
------ tableau d'une ligne et 3 cases ( prénom, age, sexe ) [ RETOUR LIGNE ]
------ tableau d'une ligne et 2 cases ( aime pas, passion ) [ RETOUR LIGNE ]
------ tableau d'une ligne et 2 cases ( orientation sexuelle, accepte réglement )
---- LIGNE 1 CASE 2 ( avec colspan=2 )
------ ce que tu aimes [ RETOUR LIGNE ] connu forum [ RETOUR LIGNE ] remarques
-- LIGNE 2
---- LIGNE 2 CASE 1 ( avec colspan=2 )
------ code du réglement
---- LIGNE 2 CASE 2
------ bouton envoyer

où tableau est <table> ligne est <tr> et case est <td>

Pour ce qui est du style, il suffit de chose du genre de :

Code:

input,textarea, select{
  border:2px solid black; /* bord de 2px de large noir */
  background: transparent; /* fond transparent */
}

Par contre je ne pense pas que les cases à cocher puisse être très modifiable pour le style.

Pour l'arrondi du bouton Envoyer, il faudrait voir pour une image, ou bien la propriété css " border-radius ".

Si vous voulez changer un menu déroulant en bouton radio, cela se fait comme ceci :

Code:

<select name="padam"><option value="rouge">vert</option><option value="blue">jaune</option></select>

Devient :

Code:

<input type="radio" value="rouge" name="padam" />vert  <input type="radio" value="blue" name="padam" />jaune

pour mettre un à gauche et à droite comme sur l'image, vous pouvez faire un tableau d'une ligne et 2 cases.

Cordialement.