How to align text boxes in multiple forms in HTML
|
The form code is as shown in the figure. The style sheet has not been added yet, so the form is not aligned and looks ugly. However, HTML does not provide any tags or functions for form alignment. HTML source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>massage-board</title>
</head>
<body>
<form action="board.php">
<fieldset>
<p>
<label for="title" >title:</label>
<input type="text" id="title" name="title" align="left">
</p>
<p>
<label for="username">username:</label>
<input type="text" id="username" name="username" align="left">
</p>
<p>
<label for="messageContent">message content:</label>
<textarea id="messageContent" name="messageContent" cols="40" rows="5" align="left"></textarea>
</p>
<p>
<input type="submit">
</p>
</fieldset>
</form>
</body>
</html>Form display effect picture:
To align the form, add the following CSS code to the HTML, and the form will be aligned:
<style>
fieldset{
background-color: #f1f1f1;
border: none;
border-radius: 2px;
margin-bottom: 12px;
overflow: hidden;
padding: 0.625em;
}
label{
cursor: pointer;
display: inline-block;
padding: 3px 6px;
text-align: right;
width: 150px;
vertical-align: top;
}
input{
font-size: inherit;
}
</style>The form display effect after adding the style sheet
The CSS code snippet to achieve form alignment is as follows:
label{
cursor: pointer;
display: inline-block;
padding: 3px 6px;
text-align: right;
width: 150px;
vertical-align: top;
} Assume that the parent element of each form is the This is the end of this article about how to align text boxes in multiple forms in HTML. For more information about aligning text boxes in multiple forms in HTML, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Payment function implementation in vue project (WeChat payment and Alipay payment)
>>: Share the 15 best HTML/CSS design and development frameworks
Recommend
Comparison of 5 CSS scrolling ceiling implementation methods (performance upgrade version)
Preview of revised version This article was writt...
VMware15 installation of CentOS7 detailed process and common problems (picture and text)
1. Installation package preparation VMware-player...
Native JS encapsulation vue Tab switching effect
This article example shares the specific code of ...
Public free STUN servers
Public free STUN servers When the SIP terminal us...
Summary of pitfalls in importing ova files into vmware
Source of the problem As we all know, all network...
How to visualize sketched charts in Vue.js using RoughViz
introduce A chart is a graphical representation o...
Example of converting webpack images to base64
Download url-loader yarn add -D url-loader module...
Native js implements custom scroll bar component
This article example shares the specific code of ...
About the problem of vertical centering of img and span in div
As shown below: XML/HTML CodeCopy content to clip...
Create a new user in Linux and grant permissions to the specified directory
1 Create a user and specify the user's root p...
Practical method of deleting a row in a MySql table
First, you need to determine which fields or fiel...
Detailed tutorial on how to automatically install CentOS7.6 using PXE
1. Demand The base has 300 new servers, and needs...
How to adjust the log level of nginx in Docker
Table of contents Intro Nginx Dockerfile New conf...
MySQL 5.7.17 winx64 free installation version configuration method graphic tutorial
Recent experience in installing mysql5.7.17 free ...
CentOS7 network configuration under VMware virtual machine (host wireless Internet access)
This is the first time I used the CentOS7 system ...