Formulaire en couleur avec textes pré-definis sur boutons

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

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)