Formulaire en couleur avec textes pré-definis sur boutons

5/5 (9 avis)

Snippet vu 15 950 fois - Téléchargée 27 fois

Contenu du snippet

demandé sur le forum .
j'ai pensé que d'autes pourraient en profiter.

-boutons avec texte pre-defini pour ajout dans le textarea.
-focus automatique sur textarea au survol.
-bouton reset.
-couleurs facilement modifiables dans la feuille de style integrée dans la page.

Source / Exemple :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Formulaire</title>
<!-- par Onkr@krikru pour http://www.bluejayway.fr.st -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type=text/css>
BODY {filter:progid:DXImageTransform.microsoft.Gradient(gradientType=1,StartColorStr='#F0F8FF',EndColorStr='#D0DCFF');
color: blue;
FONT-FAMILY: Arial, Helvetica, sans-serif; 
text-decoration:none;
FONT-WEIGHT: normal; 
FONT-SIZE: 10px;
text-align: center;
}

BODY{
/* la couleur principale (face) */
scrollbar-face-color:#E3EFFE;
/* la couleur des fleches */
scrollbar-arrow-color:blue;
/* la couleur de fond (entre le curseur et la fleche) */
scrollbar-track-color:#F0F8FF;
/* la couleur claire (haut+gauche) */
scrollbar-highlight-color:#E3EFFE;
/* la couleur claire 2 (haut+gauche) */
scrollbar-3dlight-color:#00BFFF;
/* la couleur foncee (bas+droite) */
scrollbar-shadow-color:#E3EFFE;
/* la couleur foncee 2 (bas+droite) */
scrollbar-darkshadow-color:#00BFFF;
 }
.but01{
color: blue;
width: 80px;
font-family: arial;
background-color: BurlyWood;

}
.red{
color: LightPink;
background-color: red;
margin-right: 10px;
}
.texta{
background-color: aliceblue;
color: blue;
}
.sub{
background-color: LightSteelBlue;
color: DarkSlateBlue;
}
</style>
<script language="JavaScript" type="text/javascript">

function AddText(defaultText) 
{
if (document.poster.message.createTextRange) 
{
  var text;
  document.poster.message.focus(document.poster.message.caretPos);
  document.poster.message.caretPos = document.selection.createRange().duplicate();
  if(document.poster.message.caretPos.text.length>0)
  {
  document.poster.message.caretPos.text =  document.poster.message.caretPos.text ;
  }
  else
  {
  document.poster.message.caretPos.text = defaultText;
  }
  }
  else document.poster.message.value += defaultText;
  }
</script>
</head>
<body>
  <hr color="blue" width="600" size="1">
<form name="poster">
  <input type="button" name="button1" class="but01" value="http://www" onclick="javascript:AddText('http://www');">&nbsp;
  <input type="button" name="button1" class="but01" value="webmaster" onclick="javascript:AddText(' webmaster ');">&nbsp;
  <input type="button" name="button1" class="but01" value="@" onclick="javascript:AddText('@');">&nbsp;
  <input type="button" name="button1" class="but01" value="signature" onclick="javascript:AddText(' signature ');">&nbsp;
  <input type="button" name="button1" class="but01" value="objet" onclick="javascript:AddText(' objet ');">&nbsp;  
<!-- ajouter des boutons et leurs textes ici -->
<br><br>
<textarea rows='8' cols='50' class="texta" name=message wrap=virtual onmouseover="this.focus();">
</textarea><br><br>
<!-- option -->
<input type="reset" name="Submit" value="Reset" class="red">
<input type="submit" name="envoi" value="submit" action="" class="sub">
</form>
  <hr color="blue" width="600" size="1">
</body>
</html>

Conclusion :


si vous modifiez ce script et l'utilisez sur votre site , merci de me donner l'adresse que je voie à quoi ça ressemble ...

A voir également

Ajouter un commentaire Commentaires
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
41
envoi par mail, fait le en ajoutant un post vers du php...
Messages postés
4
Date d'inscription
dimanche 11 avril 2004
Statut
Membre
Dernière intervention
21 mars 2005

Salut!

Pas mal du tout ton code, je fais pas de javascript, mais il m'a été très utile car celui de phpBB n'est pas évident à comprendre...

Bravo
Messages postés
90
Date d'inscription
mercredi 11 juin 2003
Statut
Membre
Dernière intervention
3 février 2011

Ola !

Le problème vient surement du fait que ton form et ton textarea ont le même nom.
Je crois savoir que javascript est sensible à ce genre de chose.

LawraC
Messages postés
90
Date d'inscription
mercredi 11 juin 2003
Statut
Membre
Dernière intervention
3 février 2011

Ola !

Le problème vient surement du fait que ton form et ton textarea ont le même nom.
Je crois savoir que javascript est sensible à ce genre de chose.

LawraC
Messages postés
20
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
11 mai 2004

j'ai un petit pb :/
je l'ai trafiqué pour qu'il corresponde à mon code et il marche plus :(

mon code :
if(document.post.post.createTextRange)
{
var text;
document.post.post.focus(document.post.post.caretPos);
document.post.post.caretPos = document.selection.createRange().duplicate();
if(document.post.post.caretPos.text.length > 0)
{
document.post.post.caretPos.test = document.post.post.caretPos.text;
}
else
{
document.post.post.caretPos.test = code;
}
}
else document.post.post.value += code;
}

le nom du formulaire est post et le nom du textarea est post.
qq1 saitoù est mon pb ??
Afficher les 9 commentaires

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.