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

Detaillierter Prozess zum Ändern des Hostnamens, nachdem Docker einen Container erstellt hat

Über das Wertübertragungsproblem zwischen Antd-Baum und übergeordneten und untergeordneten Komponenten (Reaktionszusammenfassung)

Artikel

Vue implementiert das Senden von Emoticons im Chatfenster

So richten Sie Textfelder in mehreren Formularen in HTML aus

Detaillierter Prozess zum Ändern des Hostnamens, nachdem Docker einen Container erstellt hat

Win2008 R2 MySQL 5.5 ZIP-Format MySQL-Installation und -Konfiguration

So überspringen Sie Fehler bei der MySQL-Master-Slave-Replikation

MySQL-Einfügungsproblem bei JSON

VScode Remote SSH-Remote-Bearbeitung und -Debugging von Code

Win10 MySQL 5.6.35 Winx64 kostenlose Installationsversion Konfigurations-Tutorial

Über das Wertübertragungsproblem zwischen Antd-Baum und übergeordneten und untergeordneten Komponenten (Reaktionszusammenfassung)

Vue implementiert das Senden von Emoticons im Chatfenster

Heute bin ich auf ein sehr seltsames Problem gestoßen und habe es selbst gelöst

Halbtransparente Bildverarbeitung. Ideen und Code zur Implementierung von halbtransparentem Hintergrund.

Artikel empfehlen

Erläuterung der Faktoren, die die Datenbankleistung in MySQL beeinflussen

Kenntnisse zur Überwachung der MySQL-Indexnutzung (es lohnt sich, sie zu erwerben!)

Beispiel für eine erzwungene Konvertierungsmethode für MySQL-Zeichenfolgen

jQuery Treeview-Baumstrukturanwendung

So verwalten Sie MySQL-Indizes und Datentabellen

Eine kurze Diskussion über die binäre Familie von JS

Grafisches Tutorial zur Installation der MySQL 8.0.12-Dekomprimierungsversion unter Windows 10

Bei MySQL-Zeichentypen wird die Groß-/Kleinschreibung beachtet.

Analyse der Situation, in der js die Unterstützung von CSS-Attributen (Werten) bestimmt und informiert

Nginx-Dienst 500: Interner Serverfehler einer der Gründe

Rankings zur Benutzerfreundlichkeit chinesischer Websites

Tutorial zur HTML-Tabellenauszeichnung (30): Farbattribut für dunkle Zellenränder BORDERCOLORDARK

Detaillierte Erklärung zum Erstellen mehrerer Instanzen von MySQL 5.6 in einer CentOS7-Umgebung

Linux: Kein Speicherplatz mehr auf Gerät 500 – Fehler aufgrund voller Inodes

Detaillierte Erklärung des MySQL-Datenbankparadigmas