Personnaliser un formulaire

Commenter

Contenu du snippet

Si vous avec un forum ou un chat ou tout autre script de ce type, afin que l'internaute puisse prévisualiser ce qu'il va envoyer... La capture d'écran vaut mieux qu'un long discours...

Source / Exemple : 


<html>
<head>
<title>Personnaliser un formulaire</title>
<script>
function style_1(couleur) {
document.formulaire.couleur.value = couleur;
document.all["message"].style.color = "#"+ couleur;
}

function style_2() {

if(!formulaire.message.style.fontWeight) {
formulaire.message.style.fontWeight = "bold";
} else {
formulaire.message.style.fontWeight = "";
}

}

function style_3() {

if(!formulaire.message.style.fontStyle) {
formulaire.message.style.fontStyle = "italic";
} else {
formulaire.message.style.fontStyle = "";
}

}

function style_4() {

if(!formulaire.message.style.textDecoration) {
formulaire.message.style.textDecoration = "underline";
} else {
formulaire.message.style.textDecoration = "";
}

}

function focus() {
// Donne le focus au champ message du formulaire
document.formulaire.message.focus()
}
</script>
</head>
<body>
<form method="post" name="formulaire">
<input type="hidden" name="couleur">
<input type="text" name="message">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="soumettre" type="submit" value="Envoyer">
<br><br>
<table cellpadding=5 cellspacing=0>
 <tr>
  <td>
<table cellpadding=2 cellspacing=0>
 <tr>
  <td>
Couleur du texte :
  </td>
  <td width=2>
  </td>
  <td>
<acronym title="Noir"><a href="javascript:style_1('000000')" style="background-color : #000000">&nbsp;&nbsp;&nbsp;</a></acronym>
  </td>
  <td>
<acronym title="Bleu"><a href="javascript:style_1('0000ff')" style="background-color : #0000ff">&nbsp;&nbsp;&nbsp;</a></acronym>
  </td>
  <td>
<acronym title="Rouge"><a href="javascript:style_1('ff0000')" style="background-color : #ff0000">&nbsp;&nbsp;&nbsp;</a></acronym>
  </td>
  <td>
<acronym title="Vert"><a href="javascript:style_1('00ff00')" style="background-color : #00ff00">&nbsp;&nbsp;&nbsp;</a></acronym>
  </td>
<td width=25 align="center">
?
  </td>
  <td>
Gras :
  </td>
  <td>
<input type=checkbox name="gras" value=1 onclick="style_2()">
  </td>
  <td width=25 align="center">
?
  </td>
  <td>
Italique :
  </td>
  <td>
<input type=checkbox name="italique" value=1 onclick="style_3()">
  </td>
  <td width=25 align="center">
?
  </td>
  <td>
Souligné :
  </td>
  <td>
<input type=checkbox name="souligne" value=1 onclick="style_4()">
  </td>
 </tr>
</table>
  </td>
 </tr>
</table>
</form>
<script>
focus();
</script>
</body>
</html>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (revinc)