diff options
Diffstat (limited to 'files/de/web/api/htmlformelement')
| -rw-r--r-- | files/de/web/api/htmlformelement/elements/index.html | 46 | ||||
| -rw-r--r-- | files/de/web/api/htmlformelement/index.html | 260 | ||||
| -rw-r--r-- | files/de/web/api/htmlformelement/submit_event/index.html | 76 |
3 files changed, 382 insertions, 0 deletions
diff --git a/files/de/web/api/htmlformelement/elements/index.html b/files/de/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..e5be5603ac --- /dev/null +++ b/files/de/web/api/htmlformelement/elements/index.html @@ -0,0 +1,46 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +translation_of: Web/API/HTMLFormElement/elements +--- +<div> +<div>APIRef("HTML DOM")</div> +</div> + +<p>Die <code><strong>HTMLFormElement.elements</strong></code> Eigenschaft gibt eine domxref("HTMLFormControlsCollection") ( HTMLVersionInline(4) <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a></code>) aller im FORM element enthaltenen Formularsteuerelemente zurück, mit Ausnahme von <a href="/en-US/docs/HTML/Element/Input" title="input"><code>input</code></a> , die ein <code>type</code> attribute haben von <code>image</code>.</p> + +<p><span id="result_box" lang="de"><span>Sie können auf ein bestimmtes Element zugreifen, indem Sie entweder einen Index oder den Elementnamen oder die ID verwenden.</span></span></p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><em>nodeList</em> = <em>HTMLFormElement</em>.elements +</pre> + +<h2 id="Example" name="Example">Beschreibung</h2> + +<pre class="brush:js notranslate">let inputs = document.getElementById("form1").elements; +let inputByIndex = inputs[2]; +let inputByName = inputs["login"]; +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>SpecName('HTML WHATWG', '#dom-form-elements', 'HTMLFormElement.elements')</td> + <td> Spec2('HTML WHATWG')</td> + <td></td> + </tr> + <tr> + <td>SpecName("DOM2 HTML", "html.html#ID-76728479", "HTMLFormElement.elements")</td> + <td>Spec2("DOM2 HTML")</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/api/htmlformelement/index.html b/files/de/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..45fbc2e027 --- /dev/null +++ b/files/de/web/api/htmlformelement/index.html @@ -0,0 +1,260 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - API + - DOM + - HTML + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLFormElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>The <strong><code>HTMLFormElement</code></strong> interface provides methods to create and modify {{HTMLElement("form")}} elements.</p> + +<ul> + <li><strong>document.forms</strong> - returns an array of HTMLFormElement objects referencing all forms on the page.</li> + <li><strong>document.forms[index] </strong>- returns an HTMLFormElement object referencing the form at the specified index.</li> + <li><strong>document.forms['id'] </strong>- returns an HTMLFormElement object referencing the form with the specified id.</li> + <li><strong>document.forms['name'] </strong>- returns an HTMLFormElement object referencing the form with the specified name.</li> +</ul> + +<p>{{InheritanceDiagram(600,120)}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.</dd> + <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt> + <dd>A <code>long</code> reflecting the number of controls in the form.</dd> + <dt>{{domxref("HTMLFormElement.name")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd> + <dt>{{domxref("HTMLFormElement.method")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd> + <dt>{{domxref("HTMLFormElement.target")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd> + <dt>{{domxref("HTMLFormElement.action")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd> + <dt>{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two methods are synonyms.</dd> + <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.</dd> + <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.</dd> + <dt>{{domxref("HTMLFormElement.noValidate")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the value of the form's {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.</dd> +</dl> + +<p>Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named <code>action</code> will have its <code>action</code> property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).</p> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLFormElement.submit()")}}</dt> + <dd>Submits the form to the server.</dd> + <dt>{{domxref("HTMLFormElement.reset()")}}</dt> + <dd>Resets the form to its initial state.</dd> + <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt> + <dd>Returns <code>true</code> if the element's child controls are subject to constraint validation and satisfy those contraints; returns <code>false</code> if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to <code>false</code>.</dd> + <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt> + <dd>Returns <code>true</code> if the element's child controls satisfy their validation constraints. When <code>false</code> is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.</dd> + <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}</dt> + <dd>Triggers a native browser interface to assist the user in completing the fields which have an <a href="https://html.spec.whatwg.org/#autofill-field-name">autofill field name</a> value that is not <code>off</code> or <code>on</code>. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem. <strong>This method has been removed from Chrome and Firefox — see {{bug(1270740)}} for background information on why.</strong></dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>Create a new form element, modify its attributes and submit it:</p> + +<pre class="brush: js">var f = document.createElement("form");// Create a form +document.body.appendChild(f); // Add it to the document body +f.action = "/cgi-bin/some.cgi"; // Add action and method attributes +f.method = "POST" +f.submit(); // Call the form's submit method +</pre> + +<p>Extract information from a form element and set some of its attributes:</p> + +<pre class="brush: html"><form name="formA" id="formA" action="/cgi-bin/test" method="POST"> + <p>Click "Info" for form details; "Set" to change settings.</p> + <p> + <input type="button" value="info" onclick="getFormInfo();"> + <input type="button" value="set" onclick="setFormInfo(this.form);"> + <input type="reset" value="reset"><br> + <textarea id="tex" style="height:15em; width:20em"></textarea> + </p> +</form> + +<script type="text/javascript"> + function getFormInfo(){ + var info; + var f = document.forms["formA"]; //Get a reference to the form via id. + info = "elements: " + f.elements + "\n" + + "length: " + f.length + "\n" + + "name: " + f.name + "\n" + + "charset: " + f.acceptCharset+ "\n" + + "action: " + f.action + "\n" + + "enctype: " + f.enctype + "\n" + + "encoding: " + f.encoding + "\n" + + "method: " + f.method + "\n" + + "target: " + f.target; + document.forms["formA"].elements['tex'].value = info; + } + function setFormInfo(f){ //Argument is a reference to the form. + f.method = "GET"; + f.action = "/cgi-bin/evil_executable.cgi"; + f.name = "totally_new"; + } +</script> +</pre> + +<p>Submit a form in a <a href="/en-US/docs/Web/API/Window/open">popup window</a>:</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>MDN Example</title> +<script type="text/javascript"> +function popupSend (oFormElement) { + if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") { + console.error("This script supports the GET method only."); + return; + } + var oField, sFieldType, nFile, sSearch = ""; + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + } + } + open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes"); +} +</script> + +</head> + +<body> + +<form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;"> + <p>First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Password: <input type="password" name="pwd" /><br /> + <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p> + <p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br /> + <input type="checkbox" name="vehicle" value="Car" />I have a car</p> + <p><input type="submit" value="Submit" /></p> +</form> + +</body> +</html></pre> + +<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest">Submitting forms and uploading files using <code>XMLHttpRequest</code></h3> + +<p>If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>The following method has been added: <code>requestAutocomplete()</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: <code>checkValidity()</code>. The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Firefox 56, the implementation has been updated so that the <code>action</code> property returns the correct form submission URL, as per spec ({{bug(1366361)}}).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li> +</ul> diff --git a/files/de/web/api/htmlformelement/submit_event/index.html b/files/de/web/api/htmlformelement/submit_event/index.html new file mode 100644 index 0000000000..722fba4d46 --- /dev/null +++ b/files/de/web/api/htmlformelement/submit_event/index.html @@ -0,0 +1,76 @@ +--- +title: submit +slug: Web/API/HTMLFormElement/submit_event +tags: + - Event + - submit +translation_of: Web/API/HTMLFormElement/submit_event +--- +<p>Das <code>submit</code> Event tritt ein, wenn ein Formular (<code><form ...></form></code>) abgeschickt wird.</p> + +<p>Es gilt zu beachten, dass das <code>submit</code> Event <strong>nur</strong> auf dem Formularelement ausgelöst wird. Der auslösende <code><button></code> oder <code><input type="submit" ... /></code> erhalten das Event nicht (Es wird das Formular abgeschickt, nicht der Button).</p> + +<h2 id="Allgemein">Allgemein</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Spezifikation</strong></td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td> + </tr> + <tr> + <td><strong>Interface</strong></td> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <td><strong>Propagiert ("Bubbles")</strong></td> + <td>Ja (obwohl eigentlich einfach Event ohne Propagation)</td> + </tr> + <tr> + <td><strong>Cancelable</strong></td> + <td>Ja</td> + </tr> + <tr> + <td><strong>Ziel</strong></td> + <td>Element</td> + </tr> + <tr> + <td><strong>Standardaktion</strong></td> + <td>Abhängig von Implementierung (schickt Inhalt des Formulars zum Server)</td> + </tr> + </tbody> +</table> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> |