Zentrieren des Formulars in HTML
|
Ich bin einmal auf eine Aufgabe gestoßen, bei der ich ein Bild erhielt und aufgefordert wurde, ein Formular basierend auf dem Bildstil zu erstellen. Nachdem alle Funktionen implementiert waren, stellte ich jedoch fest, dass ich das Formular nicht zentrieren konnte. Es war immer in der oberen linken Ecke verkleinert, was hässlich aussah. Nach verschiedenen Änderungen gelang es mir schließlich, das Formular zu zentrieren. Hier sind die Fehler, die ich gemacht habe, und das Endergebnis. (Weil ich bei diesem Teil der Hausaufgaben noch kein CSS gelernt hatte, also ist es nutzlos) 1. Das Aussehen des neu gemachten
<form>
<label for="firstname">Vorname:</label>
<input type="text" name="vorname" id="vorname" required="erforderlich" value="" /><br />
<label for="lastname">Nachname:</label>
<input type="text" name="nachname" id="nachname" required="erforderlich" value="" /><br />
<label for="Anmeldename">Anmeldename:</label>
<input type="text" name="Anmeldename" required="erforderlich" pattern="^\w{4,8}$" id="Anmeldename" value="" /> (kann az, 0-9 und Unterstrich enthalten)<br />
<label for="password">Passwort:</label>
<input type="password" name="password" required="erforderlich" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" /> (enthält mindestens 6 Zeichen)<br />
<label for="password2">Geben Sie Ihr Passwort erneut ein:</label>
<input type="Passwort" name="Passwort2" required="erforderlich" pattern="^[a-zA-Z]\w{5,17}$" id="Passwort2" value="" /><br />
<label for="myEmail">E-Mail:</label>
<input type="email" name="myEmail" id="myEmail" value="" /> (muss das @-Zeichen enthalten)
</form>
Es sieht komisch aus, also werde ich weiter daran arbeiten, es zu verbessern. . . 2. Nach der Änderung
Es scheint noch umständlicher, aber die Zentrierung wird erreicht. An diesem Punkt weiß ich nicht, ob ich <center> richtig verwendet habe. . . <Mitte> <form> ````` ````` </form> </center> 3. Nach der Verwendung des Tabellenlayouts
Dies ist das Endergebnis nach einer Nacht der Bearbeitung.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<link rel="Symbol" Typ="text/css" href="./img/favicon.png"/>
<Titel></Titel>
</Kopf>
<Text>
<Mitte>
<form action="Erfolg.html" target="_blank" method="get">
<table border="0" cellspacing="" cellpadding="">
<tr>
<td><label for="firstname">Vorname:</label></td>
<td><input type="text" name="vorname" id="vorname" required="erforderlich" value="" /></td>
</tr>
<tr>
<td><label for="lastname">Nachname:</label></td>
<td><input type="text" name="nachname" id="nachname" required="erforderlich" value="" /></td>
</tr>
<tr>
<td><label for="Anmeldename">Anmeldename:</label></td>
<td><input type="text" name="Anmeldename" required="erforderlich" pattern="^\w{4,8}$" id="Anmeldename" value="" /> (kann az, 0-9 und Unterstrich enthalten)</td>
</tr>
<tr>
<td><label for="password">Passwort:</label></td>
<td><input type="password" name="password" required="erforderlich" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" /> (enthält mindestens 6 Zeichen)</td>
</tr>
<tr>
<td><label for="password2">Passwort erneut eingeben:</label></td>
<td><input type="Passwort" name="Passwort2" required="erforderlich" pattern="^[a-zA-Z]\w{5,17}$" id="Passwort2" value="" /></td>
</tr>
<tr>
<td><label for="myEmail">E-Mail:</label></td>
<td><input type="email" name="myEmail" id="myEmail" value="" /> (muss das @-Zeichen enthalten)</td>
</tr>
<tr>
<td><label>Geschlecht:</label></td>
<td>
<input type="radio" name="sex" id="" value="male" />Männlich<img src="./img/Male.gif" >
<input type="radio" name="sex" id="" value="female" />Weiblich<img src="./img/Female.gif" >
</td>
</tr>
<tr>
<td><label>Avatar:</label></td>
<td><input type="file" name="meineDatei" /></td>
</tr>
<tr>
<td><label>Hobbys:</label></td>
<td>
<input type="checkbox" name="hobby" id="" value="Sport" />Sport <input type="checkbox" name="hobby" id="" value="Chat" />Chat <input type="checkbox" name="hobby" id="" value="Spiele spielen" />Spiele spielen </td>
</tr>
<tr>
<td><label>Geburtsdatum:</label></td>
<td>
<input type="text" size="1" name="year"placeholder="yyyy" id="" value="" />Jahr <select name="month">
<option value ="0">[Monat auswählen]</option>
<option value ="1">Januar</option>
<option value ="2">Februar</option>
<option value ="3">März</option>
<option value ="4">April</option>
<option value ="5">Kann</option>
<option value ="6">Juni</option>
<option value ="7">Juli</option>
<option value ="8">August</option>
<option value ="9">September</option>
<option value ="10">Oktober</option>
<option value ="11">November</option>
<option value ="12">Dezember</option>
</Auswählen>
<input type="text" size="1" name="day" placeholder="dd"/>Tag </td>
</tr>
</Tabelle>
<input type="image" src="img/submit.gif" value="Senden" />
<input type="image" src="img/reset.gif" onclick="reset();return false;" value="Nachfüllen" />
</form>
</center>
</body>
</html>Wenn Sie der Meinung sind, dass die linksbündige Beschriftung auf der linken Seite nicht gut aussieht, können Sie dem Tag <td> auch align="right" hinzufügen, um den Text rechtsbündig auszurichten <td align="right"><label for="firstname">Vorname:</label></td>
Dies ist das Ende dieses Artikels zum Zentrieren des Formulars in HTML. Weitere Informationen zum Zentrieren des HTML-Formulars finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: HTML realisiert Hotel-Screening-Funktion über Formular
>>: HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten
Artikel empfehlen
SQL IDENTITY_INSERT-Fallstudie
Wenn eine Spalte in einer Datentabelle einmal als...
So konfigurieren Sie den NAT-Modus für virtuelle VMware-Maschinen
In diesem Artikel wird der NAT-Konfigurationsproz...
Detaillierte Erläuterung der allgemeinen Verwendungsmethoden von weixin-js-sdk in vue
Verknüpfung: https://qydev.weixin.qq.com/wiki/ind...
Detaillierte Schritte zur Installation der Sogou-Eingabemethode unter Ubuntu 20.04
1. Installieren Sie das Fcitx-Eingabeframework Zu...
Vue implementiert ein Beispiel zum Herunterziehen und Scrollen zum Laden von Daten
Inhaltsverzeichnis Schritt 1: Installation Schrit...
Detaillierte Erklärung des Unterschieds zwischen Routing-Hooks in Vue2.x und Vue3.x
Inhaltsverzeichnis vue2.x Vorkonzept: Routing-Hoo...
js, um einen einfachen Drag-Effekt zu erzielen
In diesem Artikel wird der spezifische Code von j...
Detailliertes Beispiel zur Installation eines FastDfs-Dateiservers mit Docker Compose
docker-compose.yml Version: '2' Leistunge...
Lösen Sie das Problem, dass die virtuelle CentOS7-Maschine nicht auf das Internet zugreifen kann, und richten Sie die virtuelle CentOS7-Maschine so ein, dass sie für den Zugriff auf das Internet eine statische IP verwendet
Ich habe vor Kurzem in einer virtuellen VMware-Ma...
So melden Sie sich unter Shell schnell ohne Kennwort bei der MySQL-Datenbank an
Hintergrund Wenn wir uns über den MySQL-Client in...
Beispieldemonstration der Vuex-Modularisierung und Namespaces
1. Zweck: Machen Sie den Code leichter wartbar un...
40 CSS/JS-Stil und funktionale technische Verarbeitung
1- Dropdown-Auswahlfelder gestalten – Ändern Sie ...
XHTML-Tags sollten richtig verwendet werden
<br />In früheren Tutorials von 123WORDPRESS...
Wie stellt MySQL die Datenintegrität sicher?
Die Bedeutung von Datenkonsistenz und -integrität...
Lassen Sie uns ausführlich über das Prinzip und die Implementierung von new in JS sprechen
Inhaltsverzeichnis Definition Konstruktorkörper s...