Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Créer un site web avec Dreamweaver CC

Intégrer le formulaire

Testez gratuitement nos 1344 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Ajoutez le formulaire en conservant la même page HTML et le même document CSS. Vous pourriez utiliser un formulaire plus complexe mais, dans la plupart des cas, les formulaires ne demandent que le nom et l'adresse e-mail de l'utilisateur.
04:13

Transcription

En ce qui concerne le formulaire, il n'y a de grande complexité, on a eu une légende ici à l'intérieure de la balise de forme trois champs de types différents. Donc, ici, pour du texte, ici pour le password, ici pour l'email, un submit pour pouvoir envoyer, puis c'est un peu près tout. Ce qui nous intéresse, maintenant, c'est de voir comment on utilise ce formulaire au sein du document html. Donc, on va rester sur le même document main ici. on va passer par un anglet formulaire. et on va pouvoir intégrer une balise formulaire. On pouvait intégrer une balise globale légende dans laquelle on marquerait abonnez-vous etc.. Et donc, vous voyez ici on aurait un fieldset, et un légende, donc on va pouvoir récupérer cette légende là, et puis faire la même astuce que ce colonne à faire pour les titre précédents c'est à dire utiliser un span pour pouvoir styler de manière différente la partie intérieure. Ensuite, on va pouvoir faire un input * 3 ici en plaçant chacun à un style différent on a même pu faire input * 4, avec le submit directement ici, on va pouvoir changer le second password. Le troisième, on peut le laisser en text ou un email, on va voir, et le dernier et on peut le placer en champ de type mail on va gruger une place pour chacun de place holder. Donc, on pourra dire que le premier, il aura place holder, pour dire vos login alors soit de vous passer directement dans la partie du code comme je suis entrain de le faire soit de vous venez dans l'inspecteur de propriétés ici, et vous vous allez pouvoir taper votre mot de passe, qui va remplir exactement la même fonctionnalité, en bas placer encore une fois, pour l'email, un place holder ici, par contre pour la partie de submit, à ce moment là, inscrivez-vous on va le placer directement dans la partie de la value, c'est à dire c'est la valeur de l'élément qui doit être placer. donc, je vais basculer ici sur cette partie là, pour voir que pour l'instant on a aucune mise en forme, donc sur cette place maintenant sur le CSS, on va pouvoir rajouter tous nos éléments, donc déjà une largeur de 50% avec un float: left pour être sûr que ça passe sur la partie gauche, mais on va pouvoir également son padding ici, avec un espacement au niveau de l'écriture, on a justement le légende qui va pouvoir s'écrire en deux lignes grâce à la même astuce que tout à l'heure, avec un span font-size et un display: block qui permet de différer ces éléments. On peut mettre un arrière plan globale à tous ces éléments là en lui demandant d'utiliser le ERSLGHT pour pouvoir écrire le texte. Et ce qu'on va faire, c'est on va typer le input de type submit, de manière différente, pour qu'il ait un text-align à gauche tout simplement, pour pouvoir se formater de manière distinct. On a placer ici sur la partie, si on regarde bien forme un float: left ici, qu'on peut supprimer et ce qu'on peut faire c'est récupérer le margin et float: left ici, placés sur main articles, et puis dire de main tous les premières enfants, quel qu'il soit articles et forme. On va pouvoir par exemple, leur dire qu'il fasse un float: left et un margin: 0 directement ce qui permettra d'avoir plus de souplesse d'écriture pour ces blocs là, cela ne changera rien du côté de forme, et cela sera comme même plus simple à maintenir pour la suite. On a terminer sur cette étape. Dernier petit détail, c'est de venir sur la partie formulaire ici n'hésitez pas à la sélectionner à l'intérieur de sélecteur de balise, et puis de venir placer votre action, qui sera égale au mois d'inscription php, ou d'un email, peu importe, de façon de pouvoir remplir l'intégralité du formulaire ici Donc, l'encodage par défaut ça sera généralement url encoded, puisqu'on n'a pas de data binaire qui vont être transformés, et la méthode on pourrait utilisé Post, pour avoir une meilleure sécurité. L'action ici, vous pointerait vers le dossier qui va bien, et puis les caractères utilisés on va dire UTF-8, à vous de voir si vous voulez placer une validation. Voilà le formulaire est en place, et on n'a plus qu'à publier notre page main à ce niveau là. Il nous reste le footer, et ensuite, on aura terminé pour la première partie d'approche de la page.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !