unslug fr: move

1 files changed, 104 insertions, 0 deletions

diff --git a/files/fr/learn/forms/your_first_form/example/index.html b/files/fr/learn/forms/your_first_form/example/index.html
new file mode 100644
index 0000000000..3f25e6d644
--- /dev/null
+++ b/files/fr/learn/forms/your_first_form/example/index.html
@@ -0,0 +1,104 @@
+---
+title: Exemple
+slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple
+translation_of: Learn/Forms/Your_first_form/Example
+---
+<p>Ceci est l'exemple pour l'article <a href="/fr/docs/HTML/Formulaires/Mon_premier_formulaire_HTML" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Mon premier formulaire HTML</a>.</p>
+
+<h2 id="Un_formulaire_simple" name="Un_formulaire_simple">Un formulaire simple</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post"&gt;
+  &lt;div&gt;
+    &lt;label for="nom"&gt;Nom :&lt;/label&gt;
+    &lt;input type="text" id="nom" name="user_name"&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;label for="courriel"&gt;Courriel :&lt;/label&gt;
+    &lt;input type="email" id="courriel" name="user_email"&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;label for="message"&gt;Message :&lt;/label&gt;
+    &lt;textarea id="message" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+
+  &lt;div class="button"&gt;
+    &lt;button type="submit"&gt;Envoyer le message&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Contenu_CSS">Contenu CSS</h3>
+
+<pre class="brush: css">form {
+  /* <code class="css comments">Pour le centrer dans la page</code> */
+  margin: 0 auto;
+  width: 400px;
+
+  /* <code class="css comments">Pour voir les limites du formulaire</code> */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+div + div {
+  margin-top: 1em;
+}
+
+label {
+  /* <code class="css comments">Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement</code> */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input, textarea {
+  /* <code class="css comments">Afin de s'assurer que tous les champs textuels utilisent la même police</code>
+     <code class="css comments">Par défaut, textarea utilise une police à espacement constant */</code>
+  font: 1em sans-serif;
+
+  /* <code class="css comments">Pour donner la même dimension à tous les champs textuels */</code>
+  width: 300px;
+
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
+
+  /* <code class="css comments">Pour harmoniser l'apparence des bordures des champs textuels */</code>
+  border: 1px solid #999;
+}
+
+input:focus, textarea:focus {
+  /* <code class="css comments">Afin de réhausser les éléments actifs */</code>
+  border-color: #000;
+}
+
+textarea {
+  /* <code class="css comments">Pour aligner correctement les champs multilignes et leurs étiquettes */</code>
+  vertical-align: top;
+
+  /* <code class="css comments">Pour donner assez d'espace pour entrer du texte */</code>
+  height: 5em;
+
+  /* <code class="css comments">Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement</code>
+     <code class="css comments">Cela ne marche pas avec tous les navigateurs  */</code>
+  resize: vertical;
+}
+
+.button {
+  /* <code class="css comments">Pour positionner les boutons de la même manière que les champs textuels */</code>
+  padding-left: 90px; /* <code class="css comments">même dimension que les étiquettes */</code>
+}
+
+button {
+  /* <code class="css comments">Cette marge représente approximativement le même espace</code>
+     <code class="css comments">que celui entre les étiquettes et les champs textuels */</code>
+  margin-left: .5em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }}</p>
+
+<p> </p>