Hello la communauté !

Je fait le cour OpenClassroom, parallèlement FreeCodeCamp, et je suis actuellement aussi sur MDN. En effet, j'effectue un formulaire sur FreeCodeCamp, et pour comprendre comment marche le formulaire, je suis aller voir sur MDN (ou j'ai un boon exemple). Seulement j'ai encore quelque incompréhension, d’où ma demande d'explication par des furieux du codage tel que vous. Ci dessous le code :

<form action="/ma-page-de-traitement" method="post">
    <div>
        <label for="nom">Nom :</label>
        <input type="text" id="nom" />
    </div>
    <div>
        <label for="courriel">Courriel :</label>
        <input type="email" id="courriel" />
    </div>
    <div>
        <label for="message">Message :</label>
        <textarea id="message"></textarea>
    </div>
    
    <div class="button">
        <button type="submit">Envoyer votre message</button>
    </div>
</form>

Alors je vais essayer de numéroter mes quelques questions pour rester clair :

1) Concernant :

<form action="/ma-page-de-traitement" method="post">

_Si j'ai bien compris "form" sert à définir un formulaire.

_"action" sert a définir que le formulaire sera envoyé sur une URL? (la je commence déjà a être moins sur de moi). En gros le formulaire va s'envoyer sur une URL (et donc un serveur??) qui va stocker les donné?

_Et enfin "method="post"" la ça devient technique et donc j'ai pas eu de "traduction en langage newb"..

2)Concernant :

    <div>
        <label for="nom">Nom :</label>
        <input type="text" id="nom" />
   </div>

_ "<div>" sert à organiser le texte et à créer une partie (tel que <p>)? Mais du coup pourquoi ne pas avoir pris <p> directement?

_ Concernant <label for ...> la je ne comprend pas l'explication du site MDN. Si quelqun pouvais m'expliquer clairement svp...

_ "input" ok, cela est pour saisir du texte (d'ou le "type= text"), par contre a quoi sert "id=nom"? Je n'ai pas non plus compris...

3) Concernant :

<textarea id="message"></textarea>

 Textarea est en fait similaire à input, mais je ne vois pas la différence entre les deux...

Voila pour mes interrogations... J'essaye de bien comprendre chaque code, car je débute et ne peux faire l'impasse sur les bases!

Et je n'ai pas vu ses notions (d’ailleur vous appelez ça comment? (je parle des form, action, textarea etc...) ?) dans le cour sur le html pour le moment (je vais commencer le CSS.

Merci en tout cas pour ceux qui prendrons le temps de m'expliquer, on est tous un jour le noob de quelqun...

Salut,

1)

L'url correspondant à l'adresse où tu vas envoyer ton formulaire (ça peut être sur un serveur, ou sur ton PC, mais bien évidemment toujours sur un serveur web). Ce formulaire peut être envoyer par plusieurs méthodes comme POST et GET. C'est à toi de choisir, en général on recommande d'envoyer les longues données et les données sensibles par POST.

L'URL que tu vas renseigner désigne un fichier, ce fichier va recevoir ton formulaire que tu devrais traiter soit par $_GET, soit par $_POST.

Il est assez rare d'envoyer les données d'un formulaire par GET, mais ça existe ! (exemple Google, quand tu fais une recherche, les données apparaissent de manières abstraites dans l'URL).

2)

<div> permet d'y insérer plusieurs éléments et de les organiser comme tu le souhaites au sein de ce <div>. <p> est uniquement fait pour y insérer du texte.

<label for> permet de relier l'input au label. Si tu cliques sur ton label, ça clique sur l'input.

id permet de donner un identifiant à un élément. ID étant unique, et CLASS étant multiple.

Ces deux méthodes d'identification permettent de gérer tes éléments par le code (javascript, css etc)

3)

input: une seule ligne, en général c'est fait pour y insérer peu d'informations. Textarea là, c'est fait pour stocker beaucoup beaucoup de texte. Fais le test par toi même tu verras vite la différence.

-
Edité par FindL 6 décembre 2017 à 14:49:16

Waou Merci pour ce retour FindL !

Alors si je peux me permettre :

L'URL, comment mon formulaire va s'envoyer sur serveur web et sur mon PC? En gros dans l'exemple, le formulaire va s'envoyer dans le dossier "ma-page-de-traitement" sur mon ordi?

Enfin :

FindL a écrit:

<label for> permet de relier l'input au label. Si tu cliques sur ton label, ça clique sur l'input.

id permet de donner un identifiant à un élément. ID étant unique, et CLASS étant multiple.

Ces deux méthodes d'identification permettent de gérer tes éléments par le code (javascript, css etc)

Je n'ai pas compris ce passage... En effet, dans le rendu final sur la page web, j'ai marqué "nom" et il y a un encadré a coté qui attend une saisie de l'utilisateur. Je ne vois pas le lien avec label :/

Merci en tout cas, pour le reste tout me semble plutôt clair

Ah non, pas du tout. Le formulaire va s'envoyer sur l'url que tu vas lui définir.

Ca peut être ma-page-de-traitement.php, accueil/mapage.php etc... ça sera toujours un fichier au final que recevra ton formulaire.

Le formulaire ne sera jamais envoyé sur ton PC !

Je viens de penser que nous sommes ici dans la section HTML/CSS, donc tu n'as peut être pas vu php, c'est normal que tu ne comprennes pas cette partie

Concernant label for, ne t’embête pas trop avec, c'est une manière de dire en HTML que ton label correspond à tel champ.

Pour l'histoire du clique sur label, je me suis trompé. Je viens de tester et ça marche uniquement sur les input type radio / checkbox.

Non je n'ai pas encore vu PHP, d’ailleur je ne sais pas si je le verrai un jour, je pensais faire HTML/CSS et après partir sur du JS.

Bonjour,

le label est (presque) obligatoire.

On le fait sous cette forme :

<label for="blabla">Bla !</label>
<input type="text" id="blabla" />

ou celle-là (plus pour les radio ou checkbox, mais valide pour tout) :

<label>Blabla <input type="text" /></label>

Et dans ces deux cas, quel que soit le type d'input, un clic sur le label donnera le focus à l'input associé. Donc si si, à utiliser le plus possible.