Les formulaires avec Django

00:00:00 :Une fois qu'on a créé un formulaire comme ceci, donc qu'on a créé une classe qui hérite de la classe Form, on va pouvoir instancer ce formulaire et l'afficher à l'intérieur d'une vue. Donc dans
00:00:10 :mon projet ici, dans views.py, j'ai une vue signup à laquelle je peux accéder donc à cette adresse url donc a slash signup slash et pour l'instant j'ai juste créé un compte qui est affiché. Donc
00:00:21 :j'ai un fichier de template, le fichier signup.html et c'est ce fichier que je retourne dans ma vue.Ce qu'on va faire c'est qu'on va vouloir inclure notre formulaire ici après le tag h1. Donc on va
00:00:32 :déjà importer notre formulaire à l'intérieur de notre vue, donc on va dire from website.forms import signup form et on va créer une instance de ce formulaire à l'intérieur de cette vue. Donc on
00:00:44 :va créer une instance qui va être égale à signup form et pour l'instant on ne met rien à l'intérieur des parenthèses. Donc on fait juste une instance de notre formulaire, on la récupère dans cette
00:00:54 :variable form et on va la passer au contexte ici dans la fonction render. Donc je mets une virgule et je vais passer un dictionnaire avec la clé form qui va être égale à mon instance. Donc je vais
00:01:06 :pouvoir ensuite utiliser cette variable à l'intérieur du fichier html donc à l'intérieur de signup.html et pour ça il me suffit donc d'utiliser les doubles accolades pour afficher
00:01:16 :la variable donc comme n'importe quelle variable que l'on passe au contexte avec render ici. Donc j'affiche mon formulaire et vous allez voir que si j'actualise ici j'ai un formulaire effectivement qui s'affiche. Donc on a un formulaire mais on a quelque chose qui manque encore, par exemple on
00:01:31 :n'a pas de bouton submit donc vous allez avoir quelques petites choses à rajouter. Je vais vous montrer à quoi ressemble le code source de la page pour l'instant. Donc vous voyez qu'on a un label,
00:01:40 :on a ensuite les inputs donc on va avoir les différents inputs avec le type texte ici pour notre pseudo, pour notre email, password, job. On a également le select ici donc avec les
00:01:51 :différentes options et ensuite le checkbox qui va nous permettre de dire si on accepte ou non les conditions générales d'utilisation. Mais vous voyez que pour l'instant on n'a pas de balise form
00:02:00 :donc la balise form qui en html nous permet de spécifier qu'on veut utiliser un formulaire. Donc cette balise il va falloir la rajouter vous-même et encadrer donc votre variable formulaire avec cette balise. Également on va devoir rajouter un bouton input qui va nous permettre de soumettre
00:02:16 :le formulaire. Donc je vais faire un input et ce input va être de type submit et on va mettre en valeur s'inscrire puisque on veut que ce formulaire permette de s'inscrire. Donc value ici quand on a
00:02:29 :un type submit c'est ce qui va être écrit sur le bouton. Donc je reviens sur mon site, j'actualise et là vous voyez que cette fois-ci on a bien le bouton s'inscrire qui est affiché et si je raffiche le code source de ma page vous voyez que cette fois-ci on a bien tout ça qui est contenu à
00:02:43 :l'intérieur d'une balise form. Donc ce que je vais pouvoir faire également c'est modifier un petit peu l'affichage puisque pour l'instant tout est sur la même ligne et donc ce qu'on peut faire c'est utiliser différentes méthodes sur notre formulaire qui vont nous permettre d'avoir un affichage différent. Une méthode très pratique c'est as p donc p pour paragraphe c'est les
00:03:01 :paragraphes que vous avez en html. Donc si on fait as p comme ceci ça va mettre des balises de paragraphe autour de chacun des champs. Donc là encore si je vais voir mon code source vous voyez
00:03:11 :que cette fois-ci autour de chaque label et chaque input, donc là on a le label et le input pour le pseudo, et bien on va avoir un tag p qui entoure le label et le input. Donc comme ça ça va nous
00:03:22 :permettre d'avoir une vue comme ça alignée et non pas sur toute la même ligne. On a également as ul qui va nous permettre de faire une liste donc j'actualise vous voyez que cette fois-ci on a une liste avec des bullet points et si je vais voir mon html cette fois-ci on a bien une liste
00:03:37 :avec li ici. Un dernier qui est très pratique c'est as table et là il va falloir également rajouter la balise table pour encadrer notre formulaire parce qu'elle n'est pas mise automatiquement et si je rafraîchis la page vous voyez que cette fois-ci on a bien une vue en table donc les choses sont un peu plus alignées et si je retourne voir dans le code source là j'ai bien
00:03:55 :ma table avec le tr th les labels etc etc. Donc voilà comment vous pouvez afficher un formulaire à l'intérieur de votre page html. Vous voyez que c'est très facile il vous suffit de créer une
00:04:07 :instance de votre formulaire dans votre vue donc ce qu'on fait ici ensuite vous la passez au contexte avec la fonction render et dans notre fichier html ici et bien ensuite il suffit d'utiliser avec les doubles à collades ici la valeur que l'on a passé dans le contexte donc la variable ici form qui est

live_helpToutes les questions

Jean-Philippe MOLL HEGER

TemplateDoesNotExist

Rechercher sur le site

Formulaire de contact

Inscris-toi

live_helpToutes les questions

Jean-Philippe MOLL HEGER

TemplateDoesNotExist

Rechercher sur le site

Formulaire de contact