Gestalten Sie die Eingabe- und Senden-Schaltfläche mit CSS

1. Senden-Schaltfläche in HTML erstellen
2. Eingabeschaltfläche in HTML erstellen
3. Style Input und Submit Button mit CSS
4. Abschluss

Eine Senden-Schaltfläche ist eine Art von Schaltfläche, die zum Senden von Daten in ein Formular verwendet wird. Es wird normalerweise am Ende eines Formulars platziert, nachdem alle anderen Felder ausgefüllt wurden. Das Formular wird zur Verarbeitung an den Server übertragen, wenn auf die Schaltfläche Senden geklickt wird.

Die Syntax der Submit-Schaltfläche ist ähnlich wie bei anderen Schaltflächen in HTML, aber der Typ sollte submit sein. In diesem Artikel erfahren Sie, wie Sie Eingaben formatieren und Schaltflächen in HTML mit CSS senden.

Senden-Schaltfläche in HTML erstellen

Es gibt zwei Möglichkeiten, einen Submit-Button zu erstellen. Die erste Möglichkeit besteht darin, das Tag <input> mit dem Attribut type="submit" zu verwenden.

Dadurch wird eine Schaltfläche erstellt, die beim Klicken das Formular absendet.

<button type='submit'>

Die zweite Möglichkeit ist die Verwendung des <button>-Tags. Dadurch wird eine Schaltfläche erstellt, die mit HTML angepasst werden kann.

Mit dem Tag <button> kann das Formular abgeschickt oder eine JavaScript-Funktion ausgelöst werden.

<input type="submit" value="Submit"/>

Eingabeschaltfläche in HTML erstellen

Eine Eingabeschaltfläche ist ein einfaches Steuerelement, mit dem der Benutzer klicken und eine Aktion auswählen kann. Sie können eine Eingabeschaltfläche mit dem Element <input> erstellen, wobei das type-Attribut auf button gesetzt ist.

<input type="button" value="Click me!">

Wenn der Benutzer auf die Schaltfläche klickt, wird die der Schaltfläche zugeordnete Aktion ausgeführt. In den meisten Fällen wird die Aktion in Form eines JavaScript-Event-Handlers definiert. Sie können beispielsweise eine Schaltfläche definieren, die beim Klicken eine Warnmeldung anzeigt:

<input type="button" value="Click me!" onclick="alert('Hello world!')">

Neben dem value-Attribut können Sie die Beschriftung der Schaltfläche auch mit dem label-Attribut festlegen.

Zum Beispiel

<input type="button" value="Click me!" label="Hello world!">

Sie können auch CSS verwenden, um die Eingabeschaltfläche zu gestalten. Sie können beispielsweise die Breite, Höhe, Farbe usw. der Schaltfläche festlegen.

Style Input und Submit Button mit CSS

Wenn es darum geht, Eingaben zu gestalten und Schaltflächen mit CSS einzureichen, müssen Sie sicherstellen, dass sie die gleiche Größe, das gleiche Farbschema und alle anderen Stileigenschaften wählen, um die Konsistenz im Design zu wahren.

Eingabeschaltfläche mit CSS gestalten

Die Eingabeschaltfläche ist ein grundlegendes Element jeder Webseite oder Anwendung. Es ermöglicht dem Benutzer, Informationen zu übermitteln oder Maßnahmen zu ergreifen, und wird mit den Standardstilen des Browsers gestaltet. Sie können die Standardstile jedoch mit CSS überschreiben.

Es gibt verschiedene Möglichkeiten, die Eingabeschaltfläche mit CSS zu gestalten. Der typischste Weg ist die Verwendung der CSS Pseudoklassen: hover, :active und :focus. Diese Pseudo-Klassen ändern den Stil der Schaltfläche, wenn der Benutzer mit der Maus darüber fährt, darauf klickt oder den Fokus hat.

Eine andere Möglichkeit, die Eingabeschaltfläche zu stylen, besteht darin, die CSS3-Eigenschaften box-shadow und border-radius zu verwenden. Mit diesen Eigenschaften können Sie einen Schatten um die Schaltfläche hinzufügen und die Schaltfläche rund machen.

Schließlich können Sie die CSS3-Eigenschaft transformieren, um die Schaltfläche zu skalieren, zu drehen oder zu neigen. Dadurch können aufregende Effekte entstehen, z. B. dass der Button größer wird, wenn der Benutzer mit der Maus darüber fährt.

Alle diese Methoden können verwendet werden, um einzigartige und stilvolle Eingabeschaltflächen zu erstellen.

Senden-Button mit CSS gestalten

Ein Ansatz, um einen Senden-Button mit den Ihnen zur Verfügung stehenden CSS-Eigenschaften zu gestalten. Dies kann eine ideale Möglichkeit sein, Ihrer Schaltfläche ein einzigartiges Aussehen zu verleihen, das zum Gesamtstil Ihrer Website passt.

Ein anderer Ansatz besteht darin, den Container der Schaltfläche zu stylen, wodurch Sie mehr Kontrolle über das Gesamterscheinungsbild der Schaltfläche erhalten. Dies kann verwendet werden, wenn Sie der Schaltfläche ein Hintergrundbild oder ein anderes Element hinzufügen möchten.

Codebeispiel

<!DOCTYPE html>
<html>
    <head>
        <style>
            input[type="submit"] {
                position: absolute;
                top: 65%;
                left: 25%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #f1f1f1;
                color: black;
                font-size: 16px;
                padding: 16px 30px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                text-align: center;
                border: 2px solid #4caf50; /* Green */
                box-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 21px 0 rgba(0, 0, 0, 0.19);
            }

            input[type="submit"]:hover {
                background-color: #4caf50; /* Green */
                color: white;
            }

            input[type="text"] {
                width: 40%;
                padding: 14px 30px;
                margin: 9px 0;
                box-sizing: border-box;
            }
            input[type="textarea"] {
                padding: 36px 40px;
            }
        </style>
    </head>

    <body>
        <h2>Styling form buttons</h2>
        <div class="form-center">
            <form action="#" method="post">
                Name <input type="text" placeholder="Full name" />
                <br />
                Email <input type="text" placeholder="Email address" />
                <br />
                Date <input type="text" placeholder="Date" />
                <input type="submit" value="Submit" />
            </form>
        </div>
    </body>
</html>

Abschluss

Sowohl die Submit-Schaltfläche als auch die Eingabefelder sind Elemente; Der Unterschied besteht darin, dass das Eingabefeld verwendet wird, um die Dateneingabe anzuzeigen, während die Senden-Schaltfläche verwendet werden kann, um Daten an das Formular zu senden. Um Ihren Schaltflächen ein ästhetisch ansprechendes Aussehen zu verleihen, kann die Eigenschaft border-radius auch verwendet werden, um visuelle Effekte zu erzeugen.

Zum Beispiel könnten Sie es verwenden, um eine Schaltfläche zu erstellen, die beim Klicken nach unten in die Seite gedrückt wird, und viele weitere Designtricks mit CSS ausführt.