begin process at 2012 05 28 10:13:27
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > FORMULAIRE EN COULEUR AVEC TEXTES PRÉ-DEFINIS SUR BOUTONS

FORMULAIRE EN COULEUR AVEC TEXTES PRÉ-DEFINIS SUR BOUTONS


 Information sur la source

Note :
5,83 / 10 - par 6 personnes
5,83 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Niveau :Débutant Date de création :24/02/2004 Vu :14 249
Auteur : leris

Ecrire un message privé
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <!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>
<!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 ...


 Sources du même auteur

Source avec Zip EXPAND BANNER EN JAVASCRIPT
Source avec Zip LA CELEBRE FENETRE BEOS DE ED PROD (MISE À JOUR)
BOUGE DE LA ! DEPLACEMENT D'UN CALQUE.
SCROLL BAR EN COULEUR (ENCORE ET TOUJOURS ...)
MENU DEROULANT MULTIDIRECTION.
Toutes les sources de leris

 Sources de la même categorie

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama
SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Toutes les sources de la catégorie Formulaire

Commentaires et avis

Commentaire de Spiritraid le 24/02/2004 07:57:20

cool, exactement ce qu'il me fallait !

merci !!

Commentaire de omallet16 le 01/03/2004 11:09:11

y po moyen de lui mettre une touche envoie par mail par exemple ?

Commentaire de leris le 01/03/2004 11:25:55

ça , c'est à toi de le personnaliser ...

de rajouter des options ... moi je me suis concentré sur le textarea .


cordialement,

L.

Commentaire de lawraC le 08/04/2004 17:13:51

Ci-joint, une version modifiée de ton script.
Elle permet, par exemple d'intégrer un système de balises (ouverte, fermée) et les retour chariots.


C'est tout prêt à être testé
---------------------------------------------------

Je reprends juste le javascript et le HTML.

&lt;script language="JavaScript" type="text/javascript"&gt;

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&gt;0)
  {
  document.poster.message.caretPos.text =  document.poster.message.caretPos.text ;
  }
  else
  {
  document.poster.message.caretPos.text = defaultText;
  }
  }
  else document.poster.message.value += defaultText;
  }
  
  
  
  
function AddText2(bouton,txt1,txt2)
  {
  val = bouton.value;
  if (val.indexOf('*')&gt;0)
  {
   bouton.value=txt1 ;
AddText(txt2);
  }
  else
  {
   bouton.value=txt1 + '*';
AddText(txt1);
}
  
  
  }
  
  
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;hr color="blue" width="600" size="1"&gt;
&lt;form name="poster"&gt;
  &lt;input type="button" name="button1" class="but01" value="&lt;li&gt;" onclick="javascript:AddText2(this,'&lt;li&gt;','&lt;/li&gt;');"&gt;
  &lt;input type="button" name="button1" class="but01" value="&lt;b&gt;" onclick="javascript:AddText2(this,'&lt;b&gt;','&lt;/b&gt;');"&gt;
  &lt;input type="button" name="button1" class="but01" value="&lt;br&gt;" onclick="javascript:AddText('&lt;br&gt;');"&gt;
  &lt;input type="button" name="button1" class="but01" value="&lt;table&gt;" onclick="javascript:AddText2(this,'&lt;table&gt;','&lt;/table&gt;');"&gt;
  &lt;input type="button" name="button1" class="but01" value="&lt;tr&gt;" onclick="javascript:AddText2(this,'&lt;tr&gt;','&lt;/tr&gt;');"&gt;
   &lt;input type="button" name="button1" class="but01" value="&lt;td&gt;" onclick="javascript:AddText2(this,'&lt;td&gt;','&lt;/td&gt;');"&gt;
   &lt;input type="button" name="button1" class="but01" value="Retour chariot" onclick="javascript:AddText('\n');"&gt;
&lt;!-- ajouter des boutons et leurs textes ici --&gt;
&lt;br&gt;&lt;br&gt;
&lt;textarea rows='8' cols='50' class="texta" name=message wrap=virtual onmouseover="this.focus();"&gt;
&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
&lt;!-- option --&gt;
&lt;input type="reset" name="Submit" value="Reset" class="red"&gt;
&lt;input type="submit" name="envoi" value="submit" action="" class="sub"&gt;
&lt;/form&gt;

Commentaire de Spiritraid le 14/06/2004 22:51:51

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 &gt; 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 ??

Commentaire de lawraC le 15/06/2004 08:29:25

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

Commentaire de lawraC le 15/06/2004 08:29:57

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

Commentaire de Arcagi le 05/10/2004 20:23:27

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

Commentaire de coucou747 le 25/10/2004 11:25:40 administrateur CS

envoi par mail, fait le en ajoutant un post vers du php...

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Archos 7 home tablet - 2 Go
Entre 149€ et 159€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,640 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)