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
Detaillierte Erklärung und praktische Übungen zum Mysql-Tuning-Erklärtool (empfohlen)
MySQL-Tuning: Detaillierte Erläuterung und prakti...
Detaillierte Erläuterung der Implementierung mehrerer dreispaltiger adaptiver CSS-Layouts
Vorwort Um dem herkömmlichen WEB-Layout zu folgen...
HTML-Code, der den Internet Explorer zum Einfrieren bringen kann
Wir müssen lediglich einen beliebigen Texteditor ö...
Detaillierte Erklärung der Schritte zum Erstellen eines Vue-Projekts mit Vue-cli
Zuerst müssen Sie Vue-cli installieren: npm insta...
So überspringen Sie Fehler bei der MySQL-Master-Slave-Replikation
1. Traditionelle Binlog-Master-Slave-Replikation,...
Einfache Implementierung der Handheld-Sperrfeuerfunktion + Textschüttel-Spezialeffektcode basierend auf JS
Vor einiger Zeit gab es auf TikTok eine Schüttela...
MySQL 8.0.12 Installations- und Konfigurations-Tutorial
Dieser Artikel enthält das ausführliche Tutorial ...
Detaillierte Erklärung zur Verwendung von Vue.prototype in Vue
Inhaltsverzeichnis 1. Einfaches Beispiel 2. Legen...
So legen Sie die Schriftfarbe in HTML fest und erhalten mit PS eine genaue Schriftfarbe in HTML
1. HTML-Schriftfarbeneinstellung In HTML verwende...
So konfigurieren Sie eine JDK-Umgebung unter Linux
1. Gehen Sie zur offiziellen Website, um das JDK-...
CSS3 + Bézierkurve zum Erzielen eines skalierbaren Eingabesuchfeldeffekts
Und hier nun ohne weitere Umschweife die Renderin...
Lösen Sie das Problem der inkonsistenten MySQL-Speicherzeit
Nachdem die Systemzeit mit Java ermittelt und in ...
Implementierung von Socket-Optionen in der Linux-Netzwerkprogrammierung
Socket-Optionsfunktion Funktion: Methoden zum Les...
Mysql verwendet gespeicherte Prozeduren, um schnell Millionen von Datenbeispielcodes hinzuzufügen
Vorwort Um den Unterschied zwischen dem Hinzufüge...
Grundlegendes HTML-Verzeichnisproblem (Unterschied zwischen relativem und absolutem Pfad)
Relativer Pfad – ein Verzeichnispfad, der basieren...