Centering the Form in HTML

I once encountered an assignment where I was given a picture and asked to make a form based on the picture style. However, after all the functions were implemented, I found that I could not center the form. It was always shrunk in the upper left corner, which looked ugly. After various modifications, I finally managed to center the form. Here are the mistakes I made and the final result. (Because I hadn’t learned CSS when doing this part of the homework, so it’s useless)

1. The appearance of the newly made

<form>
			<label for="firstname">First Name:</label>
			<input type="text" name="firstname" id="firstname" required="required" value="" /><br />
		
			<label for="lastname">Last Name:</label>
			<input type="text" name="lastname" id="lastname" required="required" value="" /><br />
		
			<label for="login name">Login name:</label>
			<input type="text" name="login name" required="required" pattern="^\w{4,8}$" id="login name" value="" /> (can contain az, 0-9 and underscore)<br />
		
			<label for="password">Password:</label>
			<input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" /> (contains at least 6 characters)<br />
		
			<label for="password2">Enter your password again:</label>
			<input type="password" name="password2" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /><br />
		
			<label for="myEmail">Email:</label>
			<input type="email" name="myEmail" id="myEmail" value="" /> (must contain the @ character)
		</form>

It looks weird, so I'll continue to improve it. . .

2. After modification

insert image description here

It seems even more awkward, but centering is achieved. At this point, I don’t know if I used <center> correctly. . .

<center>
	<form>
		`````
		`````
	</form>
</center>

3. After using table layout

insert image description here

This is the final result after a night of editing.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="text/css" href="./img/favicon.png"/>
		<title></title>
	</head>
	<body>
		<center>
		<form action="Success.html" target="_blank" method="get">
			<table border="0" cellspacing="" cellpadding="">
				<tr>
					<td><label for="firstname">First Name:</label></td>
					<td><input type="text" name="firstname" id="firstname" required="required" value="" /></td>
				</tr>
				<tr>
					<td><label for="lastname">Last Name:</label></td>
					<td><input type="text" name="lastname" id="lastname" required="required" value="" /></td>
				</tr>
				<tr>
					<td><label for="login name">Login name:</label></td>
					<td><input type="text" name="login name" required="required" pattern="^\w{4,8}$" id="login name" value="" /> (can contain az, 0-9 and underscore)</td>
				</tr>
				<tr>
					<td><label for="password">Password:</label></td>
					<td><input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" /> (contains at least 6 characters)</td>
				</tr>
				<tr>
					<td><label for="password2">Enter password again:</label></td>
					<td><input type="password" name="password2" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /></td>
				</tr>
				<tr>
					<td><label for="myEmail">Email:</label></td>
					<td><input type="email" name="myEmail" id="myEmail" value="" /> (must contain the @ character)</td>
				</tr>
				<tr>
					<td><label>Gender:</label></td>
					<td>
						<input type="radio" name="sex" id="" value="male" />Male<img src="./img/Male.gif" >
						<input type="radio" name="sex" id="" value="female" />Female<img src="./img/Female.gif" >
					</td>
				</tr>
				<tr>
					<td><label>Avatar:</label></td>
					<td><input type="file" name="myFile" /></td>
				</tr>
				<tr>
					<td><label>Hobbies:</label></td>
					<td>
						<input type="checkbox" name="hobby" id="" value="Sports" />Sports <input type="checkbox" name="hobby" id="" value="Chat" />Chat <input type="checkbox" name="hobby" id="" value="Play Games" />Play Games </td>
				</tr>
				<tr>
					<td><label>Date of Birth:</label></td>
					<td>
						<input type="text" size="1" name="year"placeholder="yyyy" id="" value="" />Year <select name="month">
							<option value ="0">[Select month]</option>
							<option value ="1">January</option>
							<option value ="2">February</option>
							<option value ="3">March</option>
							<option value ="4">April</option>
							<option value ="5">May</option>
							<option value ="6">June</option>
							<option value ="7">July</option>
							<option value ="8">August</option>
							<option value ="9">September</option>
							<option value ="10">October</option>
							<option value ="11">November</option>
							<option value ="12">December</option>
						</select>
						<input type="text" size="1" name="day" placeholder="dd"/>Day </td>
				</tr>
			</table>
			<input type="image" src="img/submit.gif" value="Submit" />
			<input type="image" src="img/reset.gif" onclick="reset();return false;" value="Refill" />		
		</form>
		</center>
	</body>
</html>

If you think the left-aligned label on the left is not good-looking, you can also add align="right" to the <td> tag to align the text to the right

<td align="right"><label for="firstname">First name:</label></td>

insert image description here

This is the end of this article about how to center the form in HTML. For more information about centering the HTML form, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: HTML realizes hotel screening function through form

>>: HTML+CSS to create heartbeat special effects