Cliquez ici pour revenir à la colonne de tutoriel Wulin.com HTML.
Ci-dessus: Langue de balisage - Citations
Formulaire du chapitre 5 de la source d'origine
L'interaction a toujours été au centre d'Internet, permettant aux utilisateurs d'échanger des informations et de communiquer entre eux. Les formulaires nous permettent d'organiser et de collecter des informations auprès des utilisateurs de la même manière, donc lors de la conception d'un site Web, nous appartenons toujours à la catégorie qui peut être utilisée dans n'importe quelle situation. Par exemple, nous avons constaté qu'il existe environ 10 000 façons différentes de marquer les formulaires. Eh bien, peut-être pas beaucoup, mais nous pouvons toujours penser à plusieurs situations, ce qui facilite l'utilisation des structures de formulaires et facilite également la gestion par les propriétaires de sites Web. Méthodes pour marquer les formulaires A: utiliser des formulaires
<formulaire form = / path / to / script method = post>
<ballage>
<tr>
<h> Nom: </th>
<Td> <Type de saisie = nom de texte = name /> </ td>
</tr>
<tr>
<h> Email: </th>
<Td> <Type de saisie = nom de texte = e-mail /> </td>
</tr>
<tr>
<h> & nbsp; </th>
<td> <Type de saisie = soumettre Value = Soumide /> </td>
</tr>
</ table>
</ form>
Beaucoup de gens ont depuis longtemps des formes marquées avec des tables. En raison de la haute fréquence d'utilisation, nous nous sommes habitués à voir les formulaires taper de cette manière: la colonne de gauche est une description de texte alignée vers la droite, et la colonne droite est un élément de forme aligné gauche. L'utilisation d'un formulaire simple à deux listes est l'un des moyens simples de remplir la composition de formulaire facile à utiliser.
Certaines personnes pensent que la forme n'est pas nécessaire, et d'autres pensent que la forme doit être considérée comme un matériel de forme. Nous n'avons pas l'intention de prendre en charge l'une ou l'autre des déclarations, mais dans certains cas, la meilleure façon d'obtenir une disposition de formulaire spécifique lors de l'utilisation d'un formulaire, en particulier de formes complexes avec de nombreux éléments différents (formulaires qui utilisent des boîtes radio, des boîtes déroulantes, etc.). S'appuyer entièrement sur CSS pour gérer de telles formes peut être frustrant et nécessite souvent <span> et <v> supplémentaires pour consommer plus de balises que le tableau.
Ensuite, regardez la figure 5-1. Ceci est l'effet de la méthode d'affichage général du navigateur visuel a:
Figure 5-1: Effet de la méthode A affiché dans le navigateur
Vous constaterez que l'utilisation de tables peut organiser les éléments de texte d'une manière très soignée. Cependant, pour une forme aussi simple, je peux éviter d'utiliser des tables et utiliser d'autres méthodes qui ne nécessitent pas autant d'étiquettes. À moins que la conception visuelle du formulaire ne nécessite une telle composition, le formulaire peut ne pas être nécessaire. Dans le même temps, nous devons également envisager plusieurs facilité d'utilisation. Lors de l'étude des deux méthodes suivantes, nous entrerons en contact avec cette partie.
<formulaire form = / path / to / script method = post>
<p>
Nom: <entrée type = nom de texte = name /> <br />
Email: <entrée type = nom de texte = e-mail /> <br />
<Type d'entrée = soumettre Value = Soumider />
</p>
</ form>
L'utilisation d'un seul paragraphe et de quelques balises <br /> est un moyen possible de séparer tous les éléments, mais il peut être représenté visuellement un peu pressé. Figure 5-2 L'effet d'affichage de la onzième version du navigateur:
Figure 5-2: Effet de la méthode d'affichage du navigateur B
Bien que nous puissions compléter la mise en page sans utiliser de table, il a l'air un peu encombré et laid. Dans le même temps, nous avons également rencontré le problème que les éléments formés ne peuvent pas être parfaitement alignés.
Nous avons pu ajouter un correctif supplémentaire à l'élément <fort> avec CSS pour soulager le sentiment de surpeuplement. Comme ça:
saisir{
marge: 6px 0;
}
Le paragraphe précédent ajoute 6 pixels de correctifs supplémentaires aux parties supérieures et inférieures de chaque élément <prenue> (y compris le nom, la boîte d'entrée par e-mail et le bouton Soumettre), et ajoute un espace supplémentaire entre les éléments. Tout comme la figure 5-3:
Figure 5-3. Effet de la méthode B après avoir ajouté des correctifs supplémentaires à l'élément d'entrée
La méthode B elle-même n'a pas de gros problèmes, mais il peut également être affiné pour améliorer la forme. La méthode C utilise également ces techniques de réglage fin, alors jetons un coup d'œil.
<form action = / path / to / script id = thisform méthode = post>
<p> <étiquette pour = name> Nom: </ label> <br />
<input type = text id = name name = name /> </p>
<p> <étiquette pour = e-mail> Email: </bablow> <br />
<input type = text id = e-mail name = e-mail /> </p>
<p> <Type d'entrée = soumettre Value = Soumide /> </p>
</ form>
J'aime plusieurs choses sur la méthode C. Tout d'abord, pour une forme simple similaire à cet exemple, j'ai trouvé plus pratique de placer chaque élément de description et de forme dans un paragraphe distinct. Sans ajouter un affichage de style, la distance prédéfinie entre les paragraphes devrait être suffisante pour vous faire lire facilement le contenu. Plus tard, nous pouvons définir l'intervalle en utilisant CSS comme les balises <p> contenues dans le formulaire.
Nous sommes même allés plus loin et avons défini un ID unique = cette forme pour le formulaire. Par conséquent, l'intervalle exact que j'ai mentionné tout à l'heure peut être à peu près écrit comme ceci:
#Thisform p {
marge: 6px 0;
}
Cela signifie régler les correctifs supérieurs, inférieurs et extérieurs de la balise <p> sous cette forme à 6 pixels, couvrant les valeurs prédéfinies sélectionnées par le navigateur pour les paragraphes généraux.
Une autre différence entre la méthode C et les deux premières méthodes est que bien que chaque groupe (instruction et boîte d'entrée) soit placé dans <p>, nous les plaçons toujours dans une ligne indépendante. En utilisant <rr /> pour séparer chaque élément, nous pouvons contourner le problème des différentes longueurs de texte, ce qui entraîne l'incapacité d'aligner parfaitement les éléments d'entrée.
La figure 5-4 montre l'effet de la méthode d'affichage du navigateur général C, où les styles définis pour la balise <p> ont été utilisés.
Figure 5-4. Effet de la méthode d'affichage du navigateur C, en utilisant CSS pour la balise P
En plus de l'effet visuel de la méthode C, l'avantage le plus important est qu'il améliore la facilité d'utilisation.
L'utilisation de la balise <Que> pour améliorer la facilité d'utilisation du formulaire nécessite deux étapes et la méthode C a terminé ces deux étapes. Tout d'abord, utilisez <Babel> pour connecter la description du texte avec les éléments de formulaire pertinents, qu'il s'agisse de la zone d'entrée de texte (champ de texte), de la zone d'entrée de bloc de texte (zone de texte), de la zone de radio (radio), de la case à cocher (case à cocher), etc. Méthode C utilise la balise <label> sur le nom: et l'e-mail: titre, les connectations avec les éléments qui entrent les données.
La deuxième étape consiste à ajouter l'attribut FOR à la balise <baling> et à remplir l'ID de la zone d'entrée correspondante.
Par exemple, dans la méthode C, utilisez la balise <Babel> pour envelopper le nom: et remplissez l'attribut FOR avec la même valeur que l'ID de boîte d'entrée après.
<form action = / path / to / script id = thisform méthode = post>
<p> <étiquette pour = name> Nom: </ label> <br />
<input type = text id = name name = name /> </p>
<p> <étiquette pour = e-mail> Email: </bablow> <br />
<input type = text id = e-mail name = e-mail /> </p>
<p> <Type d'entrée = soumettre Value = Soumide /> </p>
</ form>
Peut-être que j'ai entendu d'autres dire que vous devriez ajouter la balise <Que> dans le formulaire. La question la plus importante est de savoir pourquoi vous devriez utiliser la balise <Babel>.
C'est une bonne chose d'établir des associations d'étiquette / ID qui permettent aux lecteurs d'écran de lire l'étiquette correcte pour chaque élément de formulaire sans l'influence de la disposition de la disposition. Dans le même temps, la balise <Babel> est créée pour marquer les étiquettes de barre de forme . Lorsque nous utilisons cette balise, nous expliquons la signification de chaque élément et renforce la structure de la forme.
Il y a un avantage supplémentaire à utiliser la balise <Que> lors du traitement des boîtes à choix unique et multi-chèques, c'est-à-dire que la plupart des navigateurs modifieront également la valeur de l'élément lorsque l'utilisateur clique sur le texte dans <Babed>. Cela peut créer une zone de clic plus grande pour l'élément d'entrée, ce qui facilite les utilisateurs de mobilité pour remplir les formulaires (marquer Pilgrim, plonger dans l'accessibilité , http://diveintoaccessibilité.org/day_28_labeling_form_elements.html).
Par exemple, si vous ajoutez une boîte multi-chèques au formulaire afin que l'utilisateur puisse choisir de noter ces informations, nous pouvons utiliser la balise <Que> comme ceci:
<form action = / path / to / script id = thisform méthode = post>
<p> <étiquette pour = name> Nom: </ label> <br />
<input type = text id = name name = name /> </p>
<p> <étiquette pour = e-mail> Email: </bablow> <br />
<input type = text id = e-mail name = e-mail /> </p>
<p> <Type d'entrée = CheckBox ID = Remember Name = Remember /> <étiquette pour = Rappelez-vous> Rappelez-vous ces informations? </bablow> </p><p> <Type d'entrée = soumettre Value = Soumide /> </p>
</ form>
En marquant les boîtes multi-chèques de cette manière, deux avantages peuvent être obtenus: le lecteur d'écran peut lire le texte explicatif correct (tout comme cet exemple, le texte peut apparaître après la boîte d'entrée), et la gamme de boîtes multi-chèques de commutation est devenue plus grande. Désormais, en plus des boîtes multi-chèques elles-mêmes, la partie texte est également incluse (la plupart des navigateurs le prennent en charge).
La figure 5-5 montre l'effet d'affichage de cette forme dans le navigateur. Nous indiquons spécifiquement la plage de commutation de la boîte à chèques multiples après l'élargissement:
Figure 5-5. Plusieurs boîtes de sélection qui incluent du texte dans la plage de commutation
En plus des formulaires et des paragraphes, je veux également montrer une autre façon de marquer le formulaire, en utilisant la liste de définition.
Page précédente 1 2 3 4 Page suivante Lire le texte intégral