tag:forum.selfhtml.org,2005:/self Submit-Button mit CSS definieren – SELFHTML-Forum 2013-02-17T07:46:13Z https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571905#m1571905 Lydia 2013-02-13T20:08:25Z 2013-02-13T20:08:25Z Submit-Button mit CSS definieren <p>Hallo,<br> ich habe mit CSS einen Buton erstellt:<br> <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Senden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code><br> mit den entsprechenden Angaben in CSS.</p> <p>Jetzt möchte ich diesen Submit-Buttons als Sende-Button in einem Formular verwenden.<br> Bisher habe ich aber nur die Varianten:<br> <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>absende.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Absenden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code><br> und<br> <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> Absenden <span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code><br> gefunden.<br> Wie kann ich aber o.g. div verwenden?</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571930#m1571930 Matthias Apsel webmaster@billiger-im-urlaub.de http://alternativ-tankstelle.de 2013-02-13T20:18:22Z 2013-02-13T20:18:22Z Submit-Button mit CSS definieren <p>Om nah hoo pez nyeetz, Lydia!</p> <p>div ist ein Element ohne semantische Bedeutung. input hingegen sagt dem Browser, hier kommt ein Element, was der Interaktion dient. Siehe auch <a href="http://blog.selfhtml.org" rel="noopener noreferrer">blog.selfhtml.org</a></p> <p>Lösung: Gestalte das input-Element wie das div.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571929#m1571929 Matze 2013-02-13T20:18:46Z 2013-02-13T20:18:46Z Submit-Button mit CSS definieren <p>Hallo!</p> <blockquote> <p>ich habe mit CSS einen Buton erstellt:<br> <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Senden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></p> </blockquote> <p>Du hast keinen Button mit CSS erstellt sondern ein div in HTML mit der Klasse "button".</p> <blockquote> <p>Jetzt möchte ich diesen Submit-Buttons als Sende-Button in einem Formular verwenden.</p> </blockquote> <p>Es ist immernoch ein div.</p> <blockquote> <p>Wie kann ich aber o.g. div verwenden?</p> </blockquote> <p>Wieso willst du ein div verwenden? Du kannst dein CSS auch auf ein input-Element anwenden.</p> <p>Grüße, Matze</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571906#m1571906 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2013-02-14T08:54:15Z 2013-02-14T08:54:15Z Submit-Button mit CSS definieren <p>@@Lydia:</p> <p>nuqneH</p> <blockquote> <p>Bisher habe ich aber nur die Varianten:<br> <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>absende.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Absenden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code><br> und<br> <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> Absenden <span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code><br> gefunden.</p> </blockquote> <p><code class="language-html"><[ref:self812;html/formulare/klickbuttons.htm#modern@title=button] type="submit">Absenden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code> ist dir entgangen?</p> <blockquote> <p>Wie kann ich aber o.g. div verwenden?</p> </blockquote> <p>Nicht.</p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571907#m1571907 Lydia 2013-02-15T08:35:51Z 2013-02-15T08:35:51Z Submit-Button mit CSS definieren <blockquote> <p><code class="language-html"><[ref:self812;html/formulare/klickbuttons.htm#modern@title=button] type="submit">Absenden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code> ist dir entgangen?</p> </blockquote> <p>In dem Beispiel wird aber ein Bild verwendet und das möchte ich ja gerade nicht.</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571908#m1571908 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2013-02-15T08:48:29Z 2013-02-15T08:48:29Z Submit-Button mit CSS definieren <p>@@Lydia:</p> <p>nuqneH</p> <blockquote> <blockquote> <p><code class="language-html"><[ref:self812;html/formulare/klickbuttons.htm#modern@title=button] type="submit">Absenden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code> ist dir entgangen?</p> </blockquote> <p>In dem Beispiel wird aber ein Bild verwendet</p> </blockquote> <p>In meinem nicht.</p> <blockquote> <p>und das möchte ich ja gerade nicht.</p> </blockquote> <p>Musst du ja auch nicht. Wie SELFHTML sagt: „Solche Buttons sind flexibler als herkömmliche Buttons, denn sie dürfen auch einen durch HTML definierten Inhalt haben, etwa eine Grafik.“</p> <p>„Dürfen“, nicht „müssen“. Der Inhalt eines button-Elements kann vieles sein, auch einfach nur Text.</p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571909#m1571909 Lydia 2013-02-15T13:14:55Z 2013-02-15T13:14:55Z Submit-Button mit CSS definieren <blockquote> <p>Musst du ja auch nicht. Wie SELFHTML sagt: „Solche Buttons sind flexibler als herkömmliche Buttons, denn sie dürfen auch einen durch HTML definierten Inhalt haben, etwa eine Grafik.“</p> <p>„Dürfen“, nicht „müssen“. Der Inhalt eines button-Elements kann vieles sein, auch einfach nur Text.</p> </blockquote> <p>Und was bedeutet dann folgendes:</p> <p>Tips and Notes</p> <p>Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571910#m1571910 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2013-02-15T13:24:00Z 2013-02-15T13:24:00Z Submit-Button mit CSS definieren <p>@@Lydia:</p> <p>nuqneH</p> <blockquote> <p>Und was bedeutet dann folgendes:<br> Note: If you use the <button> element in an HTML form, different browsers may submit different values.</p> </blockquote> <p><a href="https://forum.selfhtml.org/?t=212739&m=1453588" rel="noopener noreferrer">https://forum.selfhtml.org/?t=212739&m=1453588</a></p> <blockquote> <p>Use <input> to create buttons in an HTML form.</p> </blockquote> <p>Aus welchem Museum hast du das?</p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571911#m1571911 misterunknown marco@misterunknown.de http://selfhtml.misterunknown.de 2013-02-15T13:52:50Z 2013-02-15T13:52:50Z Submit-Button mit CSS definieren <p>Moin,</p> <blockquote> <blockquote> <p>Use <input> to create buttons in an HTML form.<br> Aus welchem Museum hast du das?</p> </blockquote> </blockquote> <p>Ich vermute <a href="http://www.w3schools.com/tags/tag_button.asp" rel="nofollow noopener noreferrer">hier her</a>.</p> <p>Grüße Marco</p> <div class="signature">-- <br> Ich spreche Spaghetticode - fließend. </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571928#m1571928 Matthias Apsel webmaster@billiger-im-urlaub.de http://alternativ-tankstelle.de 2013-02-15T14:40:35Z 2013-02-15T14:40:35Z Submit-Button mit CSS definieren <p>Om nah hoo pez nyeetz, misterunknown!</p> <blockquote> <p>Ich vermute <a href="http://www.w3schools.com/tags/tag_button.asp" rel="nofollow noopener noreferrer">hier her</a>.</p> </blockquote> <p>Dieser Beitrag wird demnächst gelöscht, damit w3schools nicht noch mehr backlinks von uns bekommt.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571913#m1571913 Lydia 2013-02-15T17:36:56Z 2013-02-15T17:36:56Z Submit-Button mit CSS definieren <blockquote> <p>Moin,</p> <blockquote> <blockquote> <p>Use <input> to create buttons in an HTML form.<br> Aus welchem Museum hast du das?</p> </blockquote> </blockquote> <p>Ich vermute <a href="http://www.w3schools.com/tags/tag_button.asp" rel="nofollow noopener noreferrer">hier her</a>.</p> <p>Grüße Marco</p> </blockquote> <p>Hallo,<br> wer sagt mir ob selfhtml oder w3schools Recht hat?</p> <p>Gibt es nicht eine Quelle, die als verbindlich anzusehen ist?<br> So ein Konsortium?</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571912#m1571912 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2013-02-15T17:53:15Z 2013-02-15T17:53:15Z Submit-Button mit CSS definieren <p>@@misterunknown:</p> <p>nuqneH</p> <blockquote> <p>Ich vermute hier her [w3schools.com].</p> </blockquote> <p><a href="http://w3fools.com" rel="nofollow noopener noreferrer">O je.</a></p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571927#m1571927 Lydia 2013-02-15T17:40:48Z 2013-02-15T17:40:48Z Submit-Button mit CSS definieren <blockquote> <blockquote> <p>Moin,</p> <blockquote> <blockquote> <p>Use <input> to create buttons in an HTML form.<br> Aus welchem Museum hast du das?</p> </blockquote> </blockquote> <p>Ich vermute <a href="http://www.w3schools.com/tags/tag_button.asp" rel="nofollow noopener noreferrer">hier her</a>.</p> <p>Grüße Marco</p> </blockquote> <p>Hallo,<br> wer sagt mir ob selfhtml oder w3schools Recht hat?</p> <p>Gibt es nicht eine Quelle, die als verbindlich anzusehen ist?<br> So ein Konsortium?</p> </blockquote> <p>Und in Selhtml gibt es ja auch wiederum Beispiele für <http://de.selfhtml.org/html/formulare/formatieren.htm#css@title=<input class=button".....></p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571914#m1571914 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2013-02-15T17:58:03Z 2013-02-15T17:58:03Z Submit-Button mit CSS definieren <p>@@Lydia:</p> <p>nuqneH</p> <blockquote> <p>wer sagt mir ob selfhtml oder w3schools Recht hat?</p> </blockquote> <p>Wer sagt dir, dass überhaupt eins von beiden recht hat?</p> <p>SELFHTML ist alt, w3schools ist <a href="http://w3fools.com/" rel="nofollow noopener noreferrer">schlecht</a>.</p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571915#m1571915 Lydia 2013-02-15T18:20:48Z 2013-02-15T18:20:48Z Submit-Button mit CSS definieren <p>Au weia!</p> <blockquote> <p>SELFHTML ist alt, w3schools ist <a href="http://w3fools.com/" rel="nofollow noopener noreferrer">schlecht</a>.</p> </blockquote> <p>... und nun ruhte meine Hoffunung <a href="http://www.w3.org/Style/CSS/Buttons/" rel="nofollow noopener noreferrer">w3.org:CSS Buttons</a>,<br> allerdings dort nur ein Verweis:</p> <p>CSS Buttons<br> Für weitere Informationen über CSS, dessen Spezifikationen und für Beispiele oder Anleitungen besuchen Sie bitte unsere <a href="http://www.w3.org/Style/CSS/" rel="nofollow noopener noreferrer">CSS Homepage</a>.<br> Und auf dieser <a href="http://www.w3.org/Style/CSS/" rel="nofollow noopener noreferrer">CSS Homepage</a> steht dann doch nichts über sinnvolle Button-Definitionen (oder vielleicht irgendwo versteckt?)<br> Gruß<br> Lydia</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571916#m1571916 Matze 2013-02-16T02:16:20Z 2013-02-16T02:16:20Z Submit-Button mit CSS definieren <p>Hallo!</p> <blockquote> <p>Und auf dieser <a href="http://www.w3.org/Style/CSS/" rel="nofollow noopener noreferrer">CSS Homepage</a> steht dann doch nichts über sinnvolle Button-Definitionen (oder vielleicht irgendwo versteckt?)</p> </blockquote> <p>Noch einmal: Du definierst mit CSS keinen Button! CSS ist zur Gestaltung. Wenn ein blaues Auto kaufen möchtest, suchst du auch nicht nach Lakierern, oder?<br> Nein, du suchst das Auto und bestellst es dann in blau. Also suche beim W3 nach dem Element</p> <p>CSS-Eigenschaften lassen sich (mal mehr, mal weniger sinnvoll) auf alle Elemente einer Seite anwenden. Wir sagten dir bereits, dass du die CSS-Eigenschaften deines ursprünglichen divs auch auf das Input-Element bzw. den Button anwenden kannst!</p> <p>Schau mal <a href="http://jsfiddle.net/3P24f/2/" rel="noopener noreferrer">hier</a> ist ein kleines Beispiel.</p> <p>Grüße, Matze</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571917#m1571917 Lydia 2013-02-16T09:37:32Z 2013-02-16T09:37:32Z Submit-Button mit CSS definieren <p>Hallo!</p> <blockquote> <p>Schau mal <a href="http://jsfiddle.net/3P24f/2/" rel="noopener noreferrer">hier</a> ist ein kleines Beispiel.</p> </blockquote> <p>Schönes Beispiel, wie beides zum gleichen Ergebnis führt.<br> Was aber doch mein (letztes) Problem war:<br> Welche der beiden Methoden ist die bessere, weil zukunftssicherer, sprich steht irgendwo<br> Variante x gültig seit CSS2.12,Variante y depreciated?</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571918#m1571918 Matze 2013-02-16T11:17:48Z 2013-02-16T11:17:48Z Submit-Button mit HTML definieren <p>Hallo!</p> <blockquote> <p>Welche der beiden Methoden ist die bessere, weil zukunftssicherer, sprich steht irgendwo<br> Variante x gültig seit CSS2.12,Variante y depreciated?</p> </blockquote> <p>Es geht dabei immer noch nicht um CSS! Ich ändere jetzt endlich mal den Titel des threads...<br> CSS ist es völlig egal auf welches Element du es anwendest!</p> <p>Grüße, Matze</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571919#m1571919 Lydia 2013-02-16T14:42:45Z 2013-02-16T14:42:45Z Submit-Button mit HTML definieren <p>Hallo!</p> <blockquote> <p>Es geht dabei immer noch nicht um CSS! Ich ändere jetzt endlich mal den Titel des threads...</p> </blockquote> <p>OK,<br> verstanden, die Frage aber bleibt.<br> Wenn in HTML verschiedene Wege zum selben Ergebnis führen und jemand schreibt "die Methode 1 sei vorzuziehen", so fehlt mir die Bgründung, die da lauten könnte: Mehode 2 ist veraltet, siehe ...</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571920#m1571920 Matthias Apsel webmaster@billiger-im-urlaub.de http://alternativ-tankstelle.de 2013-02-16T14:47:15Z 2013-02-16T14:47:15Z Submit-Button mit HTML definieren <p>Om nah hoo pez nyeetz, Lydia!</p> <p>Die Antwort lautet: Ein button-Element repräsentiert einen Knopf zum drücken, ein input-Element ein Element für eine Benutzereingabe. Außerdem hat button gegenüber input Vorteile, wie ich weiter oben schrieb.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571921#m1571921 Der Martin self@kennst.net 2013-02-16T15:48:51Z 2013-02-16T15:48:51Z Submit-Button mit HTML definieren <p>Hallo,</p> <blockquote> <p>Die Antwort lautet: Ein button-Element repräsentiert einen Knopf zum drücken, ein input-Element ein Element für eine Benutzereingabe.</p> </blockquote> <p>das ist richtig, also ist input die Obermenge, denn "einen Knopf drücken" ist ja schließlich auch eine Benutzereingabe. Daher finde ich es vom Standpunkt der Semantik schon falsch, dass man "damals" Listen und mehrzeilige Eingabefelder als eigenständige Elemente definiert hat und alle anderen Form Controls als Varianten des Basiselements input.<br> Okay, ich sehe wohl das formale syntaktische Problem, dass die beiden erstgenannten einen Inhalt haben, die anderen nicht (z.B. einzeiliges Eingabefeld, Checkbox, Radiobutton, File-Upload). Aber schon das textarea-Element ist irgendwie ein Hybrid. Es hat eine value-Eigenschaft, übermittelt seinen Wert auch genauso wie die anderen Controls, hat aber im Markup kein value-Attribut, obwohl theoretisch nichts gegen <input type="multiline" value="Enter\nmultiple\nlines\nof\ntext\nhere"> spräche.</p> <blockquote> <p>Außerdem hat button gegenüber input Vorteile, wie ich weiter oben schrieb.</p> </blockquote> <p>Ja. Trotzdem würde ich überall da, wo ich diese erweiterten Möglichkeiten nicht brauche, ein <input type="submit"> vorziehen, weil ich es einfach konsequenter finde. Beim Geschirr bevorzugt man ja auch die Kaffeetassen im gleichen Dekor wie die Kuchenteller, obwohl sie eine andere Funktion haben.</p> <p>Ciao,<br>  Martin</p> <div class="signature">-- <br> Ich stehe eigentlich gern früh auf.<br> Außer morgens.<br> Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571926#m1571926 Matthias Apsel webmaster@billiger-im-urlaub.de http://alternativ-tankstelle.de 2013-02-16T15:58:51Z 2013-02-16T15:58:51Z Submit-Button mit HTML definieren <p>Om nah hoo pez nyeetz, Der Martin!</p> <p>Meine Sicht auf die Semantik:</p> <p>Button soll eine Aktion auslösen. Input soll lediglich die Eingaben aufnehmen.</p> <p>Deine anderen Einwände ("damals") unterstütze ich.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571923#m1571923 Kai345 kai345@knrs.de http://knrs.de 2013-02-16T18:12:38Z 2013-02-16T18:12:38Z Submit-Button mit HTML definieren <p>[latex]Mae  govannen![/latex]</p> <blockquote> <blockquote> <p>Außerdem hat button gegenüber input Vorteile, wie ich weiter oben schrieb.</p> </blockquote> <p>Ja. Trotzdem würde ich überall da, wo ich diese erweiterten Möglichkeiten nicht brauche, ein <input type="submit"> vorziehen, weil ich es einfach konsequenter finde.</p> </blockquote> <p>Ich nicht. Ganz im Gegenteil: Das Element heißt "input", man kann aber weder mit type="submit" noch mit type="button" irgendetwas eingeben; lediglich etwas auslösen. Insofern habe ich diese beiden Attribut-Werte für type schon immer ziemlich seltsam gefunden.</p> <p>Wie heißt es so schön in SELFHTML?</p> <p>| Ab HTML 4.0 dürfen anklickbare Buttons endlich so heißen wie sie heißen: nämlich <button>.</p> <p>Stur lächeln und winken, Männer!<br> Kai</p> <div class="signature">-- <br> <code class="language-javascript"><span class="token keyword">var</span> jQuery <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>hit<span class="token punctuation">)</span><span class="token punctuation">;</span></code><br> Wir sind die Schlumpf. Widerschlumpf ist schlumpflos. Wir werden Sie einschlumpfen.<br> <a href="http://selfhtml.knrs.de/#h_stylesheet" rel="nofollow noopener noreferrer">SelfHTML-Forum-Stylesheet</a><br> </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571922#m1571922 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2013-02-17T07:46:13Z 2013-02-17T07:46:13Z Submit-Button mit HTML definieren <p>@@Der Martin:</p> <p>nuqneH</p> <blockquote> <p>das ist richtig, also ist input die Obermenge, denn "einen Knopf drücken" ist ja schließlich auch eine Benutzereingabe. Daher finde ich es vom Standpunkt der Semantik schon falsch, dass man "damals" Listen und mehrzeilige Eingabefelder als eigenständige Elemente definiert hat und alle anderen Form Controls als Varianten des Basiselements input.</p> </blockquote> <p>Ich hätte für Radiobuttons und Checkboxen ein anderes Element vorgesehen als alles unter dem Sammelsurium input zusammenzufassen.</p> <p>Dass Radiobuttons und Checkboxen auch input-Elemente sind, nervt gewaltig beim Stylen: für Eingabefelder möchte man eine Breite angeben à la<br> <code class="language-css"><span class="token selector">input</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 12em <span class="token punctuation">}</span></code><br> Für Radiobuttons und Checkboxen möchte man das nicht, muss man also mit zusätzlicher Regel wieder überschreiben<br> <code class="language-css"><span class="token selector">input[type="radio"], input[type="checkbox"]</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span> auto <span class="token punctuation">}</span></code></p> <p>Oder gleich so:<br> <code class="language-css"><span class="token selector">input:not([type="radio"]):not([type="checkbox"])</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 12em <span class="token punctuation">}</span></code></p> <blockquote> <p>Aber schon das textarea-Element ist irgendwie ein Hybrid. […] obwohl theoretisch nichts gegen <input type="multiline" value="Enter\nmultiple\nlines\nof\ntext\nhere"> spräche.</p> </blockquote> <p>Auch das andersrum: <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">singleline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>singleline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> statt input-Element.</p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571925#m1571925 Lydia 2013-02-16T18:32:04Z 2013-02-16T18:32:04Z Submit-Button mit HTML definieren <p>Hallo!<br> Ich sehe schon, es gibt verschiedene Meinungen, aber offensichtlich keine Aussage der "Macher" von html.</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571924#m1571924 Der Martin self@kennst.net 2013-02-16T19:09:51Z 2013-02-16T19:09:51Z Submit-Button mit HTML definieren <p>Hi,</p> <blockquote> <blockquote> <p>Trotzdem würde ich überall da, wo ich diese erweiterten Möglichkeiten nicht brauche, ein <input type="submit"> vorziehen, weil ich es einfach konsequenter finde.<br> Ich nicht. Ganz im Gegenteil: Das Element heißt "input", man kann aber weder mit type="submit" noch mit type="button" irgendetwas eingeben; lediglich etwas auslösen.</p> </blockquote> </blockquote> <p>ja, und auch das ist aus meiner Sicht eine Eingabe. Oder nenn es Interaktion, das ist für mich dasselbe. Auch das Drücken der Esc-Taste betrachte ich als Eingabe.</p> <p>In der GUI-Programmierung abseits von HTML heißen die Dinger gern "Controls", das ist sicher ein besserer Sammelbegriff als "Inputs". Aber dennoch gehören Eingabefelder, Checkboxen, Radiobuttons, Treeviews, Dropdow-Listen, Schieberegler, Buttons und all dieses Zeugs meiner Ansicht nach _einer_ Familie an, und dann sollten sie auch einen gemeinsamen Familiennamen haben.</p> <p>Es ist ja auch völlig egal, welche Meinung ich hier vertrete; die Bezeichnungen der HTML-Elemente sind nun mal so, wie sie sind, daran ändere ich nichts. Ungeschickt finde ich es trotzdem.</p> <p>Ciao,<br>  Martin</p> <div class="signature">-- <br> ... und der FDP-Wähler gibt seine Stimme der FDP.<br>    (Faszinierende Erkenntnis meines Gemeinschaftskunde-Lehrers, 9. Schuljahr)<br> Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571931#m1571931 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2013-02-14T08:34:36Z 2013-02-14T08:34:36Z Submit-Button mit CSS definieren <p>@@Matthias Apsel:</p> <p>nuqneH</p> <blockquote> <p>div ist ein Element ohne semantische Bedeutung.</p> </blockquote> <p>Ja. Deshalb sollte – wenn man schon ein solches verwendet und die Interaktion per JavaScript umgesetzt wird – das WAI-ARIA-Attribut <a href="http://www.paciellogroup.com/blog/misc/ARIA/atmedia2008/" rel="nofollow noopener noreferrer">@role="button</a>" nicht fehlen.</p> <blockquote> <p>input hingegen sagt dem Browser, hier kommt ein Element, was der Interaktion dient.</p> </blockquote> <p>select auch.</p> <blockquote> <p>Lösung: Gestalte das input-Element wie das div.</p> </blockquote> <p>Wieso 'input'? input[@type="button"] und input[@type="submit"] sollten endlich mal zu Grabe getragen werden.</p> <p>Für Buttons gibt es ein spezielles Element: button.</p> <p>(Vorsicht Falle: Bei fehlendem @type-Attribut ist der Wert "submit" Default, nicht "button".)</p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571932#m1571932 Matthias Apsel webmaster@billiger-im-urlaub.de http://alternativ-tankstelle.de 2013-02-14T10:59:58Z 2013-02-14T10:59:58Z Submit-Button mit CSS definieren <p>Om nah hoo pez nyeetz, Gunnar Bittersmann!</p> <blockquote> <p>Wieso 'input'? input[@type="button"] und input[@type="submit"] sollten endlich mal zu Grabe getragen werden.</p> <p>Für Buttons gibt es ein spezielles Element: button.</p> </blockquote> <p>Ja. Button hat noch den Vorteil, kein leeres Element zu sein, sodass er also etwa mit "Klick mich <strong>jetzt</strong> beschriftet werden kann und die Pseudoelemente <a href="http://forum.de.selfhtml.org/archiv/2011/2/t203313/#m1374406" rel="nofollow noopener noreferrer">korrekt dargestellt werden</a>.</p> <p>Aber - die alten IEs, falls man sie unterstützen muss, brauchen serverseitig eine extra Auswertung.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571933#m1571933 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2013-02-14T13:03:16Z 2013-02-14T13:03:16Z Submit-Button mit CSS definieren <p>@@Matthias Apsel:</p> <p>nuqneH</p> <blockquote> <p>Aber - die alten IEs, falls man sie unterstützen muss, brauchen serverseitig eine extra Auswertung.</p> </blockquote> <p>Bei mehreren verschiedenen Submit-Buttons in einem Formular, was eher die Ausnahme als die Regel sein dürfte.</p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571934#m1571934 Lydia 2013-02-14T14:18:28Z 2013-02-14T14:18:28Z Submit-Button mit CSS definieren <p>@Alle:<br> Nachdem ich mir jetzt alles mehrmals durchgelesen habe, weiß ich nicht, wie ich am besten und zukunftssicher Buttons erstelle.</p> https://forum.selfhtml.org/self/2013/feb/13/submit-button-mit-css-definieren/1571935#m1571935 misterunknown marco@misterunknown.de http://selfhtml.misterunknown.de 2013-02-14T14:43:39Z 2013-02-14T14:43:39Z Submit-Button mit CSS definieren <p>Moin,</p> <blockquote> <p>@Alle:<br> Nachdem ich mir jetzt alles mehrmals durchgelesen habe, weiß ich nicht, wie ich am besten und zukunftssicher Buttons erstelle.</p> </blockquote> <p>Nimm am besten <a href="https://forum.selfhtml.org/?t=212739&m=1453546" rel="noopener noreferrer">diese Methode</a>. Sie ist am variabelsten und für deine Zwecke geeignet.</p> <p>Grüße Marco</p> <div class="signature">-- <br> Ich spreche Spaghetticode - fließend. </div>