Construction Formulaires - Apprenez à code HTML - CSS

Leçon 1 Construire votre première page Web
Leçon 2 Prise en main HTML
Leçon 3 Apprendre à connaître CSS Nouveau
Leçon 4 Ouverture du modèle de boîte
Leçon 5 Positionnement nouveau contenu
Leçon 6 Travailler avec Typographie
Leçon 7 Fonds de réglage - Dégradés
Leçon 8 Création des listes
Leçon 9 Ajout d'un média
Leçon 10 Création de formulaires
Leçon 11 Organisation des données avec les tableaux
Leçon 12 Rédaction de votre meilleur code

Apprenez à code HTML - CSS est écrit par le concepteur - développeur front-end Shay Howe.

Commander Apprenez à code HTML avancé - CSS pour un regard plus profond sur la conception front-end - développement.

Vous voulez en savoir plus HTML - CSS, ou étudier d'autres sujets? Trouver la bonne pour vous.

Dans cette leçon 10

Un formulaire Initialisation

Pour ajouter une forme à une page, nous allons utiliser la

élément. le élément identifie où les éléments de contrôle de la page apparaît. De plus, la élément va envelopper tous les éléments inclus dans la forme, comme un

élément.

Une poignée de différents attributs peut être appliqué à la élément, dont les plus courantes sont de l'action et de la méthode. L'attribut action contient l'URL à laquelle les informations incluses dans le formulaire sera envoyé pour le traitement par le serveur. L'attribut méthode est la méthode des navigateurs HTTP doivent utiliser pour soumettre les données de formulaire. Ces deux attributs se rapportent à la présentation et le traitement des données.

Les champs de texte - Textareas

Les champs de texte

En plus de définir un attribut de type, il est préférable de donner une pratique élément d'un nom d'attribut aussi bien. La valeur d'attribut de nom est utilisé comme nom de la commande et est soumis en même temps que les données d'entrée vers le serveur.

Texte Les champs Demo

le élément est autonome, ce qui signifie qu'il utilise une seule étiquette et ne pas envelopper tout autre contenu. La valeur de l'élément est assurée par ses attributs et leurs valeurs correspondantes.

A l'origine, les deux seules valeurs d'attribut de type à base de texte étaient le texte et le mot de passe (pour les entrées de mot de passe); Cependant, HTML5 a le long d'une poignée de nouvelles valeurs d'attribut de type.

Ces valeurs ont été ajoutées pour fournir plus clairement la signification sémantique pour les entrées ainsi que de fournir de meilleurs contrôles pour les utilisateurs. Devrait revenir à la valeur d'attribut de texte d'un navigateur comprend pas l'une de ces valeurs d'attribut de type HTML5, il tombe automatiquement. Voici une liste des nouveaux types d'entrée HTML5.

pour un contrôle iOS 7 élément avec une valeur d'attribut de type de la date

pour un contrôle iOS 7 élément avec une valeur d'attribut de type de temps

pour un contrôle iOS 7 élément avec une valeur d'attribut de type de courriel

pour un contrôle iOS 7 élément avec une valeur d'attribut de type d'URL

pour un contrôle iOS 7 élément avec une valeur d'attribut de type de numéro

pour un contrôle iOS 7 élément avec une valeur d'attribut de type de tel

Un autre élément qui est utilisé pour capturer des données à base de texte est le élément. le <textarea> élément diffère de la <input> élément en ce sens qu'il peut accepter de plus grands passages de texte couvrant plusieurs lignes. le <textarea> élément a également balises de début et de fin qui peut envelopper le texte brut. Parce que le <textarea> élément accepte un seul type de valeur, l'attribut type ne s'applique pas, mais l'attribut name est toujours utilisé.</p> <h4>Démo Textarea</h4> <p>le <textarea> élément a deux attributs de tailles: cols de largeur en termes de largeur de caractère moyenne et rangées en hauteur en termes de nombre de lignes de texte visibles. La taille d'un textarea, cependant, est plus communément identifiée en utilisant les propriétés de largeur et de hauteur à l'intérieur CSS.</p> <h2>Entrées multiples Choix - Menus</h2> <p>En dehors des contrôles d'entrée à base de texte, HTML permet également aux utilisateurs de sélectionner les données à l'aide de choix multiples et des listes déroulantes. Il y a quelques options différentes et des éléments de ces contrôles de formulaire, dont chacun a des avantages distinctifs.</p> <h3>Boutons radio</h3> <p>Les boutons radio sont un moyen facile pour permettre aux utilisateurs de faire un choix rapide d'une petite liste d'options. Les boutons radio permettent aux utilisateurs de sélectionner une seule option, par opposition à de multiples options.</p> <p>Pour créer un bouton radio, la <input> élément est utilisé avec une valeur d'attribut de type de radio. Chaque élément de bouton radio doit avoir la même valeur d'attribut de nom afin que tous les boutons d'un groupe correspondent les uns aux autres.</p> <p>Avec des entrées à base de texte, la valeur d'une entrée est déterminée par ce que un utilisateur tape; avec des boutons radio d'un utilisateur effectue une sélection de choix multiples. Ainsi, nous devons définir la valeur d'entrée. En utilisant l'attribut de valeur, nous pouvons définir une valeur spécifique pour chaque <input> élément.</p> <p>De plus, pour présélectionner un bouton radio pour les utilisateurs que nous pouvons utiliser l'attribut booléen cochée.</p> <h2>Boutons de formulaire</h2> <p>Après un utilisateur entre les informations demandées, les boutons permettent à l'utilisateur de mettre cette information en action. Le plus souvent, une entrée soumettre ou de soumettre le bouton est utilisé pour traiter les données.</p> <h3>soumettre entrée</h3> <p>Les utilisateurs cliquent sur le bouton Soumettre pour traiter les données après avoir rempli un formulaire. Ce bouton est créé à l'aide de la <input> élément avec un attribut de type valeur de présenter. L'attribut de valeur est utilisée pour spécifier le texte qui apparaît dans le bouton.</p> <h2>autres entrées</h2> <p>Outre les applications que nous venons de parler, la <input> élément a quelques autres cas d'utilisation. Ceux-ci comprennent des données cachées et le passage de joindre des fichiers au cours du traitement de la forme.</p> <h3>entrée cachée</h3> <p>entrées cachées fournissent un moyen de transmettre des données au serveur sans l'afficher aux utilisateurs. entrées cachées sont généralement utilisés pour des codes de suivi, des clés ou d'autres informations qui ne sont pas pertinentes pour l'utilisateur, mais est utile lors du traitement de la forme. Ces informations ne sont pas affichées sur la page; cependant, il peut être trouvé en regardant le code source d'une page. Il ne devrait donc pas être utilisé pour des informations sensibles ou sécurisé.</p> <p>Pour créer une entrée cachée, vous utilisez la valeur cachée pour l'attribut type. En outre, inclure les valeurs nom d'attribut et la valeur appropriés.</p><h3>Entrée du fichier</h3> <p>Pour permettre aux utilisateurs d'ajouter un fichier à une forme, un peu comme attacher un fichier à un e-mail, utilisez la valeur de fichier pour l'attribut type.</p> <h4>Démo d'entrée du fichier</h4> <h2>Formulaire organisation Éléments</h2> <p>Savoir saisir les données avec des entrées est la moitié de la bataille. L'organisation des éléments de forme et de contrôles de manière utilisable est l'autre moitié. Lors de l'interaction avec les formes, les utilisateurs ont besoin de comprendre ce qui est demandé d'eux et comment fournir les informations demandées.</p> <p>En utilisant des étiquettes, fieldsets et légendes, nous pouvons mieux organiser les formes et les utilisateurs à les compléter correctement.</p> <p>Les étiquettes fournissent des légendes ou des rubriques pour les contrôles de formulaire, en les attachant ensemble sans ambiguïté et la création d'une forme accessible pour tous les utilisateurs et les technologies d'assistance. Créé à l'aide du <label> élément, les étiquettes doivent inclure du texte qui décrit les entrées ou les contrôles qu'ils se rapportent à.</p> <h3>placeholder</h3> <p>L'attribut d'espace réservé HTML5 fournit une pointe ou pointe dans le contrôle sous forme d'un <input> ou <textarea> élément qui disparaît une fois se concentrer clic sur le contrôle ou les gains. Il est utilisé pour donner aux utilisateurs plus d'informations sur la façon dont l'entrée formulaire doit être rempli, par exemple, le format d'adresse e-mail à utiliser.</p> <h4>Demo placeholder</h4> <p>La principale différence entre les attributs de l'espace réservé et la valeur est que le texte de la valeur de l'attribut value reste en place quand un contrôle a le focus à moins qu'un utilisateur supprime manuellement. C'est idéal pour les données pré-renseigner, telles que les informations personnelles, pour un utilisateur, mais pas pour des suggestions.</p> <p>L'attribut booléen HTML5 requis impose qu'un contrôle d'élément ou forme doit contenir une valeur après avoir été soumis au serveur. un contrôle de l'élément ou la forme ne doit pas avoir une valeur, un message d'erreur sera affiché demandant que l'utilisateur remplissez le champ requis. À l'heure actuelle, les styles de message d'erreur sont contrôlés par le navigateur et ne peuvent pas être coiffés avec CSS. éléments non valides et contrôles de formulaire, d'autre part, peuvent être décorés à l'aide des options: et: pseudo-classes CSS nécessaires.</p> <p>La validation se produit également spécifique au type d'un contrôle. un exemple, <input> élément avec une valeur d'attribut de type de courrier électronique, il faudra non seulement qu'une valeur existe dans le contrôle, mais aussi qu'il est une adresse e-mail valide.</p> <h4>Démo requise</h4> <h3>Attributs supplémentaires</h3> <p>D'autres attributs de contrôle de la forme et la forme comprennent, mais sans s'y limiter, ce qui suit. S'il vous plaît ne hésitez pas à la recherche de ces attributs au besoin.</p> <h2>Exemple formulaire d'identification</h2> <p>Voici un exemple d'un formulaire de connexion complet qui comprend plusieurs éléments différents et les attributs pour illustrer ce que nous avons couvert jusqu'à présent. Ces éléments sont ensuite décorés à l'aide CSS.</p> <h4>Démo requise</h4> <h2>En pratique</h2> <p>Sauter dans notre fichier register.html, nous allons commencer en suivant le même schéma de mise en page que nous avons utilisé sur nos haut-parleurs et des pages de site. Cela inclut l'ajout d'un <section> élément avec une valeur d'attribut de classe de la ligne juste en dessous de la section d'amenée de l'enregistrement et une imbrication <div> élément avec une valeur d'attribut de classe de grille directement à l'intérieur du <section> élément.</p> <p>Notre code juste au-dessous de la section de lead-in pour la page d'enregistrement devrait ressembler à ceci:</p> <p>Comme un rappel, la valeur d'attribut de classe de la ligne ajoute un fond blanc et offre une certaine rembourrage verticale. tandis que la valeur d'attribut de classe de centres GRID notre contenu au milieu de la page et fournit un certain remplissage horizontal.</p> <p>À l'intérieur de <div> élément avec une valeur d'attribut de classe de la grille, nous allons créer deux colonnes, l'une couvrant les deux tiers de la largeur de la page et un couvre un tiers de la largeur de la page. La colonne des deux tiers sera <section> élément sur le côté gauche qui indique aux utilisateurs pourquoi ils devraient vous inscrire à notre conférence. La colonne d'un tiers, alors, sera <form> élément sur le côté droit fournissant aux utilisateurs un moyen de vous inscrire à notre conférence.</p> <p>Dans l'ensemble, notre code devrait ressembler à ceci:</p> <p>Maintenant, dans notre deux tiers colonne ajoutons quelques détails au sujet de notre événement et pourquoi il est une bonne idée pour les concepteurs et les développeurs en herbe frontaux à y participer. Nous le ferons en utilisant une poignée de différents niveaux de cap (ainsi que leurs styles préétablis), un paragraphe, et une liste non ordonnée.</p> <p>Dans notre <section> élément avec une valeur d'attribut de classe de col-2-3. le code devrait ressembler à ceci:</p> <p>Pour ce faire, nous allons ajouter une valeur d'attribut de classe pourquoi-assister à la liste non ordonnée.</p> <p>La nouvelle section au bas de notre fichier main.css devrait ressembler à ceci:</p> <p>Le code pour notre <form> élément devrait ressembler à ceci:</p> <p>Ensuite, à l'intérieur du <form> élément que nous allons ajouter une <fieldset> élément. À l'intérieur de <fieldset> élément que nous allons ajouter une série de <label> des éléments qui enveloppent un contrôle de formulaire donné.</p> <p>Avec un mélange de différents types d'entrée, sélectionnez les menus, textareas et attributs, le code de notre formulaire devrait ressembler à ce qui suit:</p> <p>Ici, nous pouvons voir chaque contrôle de formulaire imbriqué dans un <label> élément. Le contrôle de formulaire utilise un nom <input> élément avec une valeur d'attribut de type de texte. tandis que le contrôle de formulaire de messagerie utilise une <input> élément avec une valeur d'attribut de type de courrier électronique.</p> <p>Les deux commandes Nom et Email comprennent l'attribut booléen requis et un attribut d'espace réservé.</p> <p>La forme Nombre de contrôle utilise le Laissez-passer <select> élément et imbriqué <option> éléments. le <select> élément lui-même comprend l'attribut booléen nécessaire, et le premier <option> élément comprend l'attribut booléen sélectionné.</p> <p>Avec la forme en place, il est temps d'ajouter des styles à elle. Nous allons commencer par quelques styles par défaut sur le <form> élément lui-même et sur la <input>. <select>. et <textarea> éléments.</p> <p>Au sein de la section de registre de notre fichier main.css nous voulons ajouter les styles suivants:</p> <p>Par défaut, chaque navigateur a sa propre interprétation de la façon dont les styles pour les contrôles de formulaire doivent apparaître. Avec cela à l'esprit, nous avons répété les styles de police à base de notre <body> élément pour assurer que nos styles restent cohérents.</p> <p>Une fois que la valeur de l'attribut class-groupe de registres est en place, nous allons ajouter quelques styles aux éléments imbriqués dans le <fieldset> élément. Ces styles apparaissent dans notre fichier main.css, sous les styles de formulaire existants.</p> <p>Jusqu'à présent, si bien: notre formulaire se rassemble tout à fait bien. Le seul élément restant encore style est le bouton d'envoi. Comme il est un bouton, nous avons fait des styles existants, nous pouvons appliquer ici. Si nous pensons à notre page d'accueil, notre section de héros contenait un bouton qui a reçu des styles par le biais de la valeur d'attribut de classe BTN.</p> <p>Ajoutons cette valeur d'attribut de classe, BTN. avec une nouvelle valeur d'attribut de classe de BTN par défaut à notre bouton soumettre. Plus précisément, nous allons utiliser le nom de la classe de BTN par défaut puisque ce bouton apparaît sur un fond blanc et sera le style par défaut pour les boutons aller de l'avant.</p> <p>Maintenant, notre bouton d'envoi a des styles partagés avec le bouton sur la page d'accueil. Nous allons utiliser la valeur d'attribut de classe BTN par défaut pour appliquer ensuite de nouveaux styles à notre bouton soumettre spécifiquement.</p> <p>Pour en revenir à la section des boutons de notre fichier main.css, ajoutons les éléments suivants:</p> <p>Ces nouveaux styles, qui définissent la taille et le fond de notre bouton d'envoi, sont ensuite combinés avec les styles de classe BTN existants pour créer la présentation finale de notre bouton Envoyer.</p> <p>Notre page d'inscription est terminée, et les participants peuvent maintenant commencer à réserver leurs billets.</p> <p>Notre page d'inscription, qui comprend un formulaire</p> <h3>Démo - Source Code</h3> <p>Pour résumer rapidement, dans cette leçon, nous avons discuté de ce qui suit:</p> <ul> <li>Comment initialiser une forme</li> <li>Les moyens d'obtenir des informations à base de texte des utilisateurs</li> <li>Différents éléments et méthodes pour créer des options de choix multiples et des menus</li> <li>Quels sont les éléments et attributs sont mieux utilisés pour présenter les données d'un formulaire pour le traitement</li> <li>La meilleure façon d'organiser et structurer les formes de contrôle de forme et de sens</li> <li>Une poignée d'attributs qui aident à recueillir des données plus qualifiés</li> </ul> <p>Notre compréhension du langage HTML et CSS se déroule assez bien, et nous avons un seul composant plus à apprendre: tables. Dans le chapitre suivant, nous allons jeter un oeil à la façon d'organiser et présenter des données avec des tables.</p> <h2>Ressources - Liens</h2> <h2>En savoir plus HTML - CSS ou d'étude Autres sujets</h2> <p>Choisissez votre sujet d'intérêt ci-dessous et je recommanderai un cours que je crois fournira la meilleure occasion d'apprentissage pour vous.</p> <h3>Choisissez votre sujet d'intérêt:</h3> <h3>Vos recommandations du cours:</h3> <p>Sélectionnez une rubrique ci-dessus pour afficher vos recommandations de cours.</p> <p>En fonction de votre intérêt pour les affaires - Opérations Je recommande de vérifier les cours Treehouse suivants:</p> <h2>Apprenez à code HTML - CSS du Livre</h2> <p><div style="text-align:center;"><img src="http://images-on-off.com/images/e1/buildingformslearntocodehtmlcss-1216cab4.png" title="Construction Formulaires - Apprenez à code HTML - CSS (en savoir)" alt="Construction Formulaires - Apprenez à code HTML - CSS" /></div></p> <p>Acheter Apprenez à code HTML - CSS</p> <h3>Vous recherchez Advanced HTML - CSS leçons?</h3> <p><div style="text-align:center;"><img src="http://images-on-off.com/images/e1/buildingformslearntocodehtmlcss-a5e36582.jpg" title="La conception de formulaires - Apprenez à code HTML - CSS (html)" alt="Construction Formulaires - Apprenez à code HTML - CSS" /></div></p> <p>Checkout ces leçons HTML et CSS avancées pour un regard plus profond sur la conception et le développement front-end, parfait pour tout développeur de concepteur ou front-end qui cherchent à compléter leurs compétences.</p> <h3>Joignez-vous à la lettre d'information</h3> <p>Pour rester à jour et apprendre quand de nouveaux cours et les leçons sont affichés, s'il vous plaît vous inscrire à la Newsletter gratuite-spam.</p> <h4>Articles Liés</h4> <ul> <li> <p><a href="/articles/creation-de-listes-apprenez-a-code-html-css.php">Création de listes - Apprenez à code HTML - CSS</a></p> </li> <li> <p><a href="/articles/creation-de-votre-premiere-page-web-apprenez-a.php">Création de votre première page Web - Apprenez à code HTML - CSS</a></p> </li> <li> <p><a href="/articles/responsive-web-design-apprendre-a-code-html-avance.php">Responsive Web Design - Apprendre à code HTML avancé - CSS</a></p> </li> </ul> </div> <div class="extra"> <div class="info"><a href="/articles/combien-de-temps-vos-employes-dechets-au-travail.php">Précédent</a> ◈ <a href="/articles/installation-des-marqueurs-de-position-mop-blog.php">Suivant</a></div> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> <div class="box"> <div class="content"> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> </div> </div> </div> </div> </div> </div> <div class="copyright"> <p>© Copyright 2016 - 2025</p> <script type="text/javascript"> document.write("<a href='//www.liveinternet.ru/click' "+ "target=_blank><img src='//counter.yadro.ru/hit?t50.6;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='LiveInternet' "+ "border='0' width='31' height='31'><\/a>") </script> </div> </footer></div> </body> </html>