The form in HTML realizes the centering effect

Time:2021-7-25

I came across an assignment before and gave a picture to make a form according to the picture style. However, after all functions are realized, I found that the form cannot be centered and has been shrunk in the upper left corner, which looks very ugly. After various modifications, I finally succeeded in centering the form. Let’s share the errors and final results of my experience( It’s useless because I haven’t learned CSS when doing this part of homework)

1. Just made it look like

<form>
			< label for = "firstname" > 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 A-Z, 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 = "" / > (at least 6 characters) < br / >
		
			< label for = "password2" > enter the 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 @ characters)
		</form>

It looks awkward, so we should continue to improve…

2. After modification

在这里插入图片描述
 

It seems more awkward, but the center is realized. When I get here, I don’t know whether the < center > I use is right…


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

3. After using table layout

在这里插入图片描述
 

This is the final result after a night of modification.

<!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" > 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 A-Z, 0-9 and underscores)</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 = "" / > (at least 6 characters)</td>
				</tr>
				<tr>
					<td>< label for = "password2" > enter the 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 @ characters)</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 = "exercise" / > exercise 
						< input type = "checkbox" name = "hobby" id = "" value = "chat" / > chat
						< input type = "checkbox" name = "hobby" id = "" value = "play a game" / > play a game
					</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 alignment of the label on the left is not good-looking, you can also add align = “right” to the < td > label to align the text to the right

< TD align = "right" > < label for = "firstname" > Name: < / label ></td>

在这里插入图片描述

This is the end of this article about the centering effect of form form in HTML. For more relevant HTML form centering content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]