diff options
Diffstat (limited to 'files/de/web/html/element/input')
| -rw-r--r-- | files/de/web/html/element/input/button/index.html | 246 | ||||
| -rw-r--r-- | files/de/web/html/element/input/checkbox/index.html | 352 | ||||
| -rw-r--r-- | files/de/web/html/element/input/index.html | 1411 |
3 files changed, 2009 insertions, 0 deletions
diff --git a/files/de/web/html/element/input/button/index.html b/files/de/web/html/element/input/button/index.html new file mode 100644 index 0000000000..d36dc8944b --- /dev/null +++ b/files/de/web/html/element/input/button/index.html @@ -0,0 +1,246 @@ +--- +title: <input type ="button"> +slug: Web/HTML/Element/Input/button +tags: + - Eingabeelement + - Element + - HTML + - Referenz +translation_of: Web/HTML/Element/input/button +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary">Das HTML <code><strong><input type="button"></strong></code> Element ist eine bestimmte Version des <strong><code><input></code></strong> Elements. Es wird benutzt, um einen anklickbaren Button zu generieren, der jedoch keinen voreingestellten Wert hat.</span></p> + +<p>Browser generieren einen Controller für clickbare Buttons ohne Standartwert. Ein Button kann beliebige Beschriftungen besitzen. Der Controller selbst variiert von Browser zu Browser.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Interactive content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, and <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> element, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>None, both the starting and ending tag are mandatory. </td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" title="The HTMLButtonElement interface provides properties and methods (beyond the <button> object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements."><code>HTMLButtonElement</code></a></td> + </tr> + <tr> + <th scope="row">Element Typ</th> + <td>Inline</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>Dieses Element kann zusätzlich zu den <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">globalen Attribute</a> jedes der folgenden besitzen:</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>This Boolean attribute indicates that the user cannot interact with the button. If this attribute is not specified, the button inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the <code><strong>disabled</strong></code> attribute set, then the button is enabled. The disabled control's value isn't submitted with the form and the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls.</p> + </dd> + <dd> + <p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>This Boolean attribute lets you specify that the button should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>The use of this attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. By default, unlike other browsers, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of this attribute to <code>off</code> (i.e., <code>autocomplete="off"</code>) disables this feature.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>The form element that the button is associated with (its <em>form owner</em>). The value of the attribute must be the <strong>id</strong> attribute of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, the <code><button></code> element must be a descendent of a form element. This attribute enables you to place <code><button></code> elements anywhere within a document, not just as descendents of their {{HTMLElement("form")}} elements.</dd> + <dt>{{htmlattrdef("formenctype")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formenctype</strong></code> attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: This value is used if an {{HTMLElement("input")}} element is used with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>The URI of a program that processes the information submitted by the button. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the button's form owner.</dd> + <dt>{{htmlattrdef("formmethod")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formmethod</strong></code> attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form is appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formnovalidate </strong></code>attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner. This is a Boolean attribute.</dd> + <dt>{{htmlattrdef("formtarget")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formtarget</strong></code> attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd><span class="tlid-translation translation" lang="de"><span title="">Der Name der Schaltfläche, der mit den Formulardaten übermittelt wird.</span></span></dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The type of the button. Possible values are: + <ul> + <li><code>submit</code>: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.</li> + <li><code>reset</code>: The button resets all the controls to their initial values.</li> + <li><code>button</code>: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the button.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:html"><input type="button" value="Klick mich"> +</pre> + +<p>Das erstellt einen neuen Button mit der Beschriftung: 'Klick mich'.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table" style="height: 137px; width: 1065px;"> + <tbody> + <tr> + <td>Specification</td> + <td>Status</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibiltiy">Browser Compatibiltiy</h2> + +<table class="standard-table"> + <caption>Browser Compatibility</caption> + <tbody> + <tr> + <td>Feature</td> + <td>Chrome</td> + <td>Gecko (Firefox)</td> + <td>Internet Explorer</td> + <td>Opera</td> + <td>Safari</td> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.6</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>autofocus</code> attribute</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Mobile Browser Compatibility</caption> + <tbody> + <tr> + <td>Feature</td> + <td>Android</td> + <td>Gecko (Firefox Mobile)</td> + <td>Internet Explorer Mobile</td> + <td>Opera Mobile</td> + <td>Safari Mobile</td> + </tr> + <tr> + <td>Basic Support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formaction </code>attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formenctype </code>attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> +</ul> diff --git a/files/de/web/html/element/input/checkbox/index.html b/files/de/web/html/element/input/checkbox/index.html new file mode 100644 index 0000000000..5d2af0d966 --- /dev/null +++ b/files/de/web/html/element/input/checkbox/index.html @@ -0,0 +1,352 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Element/Input/checkbox +tags: + - Element + - HTML + - HTML forms + - Input + - Input Types + - Reference + - checkbox + - form +translation_of: Web/HTML/Element/input/checkbox +--- +<div>{{HTMLRef}}</div> + +<p>{{htmlelement("input")}}-Elemente vom Typ <strong><code>checkbox</code></strong> werden standardmäßig als Kästchen gerendert, die mit einem Häkchen versehen (angeklickt) sind, wenn sie aktiviert sind, ähnlich wie man es von offiziellen Formularen kennt. Das exakte Erscheinungsbild hängt vom System ab, auf dem der Browser läuft. Normalerweise ist es ein Quadrat aber es kann auch abgerundete Ecken haben. Eine Checkbox erlaubt die Auswahl eines einzelnen Wertes zur Übertragung in einer Form (oder nicht).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<div class="note"> +<p><strong>Anmerkung</strong>: <a href="/en-US/docs/Web/HTML/Element/input/radio">Radio buttons</a> sind Checkboxen ähnlich, jedoch mit einer wichtigen Ausnahme - Radiobuttons sind in einem Satz gruppiert, in dem nur ein Radiobutton aktiviert sein kann, während Checkboxen es erlauben, einen einzelnen Wert an- und auszuschalten. Dort wo mehrere Steuerelemente exisiteren, erlauben es Radiobuttons, eines davon zu selektieren, während Checkboxen mehrere Werte setzen können.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Ein {{domxref("DOMString")}} der den Wert der Checkbox repräsentiert.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} und {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported common attributes</strong></td> + <td><code>checked</code></td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>{{anch("checked")}}</code> und <code>{{anch("value")}}</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>Ein {{domxref("DOMString")}} der den Wert der checkbox repräsentiert. Dies findet man nicht clientseitig, aber auf Servern ist dies der Wert (<strong><code>value</code></strong>), der beim Übermitteln der Daten mit dem Checkbox-<strong><code>name </code></strong>übergeben wird. Sehen wir uns folgendes Beispiel an:</p> + +<pre class="brush: html"><form> + <div> + <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> + <label for="subscribeNews">Subscribe to newsletter?</label> + </div> + <div> + <button type="submit">Subscribe</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Value', 600, 60)}}</p> + +<p>In diesem Beispiel haben wir einen Namen <code>subscribe</code> und einen Wert <code>newsletter</code>. Wenn die Form übertragen wird, wird das name/value pair <code>subscribe=newsletter</code> sein.</p> + +<p>Wird das <code>value</code>-Attribut weggelassen, ist der default value für die Checkbox <code>on</code>, in diesem Fall würden also die übertragenen Daten <code>subscribe=on</code> sein.</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Wenn beim Übertragen der Form eine Checkbox nicht angeklickt (unchecked) ist, so wird kein Wert vorgesehen, der den unchecked-Status repräsentiert (z.B. <code>value=unchecked</code>); der Wert wird überhaupt nicht zum Server übertragen. Wenn Sie einen default-Wert für die Checkbox übertrgen wollen, können Sie - eventuell durch JavaScript generiert - ein {{HTMLElement("input/hidden", '<input type="hidden">')}} in die Form einbauen, das den selben <code>name</code> and <code>value</code> wie die Checkbox hat.</p> +</div> + +<h2 id="Zusätzliche_Attribute">Zusätzliche Attribute</h2> + +<p>Zusätzlich zu den allgemeinen Attributen, die von allen {{HTMLElement("input")}}-Elementen geteilt werden, unterstützen "<code>checkbox</code>"-Inputs die folgenden Attribute:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("checked")}}</code></td> + <td>Boolean; wenn vorhanden, wird die Checkbox standardmäßig auf <code>on</code> gestellt.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Boolean; wenn vorhanden, wird das Erscheinungsbild abgeändert, so dass angezeigt wird, dass der Wert nicht geändert werden kann.</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>Der String, der beim Übertragen der Form benutzt wird, wenn die Checkbox den Wert <code>on </code>hat.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> + +<p>Ein Boolean-Attribut, das angibt, ob die Checkbox standardmäßig <code>checked</code> ist oder nicht (wenn die Seite gelaoden wird). Es gibt nicht an, ob diese Checkbox aktuell den Status checked hat: Wenn der Status der Checkbox sich ändert, gibt dieses Content Attribut die Änderung nicht wieder. (Nur das {{domxref("HTMLInputElement")}}’s <code>checked</code> IDL Attribut wird aktualisiert)</p> + +<div class="note"> +<p><strong>Anmerkung:</strong> Anders als andere Eingabe-Steuerelemente ist eine Checkbox nur dann in den übermittelten Daten vorhanden, wenn die Checkbox angeklickt (<code>checked</code>) ist. Wenn das der Fall ist, wird der Wert der Checkbox (<code>value</code>) als die Eingabe übermittelt.</p> +</div> + +<p>Anders als andere Browser, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">speichert </a>Firefox standardmäßig den dynamischen Status von <code><input></code> zwischen mehreren Seitenaufrufen. Benutzen Sie das {{htmlattrxref("autocomplete","input")}}-Attribut, um dieses Feature zu steuern.</p> + +<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> + +<p>Ein Boolean-Attribut, das angibt, ob der Wert dieser Checkbox durch den Benutzer geändert werden kann oder nicht. Bedenken Sie, dass dieses Attribut nur die Erscheinungsform der Checkbox ändert, typischweise, indem eine graue Farbe für Linien und Hintergrund verwendet werden. Dieses Attribut hat jedoch keinen Einfluss auf den Status der Checkbox, der auch immer noch vom Benutzer geändert werden kann. Wenn Sie darüber hinaus verhindern wollen, dass der Benutzer den Status der Checkbox ändert, müssen Sie das <code>disabled</code>-Attribut verwenden. Wenn Sie jedoch das <code>disabled</code>-Attribut verwenden, bedenken Sie, dass der Wert des Steuerelements nicht übertragen wird, wenn die Form übermittelt wird.</p> + +<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3> + +<p>Das <code>value</code>-Attribut ist eines der Attribute, das alle {{HTMLElement("input")}}s teilen. Es bietet jedoch einen speziellen Nutzen für Inputs vom Typ <code>checkbox</code>: Wenn eine Form übermittelt wird, werden Checkboxen nur dann übermittelt, wenn sie aktuell angeklickt sind, und der übermittelte Wert ist der Wert aus dem <code>value</code>-Attribut. Wenn der Wert nicht anderweitig spezifiziert ist, ist es standarsmäßig der String <code>on</code>. Dies wird im Abschnitt {{anch("Value")}} demonstriert.</p> + +<h2 id="checkbox_inputs_benutzen">checkbox inputs benutzen</h2> + +<p>Wir haben oben schon die gängisten Nutzungsmöglichkeiten von Checkoxen gesehen. Lassen Sie uns nun die weiteren Features betrachten, die Sie vielleicht brauchen werden.</p> + +<h3 id="Mit_multiple_checkboxes_umgehen">Mit multiple checkboxes umgehen</h3> + +<p>Das Besipiel oben enthielt nur eine Checkbox; in Wirklichkeit werden Sie wahrscheinlich mehrere Checkboxen entdecken. Wenn sie keinen Bezug haben, dann können sie alle separat betrachtet werden, so wie oben gezeigt. Wenn sie jedoch in Beziehung zueinander stehen, sind die Dinge nicht mehr so einfach.</p> + +<p>Im folgenden Demo bauen wir mehrere Checkboxen ein, um dem Benutzer zu erlauben, seine Interessen auszuwählen. (Ganze Version im {{anch("Beispiele")}}-Abschnitt).</p> + +<pre class="brush: html"><fieldset> + <legend>Choose your interests</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Coding</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Music</label> + </div> +</fieldset></pre> + +<p>{{EmbedLiveSample('Handling_multiple_checkboxes', 600, 100)}}</p> + +<p>In diesem Beispiel werden Sie sehen, dass wir jeder Checkbox den selben <code>name</code> gegeben haben. Wenn beide Checkboxen checked sind und dann die Form übermittelt wird, werden Sie einen String mit name/value pairs wie folgt erhalten: <code>interest=coding&interest=music</code>. Wenn der String den Server erreicht, müssen Sie ihn anders parsen als ein assoziatives Array, so dass alle Werte und nicht nur der letzte von <code>interest</code> ermittelt werden. Für eine Technik, die mit PHP eingesetzt wird, sehen Sie sich dieses Beispiel an: <a class="question-hyperlink" href="http://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Handle Multiple Checkboxes with a Single Serverside Variable</a>.</p> + +<h3 id="Checkboxen_auf_checked_setzen">Checkboxen auf 'checked' setzen</h3> + +<p>Um eine Checkbox auf den Wert 'checked' zu setzen, geben Sie ihm einfach das <code>checked</code>-Attribute. Sehen Sie sich das Beispiel unten an:</p> + +<pre class="brush: html"><fieldset> + <legend>Choose your interests</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding" checked> + <label for="coding">Coding</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Music</label> + </div> +</fieldset></pre> + +<p>{{EmbedLiveSample('Checking_boxes_by_default', 600, 100)}}</p> + +<h3 id="Einen_größeren_Click-Bereich_für_die_Checkbox_vorsehen">Einen größeren Click-Bereich für die Checkbox vorsehen</h3> + +<p>In den Beispielen oben werden Sie gesehen haben, dass man den Wert der Checkbox ebenso umschalten kann, indem man auf das {{htmlelement("label")}}-Element klickt, das mit der Checkbox verbunden ist, wie wenn man auf die Checkbox selbst klickt. Das ist ein wirklich hilfreiches Feature von HTML Form Labels, das es einfacher macht, die Option anzuklicken, die man möchte, speziell auf kleinen Bildschirmen wie z.B. bei Smartphones.</p> + +<p>Neben der Benutzbarkeit ist dies ein guter Grund, die <code><label></code>-Elemente in der Form sauber aufzusetzen.</p> + +<h3 id="Checkboxen_mit_unbestimmbarem_Wert">Checkboxen mit unbestimmbarem Wert</h3> + +<p>Zusätzlich zu den Status-Werten <code>checked </code>und <code>unchecked </code>gibt es einen dritten Status, den eine Checkbox annehmen kann: <strong>indeterminate</strong>. Dies ist ein Status, bei dem man nich sagen kann, ob das Element <code>on</code> oder <code>off</code> ist. Dies wird gesetzt durch die {{domxref("HTMLInputElement")}} object's <code>indeterminate</code> Eigenschaft via JavaScript (es kann nicht durch HTML gesetzt werden):</p> + +<pre class="brush: js">inputInstance.indeterminate = true;</pre> + +<p>Eine Checkbox im indeterminate-Status hat in den meisten Browsern eine horizontale Linie in der Box (es sieht ein bisschen wie ien Bindestrich oder ein Minus-Zeichen aus) anstatt eines Häkchens.</p> + +<p>Es gibt nicht viele Fälle, in denen diese Eigenschaft sinnvoll eingesetzt werden kann. Am häufigsten ist der Gebrauch, wenn eine Checkbox eine Gruppe von Unteroptionen (die ebenfalls Checkboxen sind) beherbergt.Wenn alle Unteroptionen angeklickt (<code>checked</code>) sind, dann ist die übergeordnete Checkbox auch <code>checked</code>, sind alle Unteroptionen <code>unchecked</code>, so ist die übergeordnete Checkbox ebenfalls <code>unchecked</code>. In allen anderen Fällen hätte die übergeordnete Checkbox den Status <code>indeterminate</code> .</p> + +<p>Im Besipiel unten kann man dies sehen (Dank an <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a> für die Inspiration). In diesem Beispiel halten wir Zutaten vor, die für ein Rezept gesammelt werden. Wenn Sie eine Zutaten-Checkbox an- oder ausklicken, prüft eine JavaScript-Funktion die Gesamtzahl der ausgewählten Zutaten.</p> + +<ul> + <li>Wenn keine Checkboxen den Status <code>checked</code> haben, hat die Rezept-Checkbox den Status <code>unchecked</code></li> + <li>Wenn eine oder zwei den Status <code>checked</code> haben, wird der Status der Rezept-Checkbox auf <code>indeterminate</code> gesetzt.</li> + <li>Sind alle drei Checkboxen angeklickt, wird der Status der Rezeot.Checkbox auf <code>checked</code> gesetzt.</li> +</ul> + +<p>In diesem Fall wird also der <code>indeterminate</code>-Status benutzt, um anzuzeigen, dass das Sammeln der Zutaten begonnen hat, das Rezept aber noch nicht komplett ist.</p> + +<pre class="brush: js" id="line1"> var overall = document.querySelector('input[id="EnchTbl"]'); + var ingredients = document.querySelectorAll('ul input'); + + overall.addEventListener('click', function(e) { + e.preventDefault(); + }); + + for(var i = 0; i < ingredients.length; i++) { + ingredients[i].addEventListener('click', updateDisplay); + } + + function updateDisplay() { + var checkedCount = 0; + for(var i = 0; i < ingredients.length; i++) { + if(ingredients[i].checked) { + checkedCount++; + } + } + + if(checkedCount === 0) { + overall.checked = false; + <strong>overall.indeterminate = false;</strong> + } else if(checkedCount === ingredients.length) { + overall.checked = true; + <strong>overall.indeterminate = false;</strong> + } else { + overall.checked = false; + <strong>overall.indeterminate = true;</strong> + } + }</pre> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Wenn Sie eine From mit einer indeterminate Checkbox übermitteln, passiert dasselbe, wie wenn die Checkbox den Status unchecked hat - es werden keine Daten übermittelt, die die Checkbox repräsentieren.</p> +</div> + +<h2 id="Gültigkeitsprüfung">Gültigkeitsprüfung</h2> + +<p>Checkboxen unterstützen <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation</a> (Gültigkeitsprüfung) (allen {{HTMLElement("input")}}s verfügbar). Jedoch werden die meisten {{domxref("ValidityState")}}s immer <code>false</code> sein. Wenn die Checkbox das {{htmlattrxref("required", "input")}}-Attribut hat, aber nicht angeklickt ist, then {{domxref("ValidityState.valueMissing")}}, dann wird der Wert <code>true</code> sein.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Das folgende Beispiel ist eine erweiterte Version des "multiple checkboxes"-Beispiels, das wir oben gesehen haben. — es hat mehr Standard-Optionen, plus eine "andere" Checkbox, die, wenn sie angeklickt wird, verursacht, dass eine Textbox erscheint, in die man einen Wert für die "andere" Option eingeben kann. Dies wird durch einen einfachen javaScript-Block erreicht. Das Beispiel enthält ebenso etwas CSS, um das Styling zu verbessern.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form> + <fieldset> + <legend>Choose your interests</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Coding</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Music</label> + </div> + <div> + <input type="checkbox" id="art" name="interest" value="art"> + <label for="art">Art</label> + </div> + <div> + <input type="checkbox" id="sports" name="interest" value="sports"> + <label for="sports">Sports</label> + </div> + <div> + <input type="checkbox" id="cooking" name="interest" value="cooking"> + <label for="cooking">Cooking</label> + </div> + <div> + <input type="checkbox" id="other" name="interest" value="other"> + <label for="other">Other</label> + <input type="text" id="otherValue" name="other"> + </div> + <div> + <button type="submit">Submit form</button> + </div> + </fieldset> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 600px; + margin: 0 auto; +} + +div { + margin-bottom: 10px; +} + +fieldset { + background: cyan; + border: 5px solid blue; +} + +legend { + padding: 10px; + background: blue; + color: cyan; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var otherCheckbox = document.querySelector('input[value="other"]'); +var otherText = document.querySelector('input[id="otherValue"]'); +otherText.style.visibility = 'hidden'; + +otherCheckbox.addEventListener('change', () => { + if(otherCheckbox.checked) { + otherText.style.visibility = 'visible'; + otherText.value = ''; + } else { + otherText.style.visibility = 'hidden'; + } +});</pre> + +<p>{{EmbedLiveSample('Examples', '100%', 300)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("html.elements.input.input-checkbox")}}</p> + +<h2 id="Weiterführende_Informationen">Weiterführende Informationen</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>The {{cssxref(":checked")}} and {{cssxref(":indeterminate")}} CSS selectors let you style checkboxes based on their current state</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/de/web/html/element/input/index.html b/files/de/web/html/element/input/index.html new file mode 100644 index 0000000000..92754c05f9 --- /dev/null +++ b/files/de/web/html/element/input/index.html @@ -0,0 +1,1411 @@ +--- +title: <input> +slug: Web/HTML/Element/Input +tags: + - Element + - Formulare + - HTML + - HTML Formulare + - HTML input tag + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/HTML/Element/input +--- +<div>{{draft}}{{HTMLRef}}</div> + +<p>Das <strong>HTML-Element <code><input></code></strong> ermöglicht es, interaktive Bedienelemente für webbasierte Formulare zu erstellen, die Daten vom Benutzer entgegennehmen.<br> + Eine große Bandbreite verschiedener Eingabedaten und Bedienelemente ist verfügbar, abhängig je nach Gerät und {{Glossary("user agent")}}. Das <code><input></code> Element ist eine der mächtigsten und komplexesten von allen HTML-Elemente, da es eine ungeheure Anzahl an Kombinationen aus Eingabetypen und Attributen besitzt.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Um einen Eindruck davon zu bekommen, wie die unterschiedlichen Typen des <input>-Elements aussehen, kannst du die Werte des Attributs <strong>type</strong> im folgenden editierbaren Live-Beispiel ändern. Die Ausgabe verändert sich, während du tippst. In jedem Fall erzeugt der Anfangswert <code>text</code> eine einfache Textausgabe. Du kannst andere Werte ausprobieren, etwa <code>number</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>date</code>, <code>file</code>, <code>month</code>, <code>password</code>, <code>range</code> oder <code>time</code>.</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/editable-input-example/editable_input.html", '100%', 230)}}</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.<br> + Wenn der {{htmlattrxref("type", "input")}} nicht den Wert <code>hidden</code> hat, dann ein label-bares Element, mit greifbarem Inhalt.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Keiner, das ist ein leeres Element.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Muss ein Start-Tag und darf kein End-Tag haben</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternknoten</th> + <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td> + <ul> + <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li> + <li><code>type=checkbox</code>: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li> + <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li> + <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li> + <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li> + <li><code>type=hidden|month|number|password|range|research</code>: None</li> + <li><code>type=search|submit|tel|text|url|week</code>: None</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="sect1"></h2> + +<h2 id="Arten_des_<input>-Elements">Arten des <input>-Elements</h2> + +<p>Wie ein <input> sich verhält ist stark von seinem <strong>type</strong>-Attribut abhängig. Deshalb werden dessen Werte in einer eigenen Referenz beschrieben. Fehlt das Attribut, gilt der Standardwert <code>text</code>.</p> + +<p><code>type</code> kann folgende Werte annehmen:</p> + +<ul> + <li><a href="https://developer.mozilla.org/de-DE/docs/Web/HTML/Element/input/button">button</a>: Ein Knopf zum Drücken ohne voreingestelltes Verhalten. </li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox">checkbox</a>: Ein Kästchen zum Auswählen. Das <strong>value</strong>-Attribut muss benutzt werden, um den Wert zu definieren, den dieses Element übermittelt. Mit dem <strong>checked</strong>-Attribut kann angezeigt werden, dass das Element ausgewählt ist. Es ist auch möglich das <strong>indeterminate</strong>-Attribut zu verwenden, um anzuzeigen, dass das Kästchen sich in einem undefinierten Zustand befindet (auf den meisten Plattformen wird dies durch eine horizontale Linie durch das Kästchen dargestellt).</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color">color</a>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Festlegen einer Farbe. Die Benutzerschnittstelle einer Farbauswahl muss nichts anderes tun, als einfache Farben als Text anzunehmen. (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">mehr Infos</a>).</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date">date</a>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben eines Datum (Jahr, Monat und Tag, ohne Uhrzeit).</li> + <li><a href="/de/docs/Web/HTML/Element/input/datetime-local">datetime-local</a>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben eines Datums mit Uhrzeit, ohne Zeitzone.</li> + <li><a href="/de/docs/Web/HTML/Element/input/email">email</a>: {{HTMLVersionInline("5")}} Ein Feld zum Bearbeiten einer E-Mail-Adresse. Der Eingabewert wird vor dem Übermitteln darauf überprüft, ob er entweder leer ist oder eine einzelne, valide E-Mail-Adresse enthält. Die CSS-Pseudoklassen {{cssxref(":valid")}}- und {{cssxref(":invalid")}} werden entsprechend gesetzt.</li> + <li><code>file</code>: Ein Bedienelement, das den Nutzer eine Datei auswählen lässt. Das <strong>accept</strong>-Attribut definiert die Art der auswählbaren Dateien.</li> + <li><code>hidden</code>: Ein unsichtbares Bedienelement, dessen Wert aber dennoch an den Server übermittelt wird.</li> + <li><code>image</code>: Ein graphischer Knopf zum Abschicken. Das <strong>src</strong>-Attribut ist erforderlich, um die Quelle des Bildes anzugeben. Im ebenfalls verpflichtenden a<strong>lt</strong>-Attribut ist alternativer Text zu definieren. Die <strong>height</strong>- und <strong>width</strong>-Attribute können benutzt werden um die Größe des Bildes in Pixeln anzugeben. </li> + <li><code>month</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben von Monat und Jahr, ohne Zeitzone.</li> + <li><code>number</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben einer Gleitkommazahl. </li> + <li><code>password</code>: Ein einzeiliges Textfeld, dessen Wert verschleiert wird. Das <strong>maxlength</strong>-Attribut legt die maximale Länge des einzugebenden Wertes fest. + <div class="note"><strong>Bemerkung</strong>: Alle Formulare mit sensitiven Daten wie Passwörter (z.B. Anmeldeformulare) sollten über HTTPS ausgeliefert werden. Firefox warnt mit verschiedenen Methoden vor unsicheren Anmeldeverfahren (siehe <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>). Andere Browser bieten ähnliche Mechanismen.</div> + </li> + <li><code>radio</code>: Ein Schaltknopf. Das <strong>value</strong>-Attribut muss verwendet werden, um den von diesem Element übermittelten Wert festzulegen. Das <strong>checked</strong>-Attribut definiert, ob es standardmäßig angewählt ist. Schaltknöpfe mit demselben Wert für das <strong>name</strong>-Attribut gehören zur selben Gruppe. Nur jeweils ein Schaltknopf einer Gruppe kann angewählt sein. </li> + <li><code>range</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eintragen einer Zahl, deren genauer Wert unwichtig ist. Sind die entsprechenden Attribute nicht festgelegt, gelten folgende Voreinstellungen: + <ul> + <li><code>min</code>: 0</li> + <li><code>max</code>: 100</li> + <li><code>value</code>: <code>min</code> + (<code>max</code>-<code>min</code>)/2, or <code>min</code> if <code>max</code> is less than <code>min</code></li> + <li><code>step</code>: 1</li> + </ul> + </li> + <li><code>reset</code>: Ein Knopf, der den Inhalt des Formulars auf die Standardwerte zurücksetzt. </li> + <li><code>search</code>: {{HTMLVersionInline("5")}} Ein einzeiliges Textfeld zur Eingabe von Suchbegriffen. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt. </li> + <li><code>submit</code>: Ein Knopf zum Übermitteln des Formulars. </li> + <li><code>tel</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Anzeigen einer Telefonnummer. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt, sonst werden keine anderen Regeln erzwungen. Attribute wie pattern und <strong>maxlength</strong> können verwendet werden, um zulässige Werte einzuschränken. Die CSS-Pseudoklassen {{cssxref(":valid")}}- und {{cssxref(":invalid")}} werden entsprechend gesetzt.</li> + <li><code>text</code>: Ein einzeiliges Textfeld; Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt. </li> + <li><code>time</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben einer Uhrzeit ohne Zeitzone.</li> + <li><code>url</code>: {{HTMLVersionInline("5")}} Ein Feld zum Eingeben einer URL. Der Eingabewert wird vor dem Übermitteln darauf überprüft, ob er leer oder eine korrekte, absolute URL ist. Attribute wie <strong>pattern</strong> und <strong>maxlength</strong> können verwendet werden um zulässige Werte einzuschränken. Die CSS-Pseudoklassen {{cssxref(":valid")}}- und {{cssxref(":invalid")}} werden entsprechend gesetzt.</li> + <li><code>week</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben eines Datums bestehend aus einer Jahreszahl und einer Wochennummer, ohne Zeitzone.</li> +</ul> + +<p>Einige Werte für das <strong>type</strong>-Attribut sind jetzt überflüssg:</p> + +<ul> + <li><code>datetime</code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} Ein Bedienelement zum Eingeben eines Datums mit Uhrzeit (Stunde, Minute, Sekunde und Bruchteil einer Sekunde). Diese Eigenschaft wurde <a href="https://github.com/whatwg/html/issues/336">in WHATWG HTML entfernt</a>.</li> +</ul> + +<dl> + <dt> + <h2 id="Attribute">Attribute</h2> + + <h3 id="Globale_<input>-Attribute">Globale <input>-Attribute</h3> + </dt> +</dl> + +<p>Dieser Abschnitt beschreibt die für alle Arten des <code>input</code>-Elements verfügbaren Attribute. Nicht-globale Attribute – und globale, die sich bei unterschiedlichen <code>input</code>-Elementen anders verhalten – werden bei diesen Elementen behandelt.</p> + +<div class="note"> +<p><strong>Bemerkung</strong>: Das gilt auch für die globalen HTML-Attribute</p> +</div> + +<ul> + <li>Ein zulässiger MIME-Typ ohne Erweiterungen</li> + <li><code>audio/*</code> für Klang-Dateien {{HTMLVersionInline("5")}}</li> + <li><code>video/*</code> für Video-Dateien {{HTMLVersionInline("5")}}</li> + <li><code>image/*</code> für Bild-dateien {{HTMLVersionInline("5")}}</li> +</ul> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Die Art des Bedienelements. Siehe {{anch("Arten des <input>-Elements")}} für die einzelnen Typen. </dd> + <dt>{{htmlattrdef("accept")}}</dt> + <dd>Ist der Wert des <strong>type</strong>-Attributes <code>file</code>, beschreibt dieses Attribut die Art der Dateien, die der Server akzeptiert. Sonst wird es ignoriert. Der Wert muss eine durch Kommata getrennte Liste eindeutiger Werte sein:</dd> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>Ein einzelnes Zeichen, dass der Benutzer drücken kann, um den Fokus zu diesem Feld zu bewegen. Dieses Attribute ist in HTML5 global.</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Definiert einen "Aktionstipp", der festlegt wie die Eingabetaste auf Geräten mit virtueller Tastatur erscheint. Zulässige Werte sind <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> und <code>send</code>. Sie werden automatisch der passenden Zeichenkette zugeordnet. Groß-/Kleinschreibung spielt keine Rolle.</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>Dieses Attribut ist nicht standardisiert. <a href="https://developers.google.com/web/updates/2015/04/autocapitalize">Chrome</a> und iOS Safari Mobile kontrollieren damit, ob und wie eingegebener Text automatisch in Großbuchstaben gewandelt wird. Die nicht veralteten Werte sind ab IOS 5 verfügbar. Zulässige Werte sind: + <ul> + <li><code>none</code>: Automatische Großschreibung abschalten.</li> + <li><code>sentences</code>: Satzanfänge automatisch groß schreiben.</li> + <li><code>words</code>: Wortanfänge automatisch groß schreiben.</li> + <li><code>characters</code>: Alles automatisch großschreiben.</li> + <li><code>on</code>: {{deprecated_inline}} Seit iOS 5 veraltet.</li> + <li><code>off</code>: {{deprecated_inline}} Seit iOS 5 veraltet.</li> + </ul> + <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize"><code>autocapitalize</code> documentation</a> in der Safari HTML Reference.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>Dieses Attribute gibt an, ob der Browser den Wert des Eingabeelements automatisch vervollständigen kann. </dd> + <dd>Zulässige Werte sind: + <ul> + <li><code>off</code>: Der Anwender muss jedesmal einen Wert in dieses Feld eintragen oder das Dokument stellt ein eigenes Verfahren für das Vervollständigen bereit. Der Browser vervollständigt das Feld nicht automatisch.</li> + <li><code>on</code>: Der Browser kann den Wert automatisch vervollständigen, ausgehend von dem, was der Benutzer in der Vergangenheit eingetragen hat. Dieser Wert gibt jedoch keinen Hinweis über die erwarteten Eingaben.</li> + <li><code>name</code>: Vollständiger Name.</li> + <li><code>honorific-prefix: Titel oder Anrede</code> (z.B. "Herr", "Frau", "Dr."</li> + <li><code>given-name</code>: Rufname.</li> + <li><code>additional-name</code>: Weitere Vornamen.</li> + <li><code>family-name</code>: Nachname.</li> + <li><code>honorific-suffix</code>: Namensanhängel (z.B. "Jr.", "B.Sc.", "II").</li> + <li><code>nickname: Spitzname</code></li> + <li><code>email</code>: E-Mail-Adresse</li> + <li><code>username</code>: Nutzername</li> + <li><code>new-password</code>: Ein neues Passwort (z.B. beim Erzeugen eines neuen Accounts oder beim Ändern eines Passworts).</li> + <li><code>current-password</code></li> + <li><code>organization-title</code>: Berufsbezeichnung (z.B. "Software-Ingenieur", "Senior Vice President", "Stellvertretender Direktor").</li> + <li><code>organization</code></li> + <li><code>street-address</code>: Adresse</li> + <li><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code>, <code>address-level4</code>, <code>address-level3</code>, <code>address-level2</code>, <code>address-level1</code></li> + <li><code>country</code></li> + <li><code>country-name</code></li> + <li><code>postal-code: Postleitzahl</code></li> + <li><code>cc-name</code>: Vollständiger Name wie auf dem Zahlungsinstrument angegeben.</li> + <li><code>cc-given-name</code></li> + <li><code>cc-additional-name</code></li> + <li><code>cc-family-name</code></li> + <li><code>cc-number</code>: Code, der das Zahlungsinstrument identifiziert (z.B. die Kreditkartennummer).</li> + <li><code>cc-exp:</code> Ablaufdatum des Zahlungsinstruments.</li> + <li><code>cc-exp-month</code></li> + <li><code>cc-exp-year</code></li> + <li><code>cc-csc</code>: Sicherheitscode des Zahlungsinstruments.</li> + <li><code>cc-type</code>: Art des Zahlungsinstruments (e.g. Visa).</li> + <li><code>transaction-currency</code></li> + <li><code>transaction-amount</code></li> + <li><code>language</code>: Bevorzugte Sprache, gültiges BCP 47 Sprach-Tag.</li> + <li><code>bday: Geburtsdatum</code></li> + <li><code>bday-day</code></li> + <li><code>bday-month</code></li> + <li><code>bday-year</code></li> + <li><code>sex</code>: Geschlechtliche Identität (z.B. weiblich), beliebiger Text ohne Zeilenumbrüche.</li> + <li><code>tel</code>: Telefonnummer</li> + <li><code>url</code>: Homepage oder andere Webseite, die zur Firma, Person, Adresse oder der Kontaktinformation in den anderen mit diesem Feld verbundenen Feldern gehört.</li> + <li><code>photo</code>: Foto, Icon oder anderes Bild, das zur Firma, Person, Adresse oder der Kontaktinformation in den anderen mit diesem Feld verbundenen Feldern gehört.</li> + </ul> + + <p>Der <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG Standard</a> enthält weitere Details zu diesem Thema</p> + + <p>Ist <strong>autocomplete</strong> für ein Eingabeelement nicht angegeben, verwendet der Browser das <strong>autocomplete</strong>-Attribut des Formular-Eigentümers für dieses Element. Der Formular-Eigentümer ist entweder das <code>form</code>-Element, von dem dieses <code>input</code>-Element abstammt oder das <code>form</code>-Element, dessen <strong>id</strong> im <strong>form</strong>-Attribut des Eingabelements angegeben ist. Mehr Informationen dazu bei {{htmlattrxref("autocomplete", "form")}} in {{HTMLElement("form")}}.</p> + + <p>Das <strong>autocomplete</strong>-Attribute kontrolliert auch, ob Firefox (anders als andere Browser) die Atribute <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">disabled und checked eines Eingabeelements zwischen Ladevorgängen der Seite</a> erhält. Diese Funktion ist normalerweise aktiv, es wird durch Setzen von <strong>autocomplete</strong> auf <code>off</code> abgeschaltet. Das gilt auch für solche Eingabefelder, für die das <strong>autocomplete</strong>-Attribut normalerweise wegen des Werts von <strong>type</strong> nicht wirkt. Siehe {{bug(654072)}}.</p> + + <p>Bei den meisten modernen Browsern (einschließlich Firefox 38+, Google Chrome 34+, IE11+) verhindert das Setzen von <strong>autocomplete</strong> nicht, dass der Passwort-Manager dem Nutzer anbietet, seine Login-Daten zu speichern und gegebenenfalls anschließend automatisch einzutragen. Siehe <a href="https://developer.mozilla.org/de/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</p> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>Dieses boolesche Attribut gibt an, dass ein Eingabeelement den Fokus bekommt, wenn die Seite lädt, es sei denn, der Nutzer wechselt ihn, etwa durch Tippen in ein anderes Feld. Nur ein Form-Element in einem Dokument darf das <code><strong>autofocus</strong></code>-Attribut besitzen. Es kann nicht gesetzt werden, wenn das <strong><code>type</code></strong>-Attribut <code>hidden</code> ist. Das heißt, man kann den Fokus nicht automatisch auf ein unsichtbares Element setzen. + <div class="note"><strong>Bemerkung</strong>: Der Einsatz des <strong><code>autofocus</code></strong>-Attributs kann für Nutzer assistiver Technologien (Screenreader etc.) eine <strong>Barriere</strong> darstellen, da Inhalte der Seite übersprungen werden, ohne erfasst werden zu können. Dies kann damit umgangen werden, indem <a href="http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/">zusätzlicher beschreibender Text</a> hinzugefügt wird.</div> + </dd> + <dt>{{htmlattrdef("capture")}}</dt> + <dd> + <p>Ist das <strong>type-</strong>Attribute <code>file</code>, weist das Vorhandensein dieses boolschen Attributs darauf hin, dass das direkte Mitschneiden von Medien per <a href="https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism">media capture mechanism</a> bevorzugt ist.</p> + </dd> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>Ist das <strong>type</strong>-Attribute <code>radio</code> oder <code>checkbox</code>, setzt dieses boolsche Attribut das Element auf vorausgewählt. Sonst wird das Attribut ignoriert.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Dieses boolsche Attribut gewährleistet, dass der Nutzer mit dem Eingabeelement nicht interagieren kann. Insbesondere In particular erhalten so abgeschaltete Elemente <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#enabling-and-disabling-form-controls">keine Click-Events</a>. Außerdem wird der Wert eines abgeschalteten Elements beim Übertragen des Formulars nicht übermittelt. Das Attribute wird ignoriert, wenn das <strong>type</strong>-Attribut den Wert <code>hidden</code> hat.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>Das <code>form</code>-Element, zu dem dieses Eingabeelement gehört (sein "Formulareigentümer"). Der Wert dieses Attributs muss die <strong>id</strong> eines {{HTMLElement("form")}}-Elements im selben Dokument sein. Fehlt das Attribut, muss das Eingabeelement Abkömmling eines {{HTMLElement("form")}}-Elements sein. Das Attribut ermöglicht es, Eingabeelemente irgendwo in einem Dokument zu platzieren, nicht nur als Abkömmlinge eines <code>form</code>-Elements. Ein Eingabeelement darf nur zu einem Formular gehören.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the height of the image displayed for the button.</dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are: + <ul> + <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li> + <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li> + <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li> + <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li> + <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li> + <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number"></li> + <li><code>tel</code>: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.</li> + <li><code>email</code>: Email input. Use <input type="email"> if possible instead.</li> + <li><code>url</code>: URL input. Use <input type="url"> if possible instead.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> + <dd>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the <strong>type</strong> attribute's value is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</dd> + <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> + <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the <strong>size</strong> attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.</dd> + <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> + <dd>The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd> + <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.</dd> + <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the <strong>type</strong> attribute is set to <code>email</code> or <code>file</code>; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> + <dd>A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.</dd> + <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. + <div class="note"><strong>Note:</strong> Do not use the <code>placeholder</code> attribute instead of a {{HTMLElement("label")}} element. Their purposes are different: the {{HTMLElement("label")}} attribute describes the role of the form element; that is, it indicates what kind of information is expected, the <code>placeholder</code> attribute is a hint about the format the content should take. There are cases in which the <code>placeholder</code> attribute is never displayed to the user, so the form must be understandable without it.</div> + </dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>This Boolean attribute indicates that the user cannot modify the value of the control. + <p>{{HTMLVersionInline("5")}} This attribute is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</p> + </dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> + <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>The initial size of the control. This value is in pixels unless the value of the <strong>type</strong> attribute is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> + <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd> + <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt> + <dd>The position of the element in the tabbing navigation order for the current document.</dd> + <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>The name of a {{HTMLElement("map")}} element to as an image map.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.<br> + Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<h3 id="File_inputs">File inputs</h3> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an {{HTMLElement("input")}} element of type "file" opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p> +</div> + +<p>You can't set the value of a file picker from a script; doing something like the following has no effect:</p> + +<pre class="brush: js">var e = getElementById("someFileInputElement"); +e.value = "foo"; +</pre> + +<h3 id="Error_messages">Error messages</h3> + +<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p> + +<pre class="brush: html"><input type="email" x-moz-errormessage="Please specify a valid email address."> +</pre> + +<p>Note, however, that this is not standard and will not have an effect on other browsers.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="A_simple_input_box">A simple input box</h3> + +<pre class="brush: html"><!-- A basic input --> +<input type="text" name="input" value="Type here"> +</pre> + +<p><input></p> + +<h3 id="A_common_use-case_scenario">A common use-case scenario</h3> + +<pre class="brush: html"><!-- A common form that includes input tags --> +<form action="getform.php" method="get"> + First name: <input type="text" name="first_name" /><br /> + Last name: <input type="text" name="last_name" /><br /> + E-mail: <input type="email" name="user_email" /><br /> +<input type="submit" value="Submit" /> +</form> +</pre> + +<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3> + +<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p> + +<pre class="brush: html"><input type="text" mozactionhint="next" name="sometext" /> +</pre> + +<p>The result is:</p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></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>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2 or earlier</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=button</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=color</td> + <td>21.0</td> + <td> + <p>{{CompatGeckoDesktop("29.0")}} (Not for Windows Touch yet)</p> + </td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>type=date</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=datetime</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=email</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=file</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3.02</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=hidden</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=image</td> + <td>1.0</td> + <td>Gecko 2.0 only sends x and y coordinates when clicked, not longer the name/value of the element</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=month</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=number</td> + <td>6.0 (Localization in Chrome 11)</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>10<br> + (recognized but no UI)</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=password</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=radio</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=range</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("23.0")}}</td> + <td>10</td> + <td>10.62 (11.01 added support for a default value)</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=reset</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=search</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=submit</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=tel</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=text</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=time</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=url</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=week</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>accept=[MIME type]</td> + <td>8.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following audio file extensions: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following video file extensions: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following image file extensions: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>mozactionhint</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>17.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>5</td> + <td>9.6</td> + <td>5.2</td> + </tr> + <tr> + <td>autofocus</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td>checked</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>disabled</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>form</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formenctype</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>5.0 (in 6.0 only worked with HTML5 doctype, validation support in 7.0 was disabled and re-enabled in 10.0)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>height</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>inputmode</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>list</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>max</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>min</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>1.0 (supported for type=file and type=email as of 5.0)</td> + <td>{{CompatGeckoDesktop("1.9.2")}} for <strong>type</strong>=file<br> + {{CompatVersionUnknown}} for <strong>type</strong>=email</td> + <td>10</td> + <td>1.0 (10.62 support for type=file and as of 11.01 type=email)</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.00</td> + <td>5.0</td> + </tr> + <tr> + <td>readonly</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (missing for <strong>type</strong> of <code>checkbox</code>, <code>radio</code>)</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>required</td> + <td>5.0 (support for select element as of 10)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>size</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>spellcheck</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + <tr> + <td>src</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>step</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>tabindex</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (elements with tabindex > 0 are not navigated)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=button</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=color</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=date</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=email</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=file</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=hidden</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=image</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=month</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=number</td> + <td>2.3 (no validation but gives a specific keyboard)</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=password</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=radio</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=range</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=reset</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=search</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>4.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=submit</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=tel</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=text</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=time</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=url</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=week</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>accept=[MIME type]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autofocus</td> + <td>3.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>checked</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>disabled</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>form</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formenctype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>height</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>list</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>max</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("556010")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>min</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("556010")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>readonly</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>size</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>spellcheck</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>src</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>step</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("556009")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>tabindex</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>Starting in Gecko 9.0 {{geckoRelease("9.0")}}, Firefox for Android lets users capture images using their camera and upload them, without having to leave the browser. Web developers can implement this feature by simply specifying setting the <code>accept</code> attribute's value to "image/*" on their <code>file</code> input, like this:</p> + +<p><code><input type="file" accept="image/*"></code></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> +</ul> |