Zentrieren des Formulars in HTML

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

Bildbeschreibung hier einfügen

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

Bildbeschreibung hier einfügen

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>

Bildbeschreibung hier einfügen

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

Warum gibt es das in JS?

Inhaltsverzeichnis 1. Nachfrage 2. Lösung 3. Die ...

Vue implementiert dreidimensionales Säulendiagramm basierend auf E-Charts

Das dreidimensionale Säulendiagramm besteht aus d...

Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil

Die Bedeutung der Schreibreihenfolge Reduzieren S...

Detailliertes Installationstutorial von Docker unter CentOS

Docker ist in CE und EE unterteilt. Die CE-Versio...

Lösung für das Problem, dass Emoji-Ausdrücke nicht in MySQL eingefügt werden können

Vorwort Ich dachte immer, dass UTF-8 eine univers...

Detaillierte Schritte zum Konfigurieren von my.ini für mysql5.7 und höher

Im entpackten Paket von Windows 64-Bit MySQL 5.7 ...

Beispielanalyse der Verwendung gespeicherter MySQL-Prozeduren

Dieser Artikel beschreibt die Verwendung gespeich...

Zusammenfassung des Installationsprozesses von MySql 8.0.11 und der beim Verknüpfen mit Navicat aufgetretenen Probleme

Meine System- und Softwareversionen sind wie folg...

Lösen Sie das Problem, dass dem Benutzer „root“@„%“ der Zugriff auf die Datenbank „xxx“ verweigert wurde, nachdem eine Datenbank in MySQL erstellt wurde.

Vorwort Ich hatte kürzlich ein Problem bei der Ar...

Natives JS zum Erzielen eines Puzzle-Effekts

In diesem Artikel wird der spezifische Code von n...

Implementierung der K8S-Bereitstellung eines Docker-Containers

Umgebung: (Docker, K8s-Cluster), fahren Sie mit d...

Detaillierte Erläuterung der Anwendung von Meta-Tags bei der Entwicklung mobiler Plattformen

Jeder kennt das Meta-Tag im Weblayout von Desktop...

Beheben von Problemen mit hoher MySQL-CPU-Auslastung

Hohe CPU-Last durch MySQL Heute Nachmittag habe i...

Samba-Serverkonfiguration unter Centos7 (tatsächlicher Kampf)

Samba Übersicht Samba ist eine kostenlose Softwar...

Tipps zum Escapen von HTML-Texten

Heute habe ich auf CSDN einen kleinen Trick zum Es...