5 formulaires Web XHTML simples pour la production de pages Web Design_HTML/Xhtml_Web

Formulaire Web XHTML simple dans Web Design 5.                   ​ Technique 1 : Sandwich aux étiquettes Incluez la zone de saisie, la zone de sélection et la zone de texte dans les éléments d'étiquette et définissez-les toutes en tant qu'éléments de niveau bloc. Définissez le mode d'affichage du bouton radio et de la case à cocher sur Inline afin qu'ils apparaissent sur la même ligne. Si vous préférez l'étiquette
​                   ​ ​ ​ ​ Formulaire Web XHTML simple dans Web Design 5.                   ​ Technique 1 : Sandwich d'étiquette
Incluez toutes les zones de saisie, zones de sélection et zones de texte dans les éléments d'étiquette, et définissez-les toutes en tant qu'éléments de niveau bloc. Définissez le mode d’affichage du bouton radio et de la case à cocher sur en ligne afin qu’ils apparaissent sur la même ligne. Si vous préférez que l'étiquette et le bouton radio/boîte de sélection multiple apparaissent sur des lignes différentes, vous pouvez choisir de ne pas l'inclure dans l'étiquette ou d'utiliser des sauts de ligne définitifs.
Chaque scénario est illustré ci-dessous.

Bien que ceux-ci puissent sembler à la mode, le W3C a en fait implicitement montré ses exemples d'étiquettes.
Principaux avantages : Simple
Code :
étiquette, saisie, sélection, zone de texte {affichage : bloc ;} étiquette {marge inférieure : 10 px ;} input[type="radio"], input[type="checkbox"] {affichage : en ligne ;} Formulaire de contact <étiquette pour="nom"> Nom Email Choices (radio) — étiquette enveloppée Choix (case à cocher) — étiquette non enveloppée, réinitialisation de la marge Choix 1

Choix (case à cocher) — retourné à la ligne, saut de ligne dur Choix 1 <étiquette pour="liste déroulante"> Question Option 1 ;Option 3 <étiquette pour="message"> Message
Résultat d'exécution :
#expamle1 label,#expamle1 input,#expamle1 select,#expamle1 textarea {display: block;}
#expamle1 label {margin- bottom : 10px;}
#expamle1 input[type="radio"],#expamle1 input[type="checkbox"] {display: inline;}
Technologie 2 : personne paresseuse
De nombreux développeurs l'adoptent une méthode peu orthodoxe mais rapide et facile (balises séparées avec des nouvelles lignes) est utilisée. Cela fonctionne, mais cela est préjudiciable à vos capacités CSS car vous n'avez pas besoin de CSS pour l'implémenter.
Principaux avantages : Rapide
Code :
Formulaire de contact Nom Email <étiquette pour="Choix"> Choix (radio) Choix 1 Choix 2 Choix 3 <étiquette pour="Choix3"> Choix (case à cocher) Choix 1 Choix 2 Choix 3 Question Option 1 Option 2 Option 3 <étiquette pour="message">Message
运行结果：                                                #p#
                       网页设计之5中简单的XHTML网页表单.             技术3：语义先生
web 标准的信条之一就是考虑数据类型和与之对应的代码。既然表单是一个连续的问题列表，那么有序列表用在这里就非常贴切。
主要好处： 结构化
代码：
ol { style de liste : aucun ; remplissage à gauche : 0 ; } Formulaire de contact

1. Nom
2. Email
3. <étiquette pour="Choix"> Choix (radio) Choix 1 Choix 2 Choix 3
4. <étiquette pour="Choix3"> Choix (case à cocher) Choix 1 Choix 2 Choix 3
5. Question Option 1 Option 2 Option 3
6. Message

运行结果：
#example3 ol {
list-style : none;
padding-left : 0;
}
技术4：分而治之
Si vous utilisez un formulaire horizontal, quel formulaire est requis ? De nombreuses situations (clients) nécessiteront des formulaires horizontaux. Nous pouvons compter sur notre vieil ami p et diviser simplement le formulaire en colonnes. Nous pouvons facilement y parvenir en utilisant la méthode du sandwich d'étiquette.
Principaux avantages : Utilisation de l'espace
Code :
étiquette, saisie, sélection, zone de texte {affichage : bloc ;} étiquette {marge inférieure : 10 px ;} input[type="radio"], input[type="checkbox"] {affichage : en ligne ;} .form-colonne { largeur : 150 px ; hauteur : 250px ; remplissage à gauche : 20 px ; bordure gauche : 1px solide #ccc ; flotteur : gauche ; } Formulaire de contact

<étiquette pour="nom"> Nom <étiquette pour="email"> E-mail Choix (radio) Choix 3

Choix (radio) Choix (case à cocher) Choix 1 <étiquette pour="liste déroulante"> Question Option 1 ;Option 3

Résultat d'exécution :
Étiquette #Example4, entrée #Example4, sélection #Example4, zone de texte #Example4 {affichage : bloc;>
étiquette #Example4 {marge- bas : 10 px;🎜>#Example4 input[type="radio"], #Example4 input[type="checkbox"] {display : inline;}
#Example4 .form-column {
largeur : 150px;
hauteur : 250px;
padding-left : 20px;
border-left : 1px solid #ccc;
float : gauche;
>
Technologie 5 : comme un vieux savant Le paresseux
Si vous ne voulez pas jouer avec CSS, êtes pressé et n'envisagez pas de tester un navigateur, vous devriez trouver un nouvel emploi. Je plaisante, celui-ci est pour vous.

Principaux avantages : IntuitifCode :
Formulaire de contact Nom Email <étiquette pour="Choix"> Choix (radio) Choix 1 Choix 2 Choix 3 Choix (case à cocher) Choix 1 Choix 2 Choix 3 Question Option 1 Option 2 Option 3 Message ≪/tr>
运行结果：