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
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
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>
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
Recommend
Multiple ways to insert SVG into HTML pages
SVG (Scalable Vector Graphics) is an image format...
Vue implements the drag and drop sorting function of the page div box
vue implements the drag and drop sorting function...
Detailed explanation of MySQL database isolation level and MVCC
Table of contents 1. Isolation Level READ UNCOMMI...
Detailed steps for installing and using vmware esxi6.5
Table of contents Introduction Architecture Advan...
Front-end performance optimization - the pain points that front-end engineers have to talk about
Preface <br />In the previous article "...
Detailed explanation of the process of building an image server with nginx (the difference between root and alias)
The installation process is omitted (I installed ...
How to reduce the root directory of XFS partition format in Linux
Table of contents Preface System environment Curr...
Teach you how to build Redis cluster mode and sentinel mode with docker in 5 minutes
Table of contents 1. Preparation Pull the redis i...
JavaScript knowledge: Constructors are also functions
Table of contents 1. Definition and call of const...
Open the app on the h5 side in vue (determine whether it is Android or Apple)
1. Development environment vue+vant 2. Computer s...
Detailed explanation of the organizational structure diagram case of Vue's vue-tree-color component
Table of contents npm Install the loader Import P...
Detailed explanation of the Docker deployment tutorial for Jenkins beginners
This article deploys Jenkins+Maven+SVN+Tomcat thr...
This article will show you the basics of JavaScript: deep copy and shallow copy
Table of contents Shallow copy Deep Copy Replenis...
JavaScript implements an input box component
This article example shares the specific code for...
Summary of MySQL5 green version installation under Windows (recommended)
1 Download MySQL Download address: http://downloa...