Formulaire laid HTML. Formulaires en HTML. I. Saisie manuelle des données
Étiqueter (de l'anglais formulaire- formulaire) installe un formulaire sur une page Web.
Le formulaire est destiné à l'échange de données entre l'utilisateur et le serveur. Le champ d'application des formulaires ne se limite pas à l'envoi de données au serveur ; à l'aide de scripts clients, vous pouvez accéder à n'importe quel élément du formulaire, le modifier et l'appliquer à votre discrétion.
Un document peut contenir un nombre illimité de formulaires, mais un seul formulaire peut être soumis au serveur à la fois. Pour cette raison, les données du formulaire doivent être indépendantes les unes des autres.
Pour soumettre le formulaire au serveur, utilisez le bouton Soumettre, la même chose peut être obtenue en appuyant sur la touche Entrée dans le formulaire. Si le bouton Soumettre est manquant sur le formulaire, Touche Entrée imite son utilisation.
Lorsque le formulaire est soumis au serveur, le contrôle des données est transféré au programme spécifié par l'attribut action de l'élément
La balise fermante est obligatoire.
WAI ARIA
Valeur du rôle par défaut : formulaire
Valeurs de rôle valides :
aucun
présentation
recherche
Attributs
accept-charset - Définit le codage dans lequel le serveur peut accepter et traiter les données.
action - L'adresse du programme ou du document qui traite les données du formulaire.
autocomplete - Active la saisie semi-automatique des champs du formulaire.
enctype - La façon dont les données du formulaire sont codées.
méthode - Méthode du protocole HTTP.
name - Le nom du formulaire.
novalidate - Annule la validation intégrée des données du formulaire pour l'exactitude de la saisie.
target - Le nom de la fenêtre ou du cadre où le gestionnaire chargera le résultat renvoyé.
accepter-jeu de caractères
Définit le codage dans lequel le serveur peut accepter et traiter les données du formulaire.
Syntaxe
Valeurs
Nom d'encodage, par exemple Windows-1251, UTF-8, etc.
Valeur par défaut
L'encodage défini pour la page.
action
Spécifie le gestionnaire auquel les données du formulaire sont accessibles lorsqu'elles sont soumises au serveur. Peut agir en tant que gestionnaire programme serveur ou un document HTML qui inclut des scripts côté serveur (par exemple Parser). Une fois que le gestionnaire a effectué des actions sur les données du formulaire, il renvoie un nouveau document HTML.
Si l'attribut action est manquant, la page actuelle est rechargée, ramenant tous les éléments du formulaire à leurs valeurs par défaut.
Syntaxe
Valeurs
La valeur est considérée comme totale ou chemin relatif au fichier du serveur.
Valeur par défaut
saisie semi-automatique
Contrôle le remplissage automatique des champs du formulaire. La valeur peut être remplacée par l'attribut de saisie semi-automatique sur des éléments de formulaire spécifiques.
Le remplissage automatique est effectué par le navigateur, qui mémorise les valeurs écrites la première fois que vous les saisissez, puis les remplace lorsque vous les saisissez à nouveau dans les champs du formulaire. Dans ce cas, la saisie semi-automatique peut être désactivée dans les paramètres du navigateur et ne peut pas être modifiée dans ce cas à l'aide de l'attribut autocomplete.
Lorsque vous saisissez les premières lettres du texte, une liste de valeurs précédemment enregistrées s'affiche, à partir de laquelle vous pouvez sélectionner ce dont vous avez besoin.
Syntaxe
Valeurs
on - Active le remplissage automatique du formulaire.
off - Désactive la saisie automatique. Cette valeur est généralement utilisée pour empêcher le navigateur de sauvegarder des données importantes (mots de passe, numéros de carte bancaire), ainsi que des données rarement saisies ou uniques (captcha).
Valeur par défaut
enctype
Détermine la manière dont les données du formulaire sont codées lorsqu'elles sont soumises au serveur. Il n'est généralement pas nécessaire de définir l'attribut enctype ; les données sont comprises correctement du côté du serveur. Cependant, si vous utilisez un champ de soumission de fichier (input type="file"), vous devez définir l'attribut enctype comme multipart/form-data .
Syntaxe
Valeurs
application/x-www-form-urlencoded - Au lieu d'espaces, mettez + , les symboles comme les lettres russes sont codés par eux valeurs hexadécimales(par exemple, %D0%90%D0%BD%D1%8F au lieu d'Anya).
multipart/form-data - Les données ne sont pas codées. Cette valeur est utilisée lors de l'envoi de fichiers.
text/plain - Les espaces sont remplacés par un signe +, les lettres et autres caractères ne sont pas codés.
Valeur par défaut
application/x-www-form-urlencoded
méthode
L'attribut méthode indique au serveur la méthode de requête.
Syntaxe
Valeurs
La valeur de l'attribut méthode n'est pas sensible à la casse. Il existe deux méthodes : obtenir et publier.
get - Cette méthode est l'une des plus courantes et est conçue pour obtenir les informations requises et transférer les données vers barre d'adresse. Les paires nom=valeur sont ensuite ajoutées à l'adresse après le point d'interrogation et séparées par une esperluette (symbole &). L'avantage d'utiliser la méthode get est que l'adresse avec tous les paramètres peut être utilisée à plusieurs reprises, en l'enregistrant, par exemple, dans les favoris de votre navigateur, et vous pouvez également modifier les valeurs des paramètres directement dans la barre d'adresse.
poste - Méthode de publication envoie des données au serveur dans une requête du navigateur. Cela vous permet d'envoyer plus données que celles disponibles obtenir la méthode, puisque la publication n'a pas de limite de 4 Ko. Gros volumes les données sont utilisées dans les forums, services postaux, remplissage de la base de données, lors de l'envoi de fichiers, etc.
Valeur par défaut
nom
Définit nom unique formes. Généralement, le nom du formulaire est utilisé pour accéder à ses éléments via des scripts.
Syntaxe
Valeurs
Le nom est un ensemble de caractères comprenant des chiffres et des lettres. JavaScript est sensible à la casse, donc lorsque vous accédez à un formulaire par son nom via des scripts, utilisez la même orthographe que l'attribut name.
Valeur par défaut
novalider
Annule la vérification intégrée de l'exactitude des données saisies par l'utilisateur dans le formulaire. Cette vérification est effectuée automatiquement par le navigateur lors de l'envoi du formulaire au serveur et intervient pour les champs , , ainsi que s'il existe un modèle ou un attribut obligatoire.
Syntaxe
Valeurs
Valeur par défaut
Par défaut, cet attribut est désactivé.
cible
Une fois que le gestionnaire de formulaire a reçu les données, il renvoie le résultat sous forme de document HTML. Vous pouvez définir le cadre dans lequel la page Web résultante sera chargée. A cet effet, il est utilisé attribut cible, sa valeur est le nom du cadre. Si la cible n'est pas définie, le résultat renvoyé est affiché dans l'onglet actuel.
Syntaxe
Valeurs
La valeur est le nom du cadre spécifié par l'attribut name de l'élément
_blank - Charge la page dans nouvel onglet navigateur.
_self - Charge la page dans l'onglet actuel.
_parent - Charge la page dans le cadre parent ; s'il n'y a pas de frames, alors cette valeur fonctionne comme _self .
_top - Annule tous les cadres et charge la page dans la fenêtre du navigateur ; s'il n'y a pas de frames, alors cette valeur fonctionne comme _self .
Valeur par défaut
Caractéristiques
Exemples
FORMULAIRE
Les formulaires HTML sont des éléments d'interface complexes. Ils comprennent divers éléments fonctionnels: champs de saisie Et
La plupart les informations du formulaire Web sont transmises à l'aide de l'élément . Pour saisir une ligne de texte, utilisez l'élément , pour plusieurs lignes - élément
Élément
Nom de familleNom de familleNom de famille
Les champs de formulaire peuvent être divisés en blocs logiques à l'aide de l'élément
. Le navigateur affichera
sous la forme d'un cadre autour d'un groupe d'éléments de forme. L'apparence du cadre peut être modifiée à l'aide de feuilles de style en cascade (CSS). Pour ajouter un titre pour chaque groupe, vous aurez besoin d'un élément , qui spécifie le texte du titre du groupe à intégrer dans le cadre.
Les formulaires en HTML sont le sujet le plus complexe, mais d’un autre côté, peut-être le plus intéressant en HTML.
Les formulaires Web permettent aux visiteurs du site de saisir certaines informations dans des champs spéciaux, et le développeur les reçoit sous une forme qui lui convient.
Un exemple de formulaire pourrait être un livre d’or, un questionnaire ou un test en ligne. Les formulaires sont remplis lors de l'inscription sur le site, lors de la passation de commandes dans une boutique en ligne, etc.
En utilisant HTML, vous pouvez créer un cadre de formulaire : champs de texte, menus, listes, boutons, cases à cocher et boutons radio. C'est-à-dire les éléments à l'aide desquels certaines informations sont saisies dans le formulaire.
Ensuite, les données saisies dans le formulaire sont envoyées au serveur pour traitement. Mais HTML est impuissant ici - un programme ou un script qui y est attaché travaille déjà sur le traitement du formulaire. Ces programmes sont généralement écrits en PHP ou JavaScript.
Attributs du formulaire - balise
.
L'attribut action est obligatoire pour tout formulaire - il spécifie l'adresse du fichier qui sert le formulaire ( traite les données qui y sont saisies).
L'attribut méthode spécifie comment le contenu du formulaire sera soumis. Il existe deux méthodes : GET et POST. Désormais, cela n'a aucun sens d'approfondir ces paramètres, puisque le sujet de l'envoi d'informations à l'aide des méthodes GET et POST concerne les langages informatiques ( par exemple PHP). Il suffit de savoir que c'est la méthode de transfert de données POST qui est utilisée dans la plupart des cas dans les formulaires.
Attribut de nom de balise
La direction cardinale est l'une des quatre directions principales :
7 merveilles du monde !
La direction cardinale est l'une des quatre directions principales :
Nord Sud Ouest Est
7 merveilles du monde !
Pyramide de Khéops Jardins suspendus de Babylone Statue de Zeus à Olympie Temple d'Artémis à Éphèse Mausolée d'Halicarnasse Colosse de Rhodes Phare d'Alexandrie
Champ de texte multiligne - balise
Étiqueter
Attribut de nom de balise
L'attribut désactivé désactive le champ - le contenu du champ ne peut pas être modifié et il n'est pas accessible. L'attribut readonly indique que le champ est en lecture seule - l'utilisateur n'a pas la possibilité de modifier le contenu, mais il est disponible - il peut être sélectionné et, par exemple, copié.
Vous pouvez définir la largeur du champ de texte en caractères et la hauteur du champ en lignes en utilisant respectivement les attributs cols et rows.
Si le contenu du champ dépasse sa taille, un curseur apparaîtra.
Exemple d'utilisation d'un formulaire
Voyons maintenant comment fonctionne le formulaire.
Formulaire de commande de vidéos éducatives :
Votre nom : *
Votre commande :
Sélectionnez le média :
CD
DVD
Clé USB
Votre e-mail : *
Votre adresse : *
Compte tenu des balises HTML de base, nous ne pouvons nous empêcher d'aborder un élément aussi important que les formulaires. Des commentaires sont souvent nécessaires sur les pages Web. Par exemple, remplissage d'un formulaire sur le site, inscription, autorisation, commentaires, etc. Dans tous ces cas, l'utilisateur remplit des zones spéciales (champs de formulaire) sur la page, après quoi les données sont envoyées au serveur. Les formulaires sont utilisés pour créer des commentaires. Un formulaire est un fragment d'un document HTML destiné à la saisie de l'utilisateur.
La figure montre un formulaire d'inscription d'étudiant sur le site Web d'un établissement d'enseignement.
Un conteneur est utilisé pour créer le formulaire
avec l'attribut action, qui précise la page du serveur qui traitera les données envoyées par le formulaire.
La structure dans sa forme la plus simple :
éléments de formulaire...
Chaque formulaire doit également avoir un bouton de soumission pour soumettre les données après avoir rempli le formulaire.
Structure des boutons :
Ainsi, pour enregistrer presque tous les éléments du formulaire, la balise est utilisée avec l'attribut type. Pour créer un bouton qui réinitialise toutes les données des formulaires, la structure suivante est utilisée :
Pour créer un champ de texte, il existe un paramètre texte. Les paramètres suivants sont utilisés : name – nom du champ ; taille – pour le champ en symboles ; maxlength – le nombre maximum possible de caractères dans le champ ; valeur – informations affichées dans le formulaire par défaut
Exemple de saisie de formulaire avec deux champs de texte :
Entrez le nom :
Entrez le nom de famille :
Le résultat du formulaire est présenté dans la figure.
Si vous devez saisir une grande quantité d'informations dans un champ de texte, par exemple un commentaire, utilisez le formulaire de zone de texte, créé à l'aide d'une balise.
Au code ci-dessus ajoutons un champ de zone de texte :
Commentaire:
Le résultat du code travaillant avec la zone de texte est affiché dans la figure.
L'élément suivant des formulaires sont des listes qui vous permettent de faire un choix parmi l'ensemble de valeurs présenté. Les balises vous permettent de créer un formulaire de liste
Structure des entrées de liste :
Pour que l'élément soit mis en surbrillance au chargement de la page, il faut qu'il soit dans la balise
Une méthode de sélection similaire consiste à utiliser les éléments de formulaire de case à cocher et de bouton radio. La différence entre ces éléments est qu'une case à cocher vous permet de faire plusieurs sélections, tandis qu'un bouton radio n'autorise qu'une seule sélection.
Structure d'une case à cocher et d'une entrée de bouton radio :
texte
Bouton radio :
texte
Dans les éléments spécifiés dans la structure, l'attribut coché est utilisé par défaut pour mettre en surbrillance la case à cocher et le bouton radio. Un exemple d'utilisation d'une case à cocher, d'un bouton radio et d'un code HTML est présenté dans la figure.
Un autre élément du formulaire est un bouton, spécifié à l'aide de l'attribut de balise type. avec le bouton valeur :
Dans le code spécifié pour créer un bouton, il existe un paramètre onclick, qui spécifie généralement du code dans un langage de programmation pour effectuer une action particulière lorsque ce bouton est cliqué :
Pour afficher un message dans une fenêtre spéciale, utilisez la commande JavaScript – alert. Le résultat de l'exemple est présenté dans la figure.
Pour insérer une image dans un bouton, utilisez le code présenté dans l'exemple suivant :
Lors de l'inscription et de la connexion à des sites Web, un champ avec un test caché est utilisé, affiché sous forme d'étoiles. Voici l'élément du formulaire de mot de passe :
L'inscription sur le site est souvent divisée en plusieurs pages et chacune des suivantes doit contenir des informations de la précédente. Afin de masquer les informations transmises, l'élément de formulaire masqué est utilisé :
L'élément de formulaire masqué sera invisible dans la fenêtre du navigateur.
Pour télécharger des fichiers sur le serveur, les formulaires comportent un élément file. Un exemple de code pour télécharger des fichiers sur le serveur est présenté ci-dessous :
Ainsi, dans cette rubrique, nous avons examiné les éléments de formulaire permettant de créer diverses pages HTML qui, avec les gestionnaires de script sur un ordinateur ou un serveur, vous permettent de développer des applications Web à part entière.