nicht angemeldet
Matthias Apsel
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Matthias Apsel
Gunnar Bittersmann
Gunnar Bittersmann
Hallo,
ich habe mit CSS einen Buton erstellt:
<div class="button">Senden</div>
mit den entsprechenden Angaben in CSS.
Jetzt möchte ich diesen Submit-Buttons als Sende-Button in einem Formular verwenden.
Bisher habe ich aber nur die Varianten:
<input type="image" src="absende.gif" alt="Absenden">
und
<input type="submit" value=" Absenden ">
gefunden.
Wie kann ich aber o.g. div verwenden?
Om nah hoo pez nyeetz, Lydia!
div ist ein Element ohne semantische Bedeutung. input hingegen sagt dem Browser, hier kommt ein Element, was der Interaktion dient. Siehe auch blog.selfhtml.org
Lösung: Gestalte das input-Element wie das div.
Matthias
@@Matthias Apsel:
nuqneH
div ist ein Element ohne semantische Bedeutung.
Ja. Deshalb sollte – wenn man schon ein solches verwendet und die Interaktion per JavaScript umgesetzt wird – das WAI-ARIA-Attribut @role="button" nicht fehlen.
input hingegen sagt dem Browser, hier kommt ein Element, was der Interaktion dient.
select auch.
Lösung: Gestalte das input-Element wie das div.
Wieso 'input'? input[@type="button"] und input[@type="submit"] sollten endlich mal zu Grabe getragen werden.
Für Buttons gibt es ein spezielles Element: button.
(Vorsicht Falle: Bei fehlendem @type-Attribut ist der Wert "submit" Default, nicht "button".)
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Wieso 'input'? input[@type="button"] und input[@type="submit"] sollten endlich mal zu Grabe getragen werden.
Für Buttons gibt es ein spezielles Element: button.
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 korrekt dargestellt werden.
Aber - die alten IEs, falls man sie unterstützen muss, brauchen serverseitig eine extra Auswertung.
Matthias
@@Matthias Apsel:
nuqneH
Aber - die alten IEs, falls man sie unterstützen muss, brauchen serverseitig eine extra Auswertung.
Bei mehreren verschiedenen Submit-Buttons in einem Formular, was eher die Ausnahme als die Regel sein dürfte.
Qapla'
@Alle:
Nachdem ich mir jetzt alles mehrmals durchgelesen habe, weiß ich nicht, wie ich am besten und zukunftssicher Buttons erstelle.
Moin,
@Alle:
Nachdem ich mir jetzt alles mehrmals durchgelesen habe, weiß ich nicht, wie ich am besten und zukunftssicher Buttons erstelle.
Nimm am besten diese Methode. Sie ist am variabelsten und für deine Zwecke geeignet.
Grüße Marco
Hallo!
ich habe mit CSS einen Buton erstellt:
<div class="button">Senden</div>
Du hast keinen Button mit CSS erstellt sondern ein div in HTML mit der Klasse "button".
Jetzt möchte ich diesen Submit-Buttons als Sende-Button in einem Formular verwenden.
Es ist immernoch ein div.
Wie kann ich aber o.g. div verwenden?
Wieso willst du ein div verwenden? Du kannst dein CSS auch auf ein input-Element anwenden.
Grüße, Matze
@@Lydia:
nuqneH
Bisher habe ich aber nur die Varianten:
<input type="image" src="absende.gif" alt="Absenden">
und
<input type="submit" value=" Absenden ">
gefunden.
<[ref:self812;html/formulare/klickbuttons.htm#modern@title=button] type="submit">Absenden</button> ist dir entgangen?
Wie kann ich aber o.g. div verwenden?
Nicht.
Qapla'
<[ref:self812;html/formulare/klickbuttons.htm#modern@title=button] type="submit">Absenden</button>ist dir entgangen?
In dem Beispiel wird aber ein Bild verwendet und das möchte ich ja gerade nicht.
@@Lydia:
nuqneH
<[ref:self812;html/formulare/klickbuttons.htm#modern@title=button] type="submit">Absenden</button>ist dir entgangen?In dem Beispiel wird aber ein Bild verwendet
In meinem nicht.
und das möchte ich ja gerade nicht.
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.“
„Dürfen“, nicht „müssen“. Der Inhalt eines button-Elements kann vieles sein, auch einfach nur Text.
Qapla'
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.“
„Dürfen“, nicht „müssen“. Der Inhalt eines button-Elements kann vieles sein, auch einfach nur Text.
Und was bedeutet dann folgendes:
Tips and Notes
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.
@@Lydia:
nuqneH
Und was bedeutet dann folgendes:
Note: If you use the <button> element in an HTML form, different browsers may submit different values.
https://forum.selfhtml.org/?t=212739&m=1453588
Use <input> to create buttons in an HTML form.
Aus welchem Museum hast du das?
Qapla'
Moin,
Use <input> to create buttons in an HTML form.
Aus welchem Museum hast du das?
Ich vermute hier her.
Grüße Marco
Om nah hoo pez nyeetz, misterunknown!
Ich vermute hier her.
Dieser Beitrag wird demnächst gelöscht, damit w3schools nicht noch mehr backlinks von uns bekommt.
Matthias
Moin,
Use <input> to create buttons in an HTML form.
Aus welchem Museum hast du das?Ich vermute hier her.
Grüße Marco
Hallo,
wer sagt mir ob selfhtml oder w3schools Recht hat?
Gibt es nicht eine Quelle, die als verbindlich anzusehen ist?
So ein Konsortium?
Moin,
Use <input> to create buttons in an HTML form.
Aus welchem Museum hast du das?Ich vermute hier her.
Grüße Marco
Hallo,
wer sagt mir ob selfhtml oder w3schools Recht hat?Gibt es nicht eine Quelle, die als verbindlich anzusehen ist?
So ein Konsortium?
Und in Selhtml gibt es ja auch wiederum Beispiele für <http://de.selfhtml.org/html/formulare/formatieren.htm#css@title=<input class=button".....>
@@Lydia:
nuqneH
wer sagt mir ob selfhtml oder w3schools Recht hat?
Wer sagt dir, dass überhaupt eins von beiden recht hat?
SELFHTML ist alt, w3schools ist schlecht.
Qapla'
Au weia!
SELFHTML ist alt, w3schools ist schlecht.
... und nun ruhte meine Hoffunung w3.org:CSS Buttons,
allerdings dort nur ein Verweis:
CSS Buttons
Für weitere Informationen über CSS, dessen Spezifikationen und für Beispiele oder Anleitungen besuchen Sie bitte unsere CSS Homepage.
Und auf dieser CSS Homepage steht dann doch nichts über sinnvolle Button-Definitionen (oder vielleicht irgendwo versteckt?)
Gruß
Lydia
Hallo!
Und auf dieser CSS Homepage steht dann doch nichts über sinnvolle Button-Definitionen (oder vielleicht irgendwo versteckt?)
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?
Nein, du suchst das Auto und bestellst es dann in blau. Also suche beim W3 nach dem Element
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!
Schau mal hier ist ein kleines Beispiel.
Grüße, Matze
Hallo!
Schau mal hier ist ein kleines Beispiel.
Schönes Beispiel, wie beides zum gleichen Ergebnis führt.
Was aber doch mein (letztes) Problem war:
Welche der beiden Methoden ist die bessere, weil zukunftssicherer, sprich steht irgendwo
Variante x gültig seit CSS2.12,Variante y depreciated?
Hallo!
Welche der beiden Methoden ist die bessere, weil zukunftssicherer, sprich steht irgendwo
Variante x gültig seit CSS2.12,Variante y depreciated?
Es geht dabei immer noch nicht um CSS! Ich ändere jetzt endlich mal den Titel des threads...
CSS ist es völlig egal auf welches Element du es anwendest!
Grüße, Matze
Hallo!
Es geht dabei immer noch nicht um CSS! Ich ändere jetzt endlich mal den Titel des threads...
OK,
verstanden, die Frage aber bleibt.
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 ...
Om nah hoo pez nyeetz, Lydia!
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.
Matthias
Hallo,
Die Antwort lautet: Ein button-Element repräsentiert einen Knopf zum drücken, ein input-Element ein Element für eine Benutzereingabe.
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.
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.
Außerdem hat button gegenüber input Vorteile, wie ich weiter oben schrieb.
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.
Ciao,
Martin
Om nah hoo pez nyeetz, Der Martin!
Meine Sicht auf die Semantik:
Button soll eine Aktion auslösen. Input soll lediglich die Eingaben aufnehmen.
Deine anderen Einwände ("damals") unterstütze ich.
Matthias
[latex]Mae govannen![/latex]
Außerdem hat button gegenüber input Vorteile, wie ich weiter oben schrieb.
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.
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.
Wie heißt es so schön in SELFHTML?
| Ab HTML 4.0 dürfen anklickbare Buttons endlich so heißen wie sie heißen: nämlich <button>.
Stur lächeln und winken, Männer!
Kai
Der Martinvar jQuery = $(hit);Hallo!
Ich sehe schon, es gibt verschiedene Meinungen, aber offensichtlich keine Aussage der "Macher" von html.
Hi,
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.
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.
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.
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.
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.
Ciao,
Martin
@@Der Martin:
nuqneH
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.
Ich hätte für Radiobuttons und Checkboxen ein anderes Element vorgesehen als alles unter dem Sammelsurium input zusammenzufassen.
Dass Radiobuttons und Checkboxen auch input-Elemente sind, nervt gewaltig beim Stylen: für Eingabefelder möchte man eine Breite angeben à la
input { width: 100%; max-width: 12em }
Für Radiobuttons und Checkboxen möchte man das nicht, muss man also mit zusätzlicher Regel wieder überschreiben
input[type="radio"], input[type="checkbox"] { width: auto; max-width: auto }
Oder gleich so:
input:not([type="radio"]):not([type="checkbox"]) { width: 100%; max-width: 12em }
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.
Auch das andersrum: <textarea singleline="singleline"> statt input-Element.
Qapla'
@@misterunknown:
nuqneH
Ich vermute hier her [w3schools.com].
Qapla'