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

Eine kurze Einführung in MySQL InnoDB ReplicaSet

So richten Sie Textfelder in mehreren Formularen in HTML aus

Eine kurze Einführung in MySQL InnoDB ReplicaSet

Detaillierte Erklärung des Lebenszyklus von Angular-Komponenten (Teil 2)

Div überschreitet den versteckten Text und versteckt den CSS-Code jenseits des Div-Teils

Zusammenfassung häufig verwendeter Toolfunktionen in Vue-Projekten

jQuery realisiert den Shuttle-Box-Effekt

Der Unterschied und die Verwendung von distinct und row_number() over() in SQL

Neues CSS3-Layout: ausführliche Flex-Erklärung

Zusammenfassung der speicherbezogenen Parameter von MySQL 8.0

jQuery implementiert gleitende Registerkarte

Ausführliche Erläuterung der MySQL-Isolationsebene und des Sperrmechanismus

Artikel empfehlen

Verstehen Sie die Prinzipien und Anwendungen von JSONP in einem Artikel

Frameset über Iframe in Body einfügen

Detaillierte Erklärung des Unterschieds zwischen Uniapp und Vue

VUE+Canvas implementiert den Beispielcode des Desktop-Flipper-Brick-Breaking-Spiels

CSS zur Implementierung von Sprites und Schriftsymbolen

Top 10 der nützlichsten und wichtigsten Open-Source-Tools im Jahr 2019

8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden

HTML+CSS+JavaScript realisiert die Anzeige des ausgewählten Effekts nach der Mausbewegung

jQuery+Ajax zum Erreichen eines einfachen Paging-Effekts

Lösung für das MySQL-Anmeldewarnungsproblem

Lösen Sie das Problem beim Laden der Vektorkartenquelle in OpenLayers 3

MySQL verwendet die Partitionsfunktion, um eine horizontale Partitionierungsstrategie zu implementieren

JS verwendet die Methode „reduce()“, um Baumstrukturdaten zu verarbeiten

Docker-Zeitzonenproblem und Datenmigrationsproblem

Tutorial zur MySQL-Installation in der Linux-CentOS7-Umgebung