Les formulaires sont définis par l'élément form. Tous les éléments à l'intérieur de form appartiennent alors au formulaire concerné.
<form> … </form>
Dans la balise d'ouverture <form>, l'attribut action est attendu. C'est ainsi que l'on spécifie ce qui doit être fait avec les données du formulaire. Habituellement, il s'agit d'une application PHP.
<form method="post" action="form.php"> … </form>
Assurez-vous que le fichier spécifié peut effectivement être trouvé. Vous devez donc indiquer le bon chemin.
En fait, à la place d'un script, vous pouvez également spécifier une adresse e-mail.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
Dans ce cas, les données du formulaire sont envoyées par e-mail. Cependant, cela n'est pas très élégant, c'est pourquoi on opte presque toujours pour la variante script. Mais si vous n'avez pas de script sous la main, vous pouvez également envoyer le formulaire par e-mail en cas de besoin.
Un autre attribut important pour l'élément form est method. Cela permet de définir la méthode de transmission HTTP pour l'envoi du contenu du formulaire. Deux variantes différentes sont alors disponibles.
• post = Les données du formulaire sont transmises en deux étapes à l'adresse spécifiée. Tout d'abord, le navigateur contacte l'adresse spécifiée. Une fois cette étape réussie, les données du formulaire sont transmises au script.
• get = Avec cette méthode, les données du formulaire sont ajoutées à la fin de l'URL assignée à l'attribut action. Ainsi, les données du formulaire sont également visibles dans la barre d'adresse du navigateur, entre autres.
La question se pose alors de savoir laquelle de ces deux variantes il convient d'utiliser pour l'envoi des données du formulaire. En principe, vous pouvez utiliser les deux. Cependant, surtout lorsqu'il s'agit de gros volumes de données et d'envoi de fichiers sur le serveur, il est conseillé d'utiliser post.
Champs de formulaire simples
Jusqu'à présent, seule la structure extérieure du formulaire a été définie. Cependant, rien n'est encore visible dans le navigateur pour le formulaire lui-même.
<form method="post" action="form.php"> … </form>
Il est maintenant temps de remplir le formulaire avec du contenu/de la vie.
Le type de champ probablement le plus souvent requis est un champ de saisie à une ligne. On l'utilise par exemple pour demander les noms et prénoms ainsi que l'adresse e-mail. Les champs de saisie à une ligne sont définis de la manière suivante:
<input type="text" name="vorname" />
L'élément input se voit attribuer la combinaison attribut-valeur type="text". De plus, vous devriez attribuer un identifiant interne à chaque champ de saisie. Cet identifiant doit être unique dans le document. Il est particulièrement utile lorsqu'il s'agit de traiter les données du formulaire à l'aide d'un script. N'utilisez pas d'espaces et de caractères spéciaux dans l'identifiant.
Si vous regardez le résultat dans le navigateur, voici ce que vous obtiendrez:
L'ensemble n'a pas l'air très spectaculaire pour le moment. Mais si vous cliquez dans le champ texte, vous constaterez que vous pouvez déjà y saisir du texte.
Pour que les visiteurs sachent ce qu'ils doivent entrer dans le champ, il faut bien sûr encore un libellé.
Prénom : <input type="text" name="vorname" />
Ici aussi, un coup d'œil dans le navigateur donnera le résultat souhaité.
Vous pouvez définir la largeur du champ à l'aide de l'attribut size.
Prénom : <input type="text" name="vorname" size="30" /> <br /> Code postal : <input type="text" name="plz" size="5" />
L'attribut size permet de définir la largeur du champ.
Dans ce contexte, 5 correspond exactement à cinq caractères. L'attribut maxlength est également intéressant. Il permet de définir le nombre maximal de caractères autorisés dans le champ. Voici un exemple à nouveau:
Prénom : <input type="text" name="vorname" size="30" maxlength="40" />
Si la valeur spécifiée pour maxlength est plus grande que celle de size, le champ fera défiler automatiquement les saisies plus longues.
Vous pouvez obtenir une pré-remplissage du champ avec l'attribut value.
Prénom: <input type="text" name="vorname" value="Dein Name" />
La valeur attribuée à value est considérée comme une pré-saisie de champ.
Les utilisateurs peuvent effacer cette valeur pré-saisie.
Vous pouvez d'ailleurs empêcher que des valeurs soient effacées des champs. Pour ce faire, on définit un champ de saisie qui n'est en réalité plus un champ de saisie. En réalité, de tels champs sont souvent utilisés pour des sorties. Cela pourrait donc être intéressant, par exemple, pour afficher des valeurs calculées par script. Pensez par exemple à une calculatrice. Vous pouvez également pré-saisir manuellement un champ avec un texte que les visiteurs ne peuvent plus modifier. (Remarque: Le symbole euro n'est malheureusement pas correctement affiché dans la vue PDF).
<input name="preis" type="text" value="€ 699.-" readonly />
Pour définir un champ en lecture seule, on lui attribue l'attribut readonly. Encore une fois, jetons un coup d'œil au résultat :
Le texte prédéfini est directement visible. Cependant, il ne peut pas être effacé.
Définir les champs de mot de passe
Vous connaissez bien sûr les champs de mot de passe. Partout où vous vous inscrivez, vous devez fournir un mot de passe. (Généralement, vous devez même le saisir deux fois).
Les données saisies dans le champ de saisie ne sont pas visibles, mais sont automatiquement remplacées par des étoiles/des points par le navigateur. Avantage de cette option : les personnes qui pourraient regarder par-dessus votre épaule pendant la saisie du mot de passe ne peuvent pas le décrypter. Cependant, il est une erreur de penser que les champs de mot de passe sont automatiquement sécurisés. En fait, les mots de passe sont transmis en clair lors de l'envoi du formulaire en HTTP normal.
Les champs de mot de passe sont définis de la manière suivante :
<input type="password" name="passwort" />
L'attribut type est assigné à la valeur password. Encore une fois, jetons un coup d'œil au résultat :
Si vous y entrez quelque chose, les navigateurs le rendent immédiatement illisible pendant la saisie.
