Lydia: Submit-Button mit CSS definieren

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?

  1. 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

    -- 1/z ist kein Blatt Papier.
    1. @@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'

      -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. 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

        -- 1/z ist kein Blatt Papier.
        1. @@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'

          -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          1. @Alle:
            Nachdem ich mir jetzt alles mehrmals durchgelesen habe, weiß ich nicht, wie ich am besten und zukunftssicher Buttons erstelle.

            1. 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

              -- Ich spreche Spaghetticode - fließend.
  2. 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

  3. @@Lydia:

    nuqneH

    Bisher habe ich aber nur die Varianten:
    <input type="image" src="absende.gif" alt="Absenden">
    und
    <input type="submit" value=" Absenden ">
    gefunden.

    <[button](http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern) type="submit">Absenden</button> ist dir entgangen?

    Wie kann ich aber o.g. div verwenden?

    Nicht.

    Qapla'

    -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. <[button](http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern) type="submit">Absenden</button> ist dir entgangen?

      In dem Beispiel wird aber ein Bild verwendet und das möchte ich ja gerade nicht.

      1. @@Lydia:

        nuqneH

        <[button](http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern) 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'

        -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. 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.

          1. @@Lydia:

            nuqneH

            Und was bedeutet dann folgendes:
            Note: If you use the <button> element in an HTML form, different browsers may submit different values.

            ?t=212739&m=1453588

            Use <input> to create buttons in an HTML form.

            Aus welchem Museum hast du das?

            Qapla'

            -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. Moin,

              Use <input> to create buttons in an HTML form.

              Aus welchem Museum hast du das?

              Ich vermute hier her.

              Grüße Marco

              -- Ich spreche Spaghetticode - fließend.
              1. 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

                -- 1/z ist kein Blatt Papier.
              2. 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?

                1. 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 <input class=button".....

                2. @@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'

                  -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                  1. 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

                    1. 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

                      1. 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?

                        1. 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

                          1. 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 ...

                            1. 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

                              -- 1/z ist kein Blatt Papier.
                              1. 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

                                --
                                Ich stehe eigentlich gern früh auf.
                                Außer morgens.
                                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

                                1. 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

                                  -- 1/z ist kein Blatt Papier.
                                2. Mae  govannen!

                                  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

                                  --
                                  var jQuery = $(hit);
                                  Wir sind die Schlumpf. Widerschlumpf ist schlumpflos. Wir werden Sie einschlumpfen.

                                  SelfHTML-Forum-Stylesheet

                                  1. Hallo!
                                    Ich sehe schon, es gibt verschiedene Meinungen, aber offensichtlich keine Aussage der "Macher" von html.

                                  2. 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

                                    --
                                    ... und der FDP-Wähler gibt seine Stimme der FDP.
                                       (Faszinierende Erkenntnis meines Gemeinschaftskunde-Lehrers, 9. Schuljahr)
                                    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

                                3. @@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'

                                  -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              3. @@misterunknown:

                nuqneH

                Ich vermute hier her [w3schools.com].

                O je.

                Qapla'

                -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)