So richten Sie Textfelder in mehreren Formularen in HTML aus

Der Formularcode ist wie in der Abbildung dargestellt. Das Stylesheet wurde noch nicht hinzugefügt, daher ist das Formular nicht ausgerichtet und sieht hässlich aus. HTML bietet jedoch keine Tags oder Funktionen zur Formularausrichtung.

HTML Quelltext:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Massagebrett</title>
</Kopf>
<Text>
    <form action="board.php">
        <Feldsatz>
        <p>
            <label for="title" >Titel:</label>
            <input type="text" id="title" name="title" align="left">
        </p>
        <p>
            <label for="Benutzername">Benutzername:</label>
            <input type="text" id="Benutzername" name="Benutzername" align="left">
        </p>
        <p>
            <label for="messageContent">Nachrichteninhalt:</label>
            <textarea id="Nachrichteninhalt" name="Nachrichteninhalt" cols="40" rows="5" align="left"></textarea>
        </p>
        <p>
            <Eingabetyp="Senden">
        </p>
        </Feldsatz>
    </form>
</body>
</html>

Bild des Anzeigeeffekts des Formulars:

Um das Formular auszurichten, fügen Sie dem HTML den folgenden CSS-Code hinzu, und das Formular wird ausgerichtet:

<Stil>
        Feldsatz{
            Hintergrundfarbe: #f1f1f1;
            Rand: keiner;
            Rahmenradius: 2px;
            Rand unten: 12px;
            Überlauf: versteckt;
            Polsterung: 0,625em;
        }

        Etikett{
            Cursor: Zeiger;
            Anzeige: Inline-Block;
            Polsterung: 3px 6px;
            Textausrichtung: rechts;
            Breite: 150px;
            vertikale Ausrichtung: oben;
        }

        Eingang{
            Schriftgröße: erben;
        }
    </Stil>

Der Formularanzeigeeffekt nach dem Hinzufügen des Stylesheets

Der CSS-Codeausschnitt zur Formularausrichtung lautet wie folgt:

        Etikett{
            Cursor: Zeiger;
            Anzeige: Inline-Block;
            Polsterung: 3px 6px;
            Textausrichtung: rechts;
            Breite: 150px;
            vertikale Ausrichtung: oben;
        }

Angenommen, das übergeordnete Element jedes Formulars ist das Tag <p> , <label> ist die Beschreibung des Formulars, also der Text auf der linken Seite des Textfelds, und <input> ist das Textfeld. Um die Beschriftungen auszurichten, müssen Sie lediglich die Breite des Beschriftungstags auf einen bestimmten Wert festlegen, in diesem Beispiel beispielsweise 150px. Da der Beschriftungstag und der Eingabetag zum selben p-Tag gehören, werden sie von links nach rechts angezeigt. Durch Angabe der Länge des Beschriftungstags können die Textfelder des Formulars ausgerichtet werden.

Dies ist das Ende dieses Artikels zum Ausrichten von Textfeldern in mehreren Formularen in HTML. Weitere Informationen zum Ausrichten von Textfeldern in mehreren Formularen in HTML finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Implementierung der Zahlungsfunktion im Vue-Projekt (WeChat-Zahlung und Alipay-Zahlung)

>>: Teilen Sie die 15 besten HTML/CSS-Design- und Entwicklungsframeworks

Detaillierte Erläuterung der MySQL Master-Slave-Replikationspraxis - GTID-basierte Replikation

Detaillierte Erklärung zweier Tabellenkopieranweisungen: SELECT INTO und INSERT INTO SELECT (Unterschiede zwischen SQL-Datenbank und Oracle-Datenbank)

1. INSERT INTO SELECT-Anweisung Das Anweisungsfor...

So richten Sie Textfelder in mehreren Formularen in HTML aus

Detaillierte Erläuterung der MySQL Master-Slave-Replikationspraxis - GTID-basierte Replikation

Analyse der Schwierigkeiten im Hot-Standby der MySQL-Datenbank

Zusammenfassung des Wissens zum Vue V-Modell

Dekomprimierung, Installation, Sicherung und Wiederherstellung von MySQL in einer Windows-Umgebung

Detaillierte Erklärung der Anwendungsfälle von Vue-Listenern

Detaillierte Erklärung des JS-Speicherplatzes

Zusammenfassung einiger praktischer kleiner Zaubertricks in der Vue-Praxis

Methoden und Schritte zum Erstellen eines Docker-basierten Nginx-Dateiservers

MySQL implementiert Multi-Table-Assoziationsstatistiken (Unterabfragestatistiken) Beispiel

Implementierungsschritte zum Installieren einer Java-Umgebung in Docker

Artikel empfehlen

CSS-Tipps zur Steuerung der Wiedergabe und Pause von Animationen (sehr praktisch)

Praxis der Verwendung von Tinymce Rich Text zum Anpassen von Symbolleistenschaltflächen in Vue

Die Verwendung des V-Modells in Vue3-Komponenten und ausführliche Erklärung

Anweisungen zur Verwendung der MySQL-IndexOF-Funktion

So geben Sie chinesische Zeichen im Linux-Kernel aus

Detaillierte Erklärung zweier Tabellenkopieranweisungen: SELECT INTO und INSERT INTO SELECT (Unterschiede zwischen SQL-Datenbank und Oracle-Datenbank)

So installieren Sie Oracle auf Windows Server 2016

Beispielcode für die Projektbereitstellung zur Trennung von Front-End und Back-End in Flask und Vue

Eine kurze Diskussion über MySQL-Ereignisplanungsaufgaben

So stellen Sie mit Node-Red eine Verbindung zur MySQL-Datenbank her

So fügen Sie in 88 Sekunden 10 Millionen Datensätze in eine MySQL-Datenbanktabelle ein

Mehrere Möglichkeiten zum Planen der Sicherung einer MySQL-Datenbank (umfassend)

Methoden und Probleme bei der Installation von MariaDB in CentOS unter MySQL

Beispiele für die Verwendung temporärer Tabellen in MySQL

Zusammenfassung der Lösung für den Webpack -v-Fehler von Vue