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

Beispielcode zum Mischen von Float und Margin in CSS

Zentrieren des Formulars in HTML

Beispielcode zum Mischen von Float und Margin in CSS

Beispielcode für die Django+MySQL-Konfiguration und einfache Bedienung der Datenbank

CSS realisiert die Layoutmethode „Fest links“ und „Adaptiv rechts“

Reines js, um einen Schreibmaschineneffekt zu erzielen

Allgemeine Struktur-Tags in XHTML

So leiten Sie über den Nginx-Lastausgleich zu https um

Vue-Projekt @change mehrere Parameter, um mehrere Ereignisse zu übergeben

So stellen Sie Redis in einer Linux-Umgebung bereit und installieren es in Docker

MYSQL Eine Frage zur Verwendung von Zeichenfunktionen zum Filtern von Daten

Zusammenfassung der HOC-Nutzung von React-High-Order-Komponenten

Artikel empfehlen

Implementierung einer zeitgesteuerten MySQL-Datenbanksicherung (vollständige Datenbanksicherung)

Einführung in HTML-Link-Ankertags und ihre Rolle bei der Suchmaschinenoptimierung

So lösen Sie das Problem des verstümmelten MySQL-Inserts

Detaillierte Analyse jeder Phase der HTTP-Anforderungsverarbeitung von Nginx

Ubuntu 20.04 aktiviert die versteckte Aufnahme-Rauschunterdrückungsfunktion (empfohlen)

Tutorial zur Installation von Microsoft TrueType-Schriftarten auf Ubuntu-basierten Distributionen

Beispiel einer Autorisierungsüberprüfungsmethode von Nest.js

Detailliertes Tutorial zur Installation der MySQL-Datenbank auf Alibaba Cloud Server

Detaillierte Erläuterung der Methoden zur Überprüfung und Verwaltung von MySQL-Benutzerrechten

Ein Artikel zum Verständnis der Verwendung von Proxys in JavaScript

Dieser Artikel zeigt Ihnen detailliert, wie Sie SQL CASE WHEN verwenden

Wie füge ich ein Website-Symbol hinzu?

Einführung und Installation von MySQL Shell

Detaillierte Erläuterung des Prozesses zum Erstellen von Bodennavigationseffekten mit JavaScript

Vue + Openlayer realisiert den Drag- und Rotationsverformungseffekt von Grafiken