Positionnement absolu - Tout en CSS - Avec script d'envoi - Code source
Options pour formulaires
Un formulaire en CSS propose différentes options suivant les informations que vous souhaitez recueillir en fonction de vos besoins, pour exploiter le fichier reçu et pouvoir par exemple répondre au mieux de vos intérêts et de celui de vos visiteurs, souvents clients potentiels.Boutons radio et cases à cocher sont les plus fréquents avec les menus déroulants.
Ce nouveau formulaire CSS un peu différent de celui présenté page précédente, vous propose un pas à pas habituel et en page suivante son source intégral.
Formulaire réalisé, mais désactivé
Code placé dans HEAD
LABEL { DISPLAY: inline
; FLOAT: lef t ; WIDTH: 170px ; font-weight: bold ; margin-left: 75px ; }
.INPUT { background-color: #FFEFD5 ; font-family:
Arial, Helvetica, sans-serif ; color: red ; }
.OPTION { background-color: #FFEFD5 ; }
.SELECT { background-color: #FFEFD5 ; }
.TEXTAREA { background-color: #FFEFD5
; color: red ; }
.BUTTON { font-family: arial, helvetica,
sans-serif ; border-width: 2pt ; font-size: 16pt ; color: black ; top: 250px
; background-color: #F5DEB3 ; }
FORM
<FORM> Tag obligatoire qui marque l'ouverture d'un formulaire et le termine par un tag de fermeture </FORM>
<FORM ACTION="mailto:toto@mondomaine.com" METHOD=POST enctype="text/plain">
Je vous recommande pour les tags EORM et INPUT de vous reporter à la page précédente 65.
FIELDSET et LEGEND
Cette balise HTML FIELDSET qui se trouve à l'intérieur de la balise <FORM> </FORM> permet de définir certains aspects du formulaire, tels que "background-color:#FFE4B5" pour la couleur de fond, sans oublier d'identifier les parties lisibles du formulaire comme le nom, prénom, @mail...
< FIELDSET STYLE = "background-color: #FFE4B5" >
Quant à la balise LEGEND elle permet de définir le texte placé et sa position en "left", "center" ou "right".
< LEGEND align= "Type d'alignement" > ceci est un deuxième exemple </legend >
align="type d'alignement" soit "left"
= par défaut. (ce passage en rouge est simplement indiqué ici
pour vous guider et ça fonctionne bien s'il est dans le code source.
Mais si vous voulez obtenir la validation de HTML 1.0 il vous faut l'enlever.)
LABEL
LABEL { DISPLAY: inline ; FLOAT: lef t ; WIDTH: 170px ; font-weight: bold ; margin-left: 75px ; }
- DISPLAY permet de contrôler l'affichage
des boîtes.
- FLOAT spécifie le flottement d'une boîte
à gauche, à droite ou pas du tout. On peut l'employer pour des
éléments qui ne sont pas en position absolue.
- WIDTH: 170px ; va nous servir à positionner le texte en clair par rapport
aux éléments du formulaire qui sont alignés verticalement.
- font-weight: bold ; pour le corps du texte du formulaire en face de chaque
option.(nom, prénom, @mail...), ici en gras.
- margin-left:75px; sert à "aérer" le contenu par rapport
au conteneur du formulaire. Essayez de le supprimer pour voir.
Code source du départ de ce formulaire
<FORM ACTION="mailto:toto@mondomaine.com" METHOD=POST enctype="text/plain"
>
<FIELDSET STYLE = "background-color: #FFE4B5" > <legend align="Type
d'alignement" > ceci est un deuxième exemple </legend><br>
<LABEL name>Nom:</LABEL>
<INPUT name=nom size="27" maxlength="27" class="INPUT">
<BR>
name (ce passage en rouge est simplement indiqué ici pour vous guider et ça fonctionne bien s'il est dans le code source. Mais si vous voulez obtenir la validation de HTML 1.0 il vous faut l'enlever.)
Zone de saisie
Ce code "INPUT" est obligatoire (sauf pour boutons radio et
les cases à coche) , et le nom de chaque zone doit être unique
dans le formulaire.
<LABEL name>Nom: </LABEL>
<INPUT name=nom size="27" maxlength="27"
class="INPUT">
- name = définit le nom de la donnée
qui permettra au webmaster de se repérer dans les données reçues.
- 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 saisis.
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.
Boutons "type radio"
Les boutons radio sont utilisés pour préciser un choix, MAIS un choix seulement sur le nombre présenté. Ses propriétés sont: name, value, item(pour le rang du bouton en commençant par 0, checked et defaultchecked.
Reprenons le code de base HTML:
<LABEL>Etes-vous: </LABEL>
un homme
<input type="radio" name="sexe"
value="homme" class="OPTION"
une femme
<input type="radio" name="sexe"
value="femme" class="OPTION"
>
Cases à cocher "type checkbox"
Les cases à cocher sont utilisés pour préciserégalement
un choix, MAIS cette fois plusieurs cases peuvent être simultanément
cochées car elles sont indépendantes entre elles.
Reprenons le code de base HTML:
<LABEL>Possédez-vous: </LABEL>
une voiture
<input type="checkbox" name="motorisation"
value="voiture" class="OPTION"
CHECKED >
une moto
<input type="checkbox" name="motorisation"
value="moto" class="OPTION" >
un vélo
<input type="checkbox" name="motorisation"
value="velo" class="OPTION">
- type = définit le type de données utilisée, ici "checkbox"
- name = définit le nom de la donnée
qui permettra au webmaster de se repérer dans le message reçu
: OBLIGATOIREMENT le même
- value : Nom du choix correspondant à la case ou aux cases
- checked : lorsqu'il est placé dans une
des balises du bouton <input>, le bouton sera coché par défaut,
mais peut être un désavantage mal compris par le visiteur. ici
placé uniquement dans le code ci-dessus pour exemple, mais pas dans le
formulaire présenté.
Liste de sélection "options"
Cette option permet de proposer une liste utilisée aussi pour préciser un choix, MAIS un choix seulement.
Reprenons le code de base HTML:
<LABEL>Préférez-vous: </LABEL>
<select name="loisirs" class="SELECT">
<option value="cinema"> aller au cinéma</option>
<option value="nature" SELECTED
> aller dans la nature</option>
<option value="television"> regarder la télévision</option>
</select>
- select = pour introduire le "name"
- name = définit le nom de la donnée
qui permettra au webmaster de se repérer dans le message reçu
- option = comme le précise son nom, définit une option possible
pour le visiteur et il se place en tête devant "value"
- value : Nom du choix effectué par le visiteur qui sera "cinéma"
ou "nature" ou "télévision"
- SELECTED : lorsqu'il est placé dans une
des balises du bouton <option>, la ligne se présentera affichée
par défaut, mais peut être un désavantage mal compris par
le visiteur. Ici il est placé uniquement dans le code ci-dessus pour
exemple, mais pas dans le formulaire présenté.
Positionnement absolu - Tout en CSS - Avec script d'envoi - Code source
