diff options
Diffstat (limited to 'files/fr/web/api/htmlformelement/index.html')
| -rw-r--r-- | files/fr/web/api/htmlformelement/index.html | 134 |
1 files changed, 67 insertions, 67 deletions
diff --git a/files/fr/web/api/htmlformelement/index.html b/files/fr/web/api/htmlformelement/index.html index 6cbdaa5313..747286a784 100644 --- a/files/fr/web/api/htmlformelement/index.html +++ b/files/fr/web/api/htmlformelement/index.html @@ -66,7 +66,7 @@ translation_of: Web/API/HTMLFormElement <h3 id="Obtention_d'un_objet_élément_de_formulaire">Obtention d'un objet élément de formulaire</h3> -<p>Pour obtenir un objet <code>HTMLFormElement</code>, vous pouvez utiliser un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteur CSS</a> avec {{domxref("ParentNode.querySelector", "querySelector()")}} ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.</p> +<p>Pour obtenir un objet <code>HTMLFormElement</code>, vous pouvez utiliser un <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteur CSS</a> avec {{domxref("ParentNode.querySelector", "querySelector()")}} ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.</p> <p>{{domxref("Document.forms")}} renvoie un tableau des objets <code>HTMLFormElement</code> listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel :</p> @@ -108,75 +108,75 @@ f.method = "POST" f.submit(); // On appelle la méhtode submit pour l'envoyer </pre> -<p id="Extraction_d'informations_et_définition_d'attributs">Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>formA<span class="punctuation token">"</span></span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>/cgi-bin/test<span class="punctuation token">"</span></span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>getFormInfo();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Info<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setFormInfo(this.form);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Set<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Reset<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>form-info<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">cols</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>20<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">function</span> <span class="function token">getFormInfo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// Obtenir une référence au formulaire par son nom</span> - <span class="keyword token">var</span> f <span class="operator token">=</span> document<span class="punctuation token">.</span>forms<span class="punctuation token">[</span><span class="string token">"formA"</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="comment token">// Les propriétés du formulaire qui nous intéressent</span> - <span class="keyword token">var</span> properties <span class="operator token">=</span> <span class="punctuation token">[</span> <span class="string token">'elements'</span><span class="punctuation token">,</span> <span class="string token">'length'</span><span class="punctuation token">,</span> <span class="string token">'name'</span><span class="punctuation token">,</span> <span class="string token">'charset'</span><span class="punctuation token">,</span> <span class="string token">'action'</span><span class="punctuation token">,</span> <span class="string token">'acceptCharset'</span><span class="punctuation token">,</span> <span class="string token">'action'</span><span class="punctuation token">,</span> <span class="string token">'enctype'</span><span class="punctuation token">,</span> <span class="string token">'method'</span><span class="punctuation token">,</span> <span class="string token">'target'</span> <span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="comment token">// Itérer sur les propriétés en les transformant en une chaîne que nous pouvons afficher à l'utilisateur</span> - <span class="keyword token">var</span> info <span class="operator token">=</span> properties<span class="punctuation token">.</span><span class="function token">reduce</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>property<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> property <span class="operator token">+</span> <span class="string token">": "</span> <span class="operator token">+</span> f<span class="punctuation token">[</span>property<span class="punctuation token">]</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="string token">""</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">"\n"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// Définir les <textarea> du formulaire pour en afficher les propriétés</span> - document<span class="punctuation token">.</span>forms<span class="punctuation token">[</span><span class="string token">"formA"</span><span class="punctuation token">]</span><span class="punctuation token">.</span>elements<span class="punctuation token">[</span><span class="string token">'form-info'</span><span class="punctuation token">]</span><span class="punctuation token">.</span>value <span class="operator token">=</span> info<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">function</span> <span class="function token">setFormInfo</span><span class="punctuation token">(</span>f<span class="punctuation token">)</span><span class="punctuation token">{</span> <span class="comment token">//L'argument doit être une référence d'élément de formulaire.</span> - f<span class="punctuation token">.</span>action <span class="operator token">=</span> <span class="string token">"a-different-url.cgi"</span><span class="punctuation token">;</span> - f<span class="punctuation token">.</span>name <span class="operator token">=</span> <span class="string token">"a-different-name"</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> - -<p id="Envoyer_un_formulaire_via_une_popup">Envoi d'un formulaire dans une nouvelle fenêtre :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Example new-window form submission<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test.php<span class="punctuation token">"</span></span> <span class="attr-name token">target</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>_blank<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span>First name: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>firstname<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span>Last name: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lastname<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">></span></span>Pet preference<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pet<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>cat<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> Cat<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pet<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dog<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> Dog<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">></span></span>Owned vehicles<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>vehicle<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Bike<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>I have a bike<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>vehicle<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Car<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>I have a car<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Submit<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +<p>Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :</p> + +<pre class="brush: html"><form name="formA" action="/cgi-bin/test" method="post"> + <p>Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails.</p> + <p> + <button type="button" onclick="getFormInfo();">Info</button> + <button type="button" onclick="setFormInfo(this.form);">Set</button> + <button type="reset">Reset</button> + </p> + + <textarea id="form-info" rows="15" cols="20"></textarea> +</form> + +<script> + function getFormInfo(){ + // Obtenir une référence au formulaire par son nom + var f = document.forms["formA"]; + // Les propriétés du formulaire qui nous intéressent + var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ]; + // Itérer sur les propriétés en les transformant en une chaîne que nous pouvons afficher à l'utilisateur + var info = properties.reduce(function(property) { return property + ": " + f[property] }, "").join("\n"); + + // Définir les <textarea> du formulaire pour en afficher les propriétés + document.forms["formA"].elements['form-info'].value = info; + } + + function setFormInfo(f){ //L'argument doit être une référence d'élément de formulaire. + f.action = "a-different-url.cgi"; + f.name = "a-different-name"; + } +</script></pre> + +<p>Envoi d'un formulaire dans une nouvelle fenêtre :</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta charset="utf-8"> +<title>Example new-window form submission</title> +</head> +<body> + +<form action="test.php" target="_blank"> + <p><label>First name: <input type="text" name="firstname"></label></p> + <p><label>Last name: <input type="text" name="lastname"></label></p> + <p><label><input type="password" name="pwd"></label></p> + + <fieldset> + <legend>Pet preference</legend> + <p><label><input type="radio" name="pet" value="cat"> Cat</label></p> + <p><label><input type="radio" name="pet" value="dog"> Dog</label></p> + </fieldset> + + <fieldset> + <legend>Owned vehicles</legend> + + <p><label><input type="checkbox" name="vehicle" value="Bike">I have a bike</label></p> + <p><label><input type="checkbox" name="vehicle" value="Car">I have a car</label></p> + </fieldset> + + <p><button>Submit</button></p> +</form> + +</body> +</html></pre> <h3 id="Envoi_de_formulaires_et_téléchargement_de_fichiers_en_utilisant_XMLHttpRequest">Envoi de formulaires et téléchargement de fichiers en utilisant <code>XMLHttpRequest</code></h3> -<p>Vous pouvez consulter <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a> si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.</p> +<p>Vous pouvez consulter <a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a> si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.</p> <h2 id="Spécifications">Spécifications</h2> |