Les Formulaires
Les formulaires permettent de récupérer des données; liés à un code (PHP, Javascript), ils permettent de stocker celles-ci dans une base de données pour pouvoir ensuite les récupérer.
Ce sont les seuls éléments HTML qui permettent une communication non linéaire, une interactivité.
Les balises utilisées sont <FORM> </FORM>. Elles fonctionent avec la balise <INPUT> et elles peuvent prendre jusqu'à 7 attributs.
NAME baptise le formulaire. Le nom donné peut s'avérer utile pour certains codes.
ACTION indique l'adresse du fichier à qui la page HTML enverra les informations receuillies.
METHOD précise la manière d'envoyer les données: il prend un des deux valeurs "get" ou "post".
ENCTYPE définit le type de données à envoyer au serveur.
ACCEPT permet d'indiquer les fichiers à transmettre au serveur.
ACCEPT-CHARSET donne des informations supplémentaires au serveur concernant l'envoi de données.
TARGET permet de choisir la destination de la réponse (fenêtre ou cadre). Il peut prendre comme valeur:
"_blank" (nouvelle fenêtre)
"_self" (à la place du contenu présent)
"_parent" (idem que "_self" sauf que les cadres sont supprimés)
"_top" (occupe l'ensemble de la fenêtre présente)
La balise <INPUT> quant à elle peut prendre jusqu'à 19 attributs.
NAME identifie le champ de données pour qu'il soit reconnu par le fichier interpréteur.
TYPE définit le type de données à entrer. Il peut prendre une de ces 10 valeurs:
"button" bouton cliquable
"checkbox" case à cocher
"text" champ de texte
"file" bouton permettant de sélectionner un fichier à joindre
"hidden" champ invisible
"image" bouton graphique qui sert de "submit"
"password" champ de texte qui n'affiche pas les caractères entrés.
"radio" membre d'un ensemble de boutons radios. L'activation de l'un entraîne la désactivation des autres.
"reset" réinitialise l'ensemble du formulaire.
"submit" met fin à la saisie en envoyant les données.
ACCEPT indique le type de fichier à transmettre au serveur et est suivi d'une constante de type MIME.
ACCESKEY permet à l'utilisateur d'accéder directement à l'élément, grâce à une touche de raccourci..
ALIGN (cf. la mise en page)
ALT permet l'affichage d'un texte lors du survol du curseur.
BORDER gère la bordure automatique entourant l'élément.
CHECKED sélection d'un bouton au chargement de la page.
DATAFLD et DATASRC renseignent sur le nom et la base de données d'où provient le texte à afficher.
DISABLED annule la fonctionnalité d'un élément mais conserve son affichage.
ID nomme l'élément pour la page HTML (non pas son contenu pour la base de données)
MAXLENGHT limite le nombre de carctères qu'il est possible de saisir. [S'emploie avec TYPE="texte"]
READONLY annule la possiblité de saisie.
SIZE décide la taille du champ de saisie.
SRC indique l'adresse de l'image. [S'emploie avec TYPE="image"]
TABINDEX affecte une valeur lors du déplacement par tabulation.
USEMAP indique l'adresse de la carte graphique. [S'emploie avec TYPE="image"]
VALUE donne la valeur à envoyer si l'élément est coché. [S'emploie avec TYPE="checkbox" ou "radio"]
Il existe une autre balise de formulaire: <TEXTAREA>. Elle peut prendre 12 attributs dont plusieurs identiques à ceux de <INPUT>
ACCESKEY, ALIGN, DATAFIELD, DATASRC, DISABLED, READONLY, NAME et TABINDEX.
Cependant, certains lui sont propres:
COLS assigne un nombre de caractères maximum par ligne.
ROWS définit le nombre de lignes. (Sa valeur varie en fonction de la taille de police.)
STYLE attribue une feuille de style (définie).
WRAP gère le retour à la ligne. Sa désactivation autorise la barre de défilement et la touche Entrée comme fin de saisie.
Il influe également sur la transmission du retour à la ligne comme élément de texte.
Exemple:
<FORM ACTION="code.php" METHOD="post">
Votre Nom <INPUT TYPE="text" NAME="champ1" SIZE="30">
<BR>Voter pour ce tutorial <INPUT TYPE="checkbox" CHECKED NAME="vote">
<BR>Libre à vous de cocher cette case <INPUT TYPE="checkbox" NAME="champ3">
<BR><TEXTAREA ROWS="5">blabla</TEXTAREA>
<BR>Êtes-vous satisfait par ce tutorial?
<BR><INPUT TYPE="radio" CHECKED NAME="so"> oui
<BR><INPUT TYPE="radio" NAME="so"> non
<BR><INPUT TYPE="radio" NAME="so"> sans opinion
<BR><BR></FORM>
<INPUT TYPE="submit" NAME="champ1" VALUE="Prêt?">
Rendu:
Ce formulaire portant exclusivement sur HTML, l'exemple n'est présenté que sous sa forme visuelle, ainsi, les donné ne seront pas réellement traitées.