La première zone de bloc est encapsulée dans une balise de section afin que nous puissions flotter la mise en page côte à côte. La colonne de gauche contient toutes les entrées suivantes: texte, courrier électronique, URL et numéro de téléphone. Lorsque vous naviguez sur votre téléphone, l’écran du clavier mobile doit s’adapter en fonction du type de saisie. Il existe de nombreuses bonnes raisons de prendre en charge ces fonctionnalités pour les mobiles, car tout le monde travaille en déplacement ces jours-ci..
L'élément textarea peut également avoir un texte fictif défini sur pageload. Cela ressemble à une étiquette qui disparaît une fois que l'utilisateur a saisi du texte dans le champ. L'attribut qui n'est pas reporté est autocomplete parce que textareas ne remplit généralement pas le contenu associé.
Commandes de la barre latérale Je voulais créer ce formulaire afin qu'il réponde correctement au redimensionnement des affichages de fenêtres. Lorsque la fenêtre est suffisamment pleine, les deux colonnes en entrée flottent les unes à côté des autres. Mais si la largeur est légèrement réduite, la barre latérale droite passe en dessous du contenu principal..
Voici mon code HTML pour la zone de la barre latérale:
Bénéficiaire: Personnel du site Éditeur en chef Département technique Relations publiques Support général En réalité, ce code n’a rien de trop déroutant. Juste une simple option, sélectionnez le menu et quelques boutons radio. De plus, après ces objets, j’ai placé un bouton de réinitialisation et de soumission vers la fin de la section..
Tout cela a l'air bien et bien, passons maintenant à certaines propriétés CSS. Il y a tellement de personnalisations que vous pouvez appliquer lorsque vous travaillez sur des éléments de formulaire. Essayez de ne pas vous perdre avec trop de réflexion et amusez-vous!
Ombres de boîte animées Vous remarquerez en lisant chacun des éléments d’entrée principaux que j’ai animé une ombre extérieure colorée. Google Chrome a une propriété de contour qui fait quelque chose de similaire, mais pas aussi extravagant. Cette petite partie de l'interface séduit les visiteurs pour la première fois.
/ ** les éléments de formulaire ** / # hongkiat-form box-sizing: border-box; # hongkiat-form .txtinput display: block; famille de fontes: "Helvetica Neue", Arial, sans-serif; style de bordure: solide; largeur de la bordure: 1px; border-color: #dedede; marge inférieure: 20 px; taille de police: 1.55em; rembourrage: 11px 25px; padding-left: 55px; largeur: 90%; couleur: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) en médaillon; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) encarté; transition: bord à 0,15s 0 linéaire, case-ombre 0,15s à linéaire, couleur 0,15s à 0 linéaire; -webkit-transition: bordure 0,15s 0 linéaires, boîte-ombre 0,15s 0 linéaires, couleur 0,15s 0 linéaires; -moz-transition: bordure 0,15 linéaire 0s, boîte-ombre 0,15 linéaire linéaire, couleur 0,15 linéaire linéaire; -o-transition: bordure 0,15 linéaire 0s, boîte-ombre 0,15 linéaire linéaire, couleur 0,15 linéaire linéaire; # hongkiat-form .txtinput: focus color: # 333; couleur de bordure: rgba (41, 92, 161, 0,4); encadré: 0 1px 3px rgba (0, 0, 0, 0,1) en médaillon, 0 0 8px rgba (41, 92, 161, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) en médaillon, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) en médaillon, 0 0 8px rgba (41, 92, 161, 0,6); contour: 0 aucun; Afin de cibler chaque élément de texte, j'ai utilisé la classe .txtinput. Chacune des propriétés de la transition fonctionne sur la bordure, la zone d'ombre et la couleur. j'utilise taille de la boîte: boîte-frontière; sur le conteneur de formulaire afin que le rembourrage ne gâche pas notre conception réactive.
J'ai dû copier sur ces mêmes styles et les éditer légèrement pour la zone de texte. J'ai modifié une partie du remplissage et des marges et ajouté une icône d'arrière-plan unique..
# hongkiat-form textarea display: block; famille de fontes: "Helvetica Neue", Arial, sans-serif; style de bordure: solide; largeur de la bordure: 1px; border-color: #dedede; marge inférieure: 15 px; taille de police: 1.5em; rembourrage: 11px 25px; padding-left: 55px; largeur: 90%; hauteur: 180px; couleur: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) en médaillon; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) encarté; transition: bord à 0,15s 0 linéaire, case-ombre 0,15s à linéaire, couleur 0,15s à 0 linéaire; -webkit-transition: bordure 0,15s 0 linéaires, boîte-ombre 0,15s 0 linéaires, couleur 0,15s 0 linéaires; -moz-transition: bordure 0,15 linéaire 0s, boîte-ombre 0,15 linéaire linéaire, couleur 0,15 linéaire linéaire; -o-transition: bordure 0,15 linéaire 0s, boîte-ombre 0,15 linéaire linéaire, couleur 0,15 linéaire linéaire; # hongkiat-form textarea: focus color: # 333; couleur de bordure: rgba (41, 92, 161, 0,4); encadré: 0 1px 3px rgba (0, 0, 0, 0,1) en médaillon, 0 0 8px rgba (40, 90, 160, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) en médaillon, 0 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) en médaillon, 0 0 8px rgba (40, 90, 160, 0,6); contour: 0 aucun; # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat; Entrées de la barre latérale Les boutons radio et les éléments de menu sélectionnés ont un style beaucoup plus simple. Vous pouvez appliquer des effets de rayonnement externes et des ombres portées similaires sur ces éléments, mais cela n’a pas toujours fière allure. Sinon, les concepteurs créeront des interfaces utilisateur personnalisées et les attacheront en tant qu'images d'arrière-plan. Mais cela peut nécessiter une solution de contournement jQuery pour que les options s'affichent correctement..
span.radiobadge display: block; marge inférieure: 8px; span.radiobadge label taille de la police: 1.2em; rembourrage en bas: 4px; select.selmenu font-size: 17px; couleur: # 676767; rembourrage: 9px! important; bordure: 1px solide #aaa; largeur: 200px; Je n'ai pas beaucoup fait pour les écarter des principaux éléments d'entrée. De nombreux rembourrages supplémentaires sont importants pour que vos utilisateurs se sentent à l'aise d'interagir avec le formulaire. Lorsque le texte est trop petit, il peut être difficile de remplir chaque partie. Gardez votre police grande, mais pas si grande qu'elle submerge la page.
Boutons personnalisés Les boutons de réinitialisation et d'envoi sont conçus dans une classe à part. J'ai construit un ensemble de gradients de lumière qui correspond bien aux reflets bleus de nos champs de formulaire..
Ci-dessous mon code CSS pour le bouton d'envoi en état standard et stationnaire.
#buttons #submitbtn display: block; float: gauche; hauteur: 3em; rembourrage: 0 1em; bordure: 1px solide; contour: 0; poids de police: gras; taille de police: 1.3em; couleur: #fff; ombre du texte: 0px 1px 0px # 222; espace blanc: maintenant; habillage des mots: normal; alignement vertical: milieu; curseur: pointeur; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-color: # 5e890a # 5e890a # 000; -moz-box-shadow: encart 0 1px 0 rgba (256,256,256, 0,35); -ms-box-shadow: encart 0 1 px 0 rgba (256,256,256, 0,35); -webkit-box-shadow: encadré 0 1px 0 rgba (256,256,256, 0,35); box-shadow: encart 0 1 px 0 rgba (256,256,256, 0,35); couleur de fond: rgb (226,238,175); image d'arrière-plan: -moz-linéaire-gradient (en haut, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144 176,38) 100%); background-image: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, arrêt de couleur (3%, rgb (226,238,175)), arrêt de couleur (3%, rgb (188,216,77)), arrêt de couleur (100 %, rgb (144, 176, 38)); background-image: -webkit-linear-gradient (haut, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144 176,38) 100%); image d'arrière-plan: -o-linéaire-gradient (en haut, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144 176,38) 100%); image d'arrière-plan: -ms-gradient-linéaire (en haut, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144 176,38) 100%); image d'arrière-plan: gradient linéaire (haut, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144 176,38) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: survolez, #buttons #submitbtn: actif border-color: # 7c9826 # 7c9826 # 000; couleur: #fff; -moz-box-shadow: encart 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: encart 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: encart 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); encadré: encadré 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); arrière-plan: rgb (228, 237, 189); arrière-plan: gradient -moz-linéaire (en haut, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); arrière-plan: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, arrêt de couleur (2%, rgb (228,237,189)), arrêt de couleur (3%, rgb (207,219,120)), arrêt de couleur (100%, rgb 149,175,54))); arrière-plan: -webkit-linear-gradient (en haut, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); arrière-plan: -o-gradient linéaire (en haut, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); arrière-plan: -ms-gradient-linéaire (sommet, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); arrière-plan: gradient linéaire (haut, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Il est presque impossible de garder ce type de sélecteur propre! Il y a tout simplement trop de propriétés que vous devez répertorier et prendre en charge pour la plupart des anciens navigateurs. Internet Explorer peut même rendre ces dégradés avec le filtre approprié. Remarquez à part les dégradés de fond que j'ai également inclus une nouvelle couleur de bordure, des coins arrondis et une ombre sur le survol.
Le bouton de réinitialisation est similaire, mais la palette de couleurs utilisée a été complètement différente. Le gris clair a tendance à tomber à l'arrière-plan par rapport aux couleurs vert vif. Notre bouton de réinitialisation ne sera probablement pas beaucoup utilisé, il n'a donc pas besoin de toute l'attention.
#buttons #resetbtn display: block; float: gauche; couleur: # 515151; text-shadow: -1px 1px 0px #fff; marge droite: 20px; hauteur: 3em; rembourrage: 0 1em; contour: 0; poids de police: gras; taille de police: 1.3em; espace blanc: maintenant; habillage des mots: normal; alignement vertical: milieu; curseur: pointeur; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; couleur d'arrière-plan: #fff; image d'arrière-plan: -moz-linear-gradient (haut, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222 222,222) 100%); background-image: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, arrêt de couleur (2%, rgb (255,255,255)), arrêt de couleur (2%, rgb (240,240,240)), arrêt de couleur (100%, rgb (222,222,222))); image d'arrière-plan: -webkit-linear-gradient (haut, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222 222,222) 100%); background-image: -o-linear-gradient (haut, rgb (255,255,255) 2%, rgb (240.240.240) 2%, rgb (222.222.222) 100%); image d'arrière-plan: -ms-linear-gradient (haut, rgb (255,255,255) 2%, rgb (240.240.240) 2%, rgb (222.222.222) 100%); image de fond: gradient linéaire (haut, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222 222,222) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); bordure: solide 1px # 969696; boîte-ombre: 0 1px 2px rgba (144, 144, 144, 0,4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); ombre du texte: 0 1px 1px rgba (255, 255, 255, 0.75); #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); couleur: # 818181; couleur d'arrière-plan: #fff; image d'arrière-plan: -moz-linear-gradient (haut, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -webkit-gradient (linéaire, haut gauche, bas gauche, arrêt de la couleur (2%, rgb (255,255,255)), arrêt de la couleur (2%, rgb (244,244,244)), arrêt de la couleur (100%, rgb (229,229,229))); background-image: -webkit-linear-gradient (haut, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); image de fond: -o-linéaire-gradient (haut, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); image d'arrière-plan: -ms-linear-gradient (haut, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); image d'arrière-plan: gradient linéaire (haut, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); couleur de bordure: #aeaeae; encadré: encadré 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Vous pouvez même supprimer le type de réinitialisation et utiliser ce jeu de couleurs blanc / gris comme bouton de soumission principal. J'ai utilisé plusieurs styles de dégradé et effets d'ombre portée, ainsi qu'une ombre de texte pour l'étiquette interne. Cela donne définitivement un sentiment différent à l'expérience utilisateur.
Changements de disposition réactifs Dans mon autre fichier CSS, nous pouvons jeter un coup d’œil aux simples requêtes multimédia réactives que j’ai configurées. Toute fenêtre de navigateur supérieure à 800 pixels connaîtra l’interface complète de la barre latérale. Au-dessous de ce seuil, la colonne de gauche s'étend à 100% de la largeur et vous voyez les éléments de la barre latérale descendre en dessous..
Écran @média et (largeur maximale: 800px) body padding: 10px 15px; #container width: 100%; # hongkiat-form #aligned width: 100%; float: aucun; bloc de visualisation; # hongkiat-form #aside width: 100%; bloc de visualisation; float: aucun; # hongkiat-form .txtinput, # hongkiat-form textarea width: 85%; #prioritycase float: left; bloc de visualisation; #recipientcase float: left; bloc de visualisation; marge droite: 55px; En nous rapprochant de la taille, j'essaie d'adapter chacun des formulaires de saisie. La propriété width peut être plus longue que la page Web elle-même et nous avons ensuite des formulaires de saisie qui sortent du bord. Cela se produit autour de 550px qui est où je brise la requête suivante, avec les deux résolutions d'affichage d'écran iPhone pour portrait et paysage.
/ * Dépose d'écran plus petit ******* / Écran @média uniquement et (largeur maximale: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea width: 80%; / * iPhone Landscape ******** / @media uniquement écran et (largeur maximale: 480px) body padding: 10px 0px; select.selmenu width: 190px; / * Portrait iPhone ******* / @Media uniquement écran et (largeur maximale: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea width: 70%; # hongkiat-form #aligned débordement: caché; select.selmenu width: 160px; #recipientcase margin-right: 30px; Le mode paysage horizontal maintient toujours très bien tout. Le menu déroulant choisi a été un peu plus fin pour laisser la place aux boutons radio. En mode Portrait, j'ai redimensionné tous les éléments à des largeurs beaucoup plus petites. Maintenant, notre code ne va pas casser même dans les fenêtres de navigateur redimensionnées. Mais c'est bien d'avoir un support pour les smartphones iOS / Android.
Démo Télécharger le code source Conclusion J'espère que ce tutoriel a été instructif pour expliquer à quel point il est possible de faire beaucoup avec vos formulaires Web. Les nouvelles propriétés CSS3 sont suffisamment puissantes pour créer des animations entièrement fonctionnelles avec seulement quelques lignes de code. C'est vraiment une période passionnante pour travailler dans le développement Web et suivre ces tendances..
Si vous avez des idées ou des suggestions sur le code du didacticiel, n'hésitez pas à les partager avec nous via la boîte de commentaires ci-dessous..
