1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Formulaire en couleur avec textes pré-definis sur boutons

Formulaire en couleur avec textes pré-definis sur boutons

5/5 (9 avis)

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

Commenter

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
Signaler
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...
Signaler
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
Signaler
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
Signaler
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
Signaler
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
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 (cs_leris)