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

Lösungen für das Problem der Erstellung von XHTML- und CSS-Webseiten

So richten Sie Textfelder in mehreren Formularen in HTML aus

Lösungen für das Problem der Erstellung von XHTML- und CSS-Webseiten

Detaillierte Erklärung der Schlüsselwörter und reservierten Wörter in MySQL 5.7

Warum MySQL große Transaktionen vermeiden sollte und wie man sie löst

Ein Artikel, der Ihnen ein tiefes Verständnis von Mysql-Triggern vermittelt

Über Zabbix Admin-Login vergessen Passwort zurücksetzen

Maven-Projekte schneller in Docker erstellen

Natives JS zur Implementierung eines Dropdown-Menüs

Diagramm des Datenübertragungsprozesses beim dritten TCP-Handshake

CentOS7-Upgrade des Kernels kernel5.0 Version

HTML-Formular_PowerNode Java Academy

Artikel empfehlen

Packetdrills prägnantes Benutzerhandbuch

Fallanalyse mehrerer MySQL-Aktualisierungsvorgänge

Tutorial zum Bereitstellen mehrerer Server mit WebAPI und Konfigurieren des Nginx-Lastausgleichs

CSS zum Erreichen der ersten Zeile und ersten Spalte der Tabelle, fester und adaptiver Fensterbeispielcode

Detaillierte Erklärung der Tastaturereignisse von Vue

Detaillierte Erläuterung der Verwendung der MySQL-Verkettungsfunktion CONCAT

jQuery realisiert Bildhervorhebung

So verwenden Sie die Lotteriekomponente des WeChat Mini-Programms

Implementierung zum Erstellen benutzerdefinierter Images mit Dockerfile

Anfänger lernen einige HTML-Tags (1)

Detaillierte Erklärung des Unterschieds zwischen URL-Endungen mit / und ohne / in der Proxy_Pass-Konfiguration von Nginx

Verwenden Sie die Tools iptables und firewalld, um Verbindungsregeln für die Linux-Firewall zu verwalten

mysql5.7.18 dekomprimierte Version zum Starten des MySQL-Dienstes

Beheben Sie das Kompatibilitätsproblem zwischen dem MySQL 8.0-Treiber und der Alibaba Druid-Version

CSS-Position feste linke und rechte Doppelpositionierungs-Implementierungscode