Positionnement absolu - Tout en CSS - Avec script d'envoi - Code source
Un formulaire en CSS permet de présenter facilement, avec le positionnement souhaité et à l'aide de "classes", un ensemble facile à créer et dont l'apparence finale est en rapport avec le design de votre page. Les tags HTML sont repris tout naturellement MAIS en évitant l'utilisation d'un tableau.
Voici un premier formulaire proposé en CSS, avec comme référence son semblable en HTML que vous pouvez revoir (je vous le conseille vivement si vous n'êtes pas familiarisé avec ce code de base) en visitant la page perso 55. Vous y trouvez les connaissances indispensables pour bien comprendre la liaison opérée avec cette page en CSS, et des URL pour éventuellement s'inscrire gratuitement chez un spécialiste des formulaires avec un peu de javascript.
Code placé dans HEAD
p { font-family: arial, helvetica,sans-serif ; text-align:
justify ; font-size: 10pt; color: black ; background-color: #FFFFFF ; }
form { position: absolute ; left: 15% ;
width: 70% ; height: 90% ; background-color: #CCFFCC ; padding: 20px ; border:
solid 2px green ; }
input { position: absolute ; left: 170px
; width: 60% ; height: 25px ; font-family : arial, helvetica, sans-serif ; font-size:
12pt; background-color: #FAF0E6 ;
textarea { position: absolute ; left: 170px
; width: 60% ; height:25% ; font-family : arial, helvetica, sans-serif ; background-color:
#FAF0E6 ; font-size: 12pt ; }
.button { font-family : arial, helvetica,
sans-serif ; background-color: green ; font-size: 16p ;color: white ; top: 80%
; border-width: 2pt ; }
h4 {color: green ; font-size: 12pt ; } (pour le texte apparent du
formulaire: nom, @mail, observations)
FORM ce tag obligatoire indique l'ouverture d'un formulaire. Les balises générant les boutons, zone de texte et autres éléments seront en conséquence placées entre <FORM> et </FORM>. Deux formulaires ne peuvent être imbriqués.
dans HEAD
form { position: absolute ; left: 15% ; width: 70% ; height: 90% ; background-color: #CCFFCC ; padding: 20px ; border: solid 2px green ; }
dans BODY
<form action="mailto:toto@mondomaine.com" METHOD="POST" enctype="text/plain" name="form">
S'y trouvent définis :
- le type de position retenu, ici absolute
- à quelle distance du bord gauche, ici left: 15%
- la dimension du formulaire, ici width: 70% ; height: 90%
- la couleur du fond de formulaire, ici background-color: #CCFFCC, mais possibilité
d'y placer une image avec background-image:url(xxxx.gif)
- une marge interne qui permet d'écarter les textes du bord, ici padding
- une zone pour aérer le contenu, ici padding: 20px
- une bordure pour la présentation, ici border: solid 2px green
ACTION = procédure avec "http://"
ou "mailto" comme ici.
METHOD=POST = ou encore GET (peu utilisé),
suivant le mode d'exploitation du serveur, ici POST.
enctype="text/plain" = cette option
(car elle n'est pas obligatoire) indique le type" mime, texte ou aucun",
des données lorsque vous positionnez l'attribut METHOD="POST".
Ici vous n'avez pas besoin d'y toucher.
input ce tag accompagné de différents attributs, sert à définir un champ d'une seule ligne pour habituellement saisir quelques mots seulement. Tout champ de saisie introduit par "input" doit posséder un nom : input name="xxxxx" (attention, pas d'espace et si possible pas de caractères spéciaux.) Ce tag "name" est obligatoire et sauf pour les cases à cocher et les boutons radio, le même nom ne doit pas être utilisé deux fois dans le même formulaire.
dans HEAD
input { position: absolute
; left: 170px ; width: 60% ; height: 25px ; font-family : arial, helvetica,
sans-serif ; font-size: 12pt; background-color: #FAF0E6 ; }
dans BODY
<input type="Text" name="Nom" maxlength="25" size="25">
S'y trouvent définis :
- le type de position retenu, ici absolute
- la distance du bord gauche, ici left: 170px
- la dimension de la zone de saisie, ici width:60% ; height: 25px
- la famille de police, ici les deux plus la générique
- la taille de la police des caractères tapés, ici 12pt
- la couleur du fond de cette zone, ici background-color: #FAOE , mais possibilité
d'y placer une image avec background-image:url(xxxx.gif)
Longueur du champ dans le BODY
- size = (nombre) pour définir la
longueur du champ (zone de saisie) qui correspond au nombre de caractères
simultanément visibles.
- maxlength = (nombre) pour définir
la longueur interne du champ qui correspond au nombre
réel de caractères pouvant être saisi.
Quand la valeur interne est plus grande que la valeur du champ,
le texte défile automatiquement. A l'inverse si la valeur interne est
plus petite que la valeur du champ, le texte se bloque à la valeur interne.
C'est subtil mais compréhensible, vu que si vous avez placé par
exemple pour une question d'esthétique des zones de saisie de même
longueur, il se peut que vous ne souhaitiez pas que telle réponse dépasse
tant de caractères. Les deux valeurs peuvent être identiques.Ne
pas confondre avec la dimension de la zone de saisie, ici width:60% ; height:
25px.
Dans cet exemple <input type="Text" name="Nom" width: 60% ; height: 25px ; >
Application : Vous pouvez placer une ou les deux valeurs de champ mentionnées directement dans la ligne de code "input".
textarea ce tag accompagné des attributs
"rows" (lignes) et "cols"
(colonnes) permet la création d'une une zone de saisie de
texte plus importante que les premières vues avec "input".
Sauf instructions contraires, si vous autorisez de taper un texte plus long
ou plus large que la zone de saisie, des ascenseurs se mettront automatiquement
en place.
Ici les ascenseurs apparaîtront quand le texte aura dépassé
5 colonnes.
dans HEAD
textarea { position:
absolute ; left: 170px ; width: 60% ; font-family : arial, helvetica, sans-serif
; height:25% ; font-size: 12pt ; background-color: #FAF0E6 ; }
et dans BODY: <textarea name="Observations" cols="20"
rows="5"></textarea>.
S'y trouvent définis :
- le type de position retenu, ici absolute
- la distance du bord gauche, ici left: 170px
- la dimension de la zone de saisie, ici width:60% ; height: 25%
- la taille de la police des caractères tapés, ici 12pt
- la couleur du fond de cette zone, ici background-color: #FAF0E6.
Dimension du champ dans le BODY
Outre le "name="xxx" indispensable parce qu'il définit le nom de contrôle qui sera reçu par le webmaster lors du transfert des données, les deux dernières valeurs suivantes permettant de fixer la dimension de la zone de saisie.
- cols="20" pour le nombre de
colonnes de caractères
- rows="5" pour le nombre de lignes,
avant que le scrollbar ne s'active.
Nota : body {scrollbar-base-color: #339900 ;} qui permet en le plaçant dans HEAD, de mettre en couleur les barres de défilement de la fenêtre (ici en vert), produit également son effet sur le scrollbar de "textarea".
submit qui permet en cliquant ce bouton d'envoyer les données au webmaster du site visité.
dans HEAD
button { font-family : arial,
helvetica, sans-serif ; font-size: 16p ;color: white ; background-color: green
; top: 80% ; border-width: 2pt ; }
et dans BODDY: < input type="Submit" value="Envoyer"
class="button" style="height: 30px" name="Envoyer"
>
S'y trouvent définis :
- la famille de police, ici les deux plus la générique
- le corps de la police affichée dans le bouton, ici 16pt
- la couleur de cette police, ici white (blanc)
- la couleur du fond de cette zone, ici background-color: #FAOE, mais possibilité
d'y placer une image
- la distance du bord supérieur, ici top: 80%
- une bordure pour faire joli, ici border-width: 2pt
Dimension du bouton dans le BODY
Ce bouton sert à expédier les données du formulaire et sa dimension en hauteur compte-tenu du corps de la police, est fixé à style="height: 30px".
"type"
Ce tag obligatoire permet de définir le type de la zone de saisie et supporte diverses valeurs qui sont :
- type="TEXT" pour définir une zone où sera
saisi le texte.
- type="SUBMIT" pour un bouton qui déclenche l'envoi des données.
- type="CHECKBOX" pour disposer des cases à cocher, chacune indépendante et éventuellement une seule permise sur l'ensemble..
- type="PASSWORD" pour une zone de saisie avec des caractères tapés et en même temps remplacés par des étoiles, mais reçus en clair à l'arrivée.
- type="RADIO" pour un élément de saisie sous forme d'un bouton radio, avec en général un seul choix possible.
- type="HIDDEN" pour créer un élément de saisie invisible à l'écran mais dont le contenu est transmis avec le reste des données
- type="RESET" pour éventuellement permettre au visiteur de vider toutes les données frappées.
* les deux premiers "types" TEXT et SUBMIT sont utilisés dans ce modèle de formulaire.
Positionnement absolu - Tout en CSS - Avec script d'envoi - Code source
