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
Tutorial on installing mysql5.7.17 via yum on redhat7
The RHEL/CentOS series of Linux operating systems...
A brief summary of how to write paths when HTML files introduce external CSS files
1. Import the basic style of external CSS files U...
JavaScript uses canvas to draw coordinates and lines
This article shares the specific code of using ca...
Example code for implementing ellipse trajectory rotation using CSS3
Recently, the following effects need to be achiev...
CSS style control to achieve IE submission form record history click return information is still there
It is mainly a CSS style control and a META tag; C...
Getting started with JavaScript basics
Table of contents 1. Where to write JavaScript 2....
VUE implements timeline playback component
This article example shares the specific code of ...
Drop-down menu and sliding menu design examples
I found a lot of websites that use drop-down or sl...
A brief discussion on Flex layout and scaling calculation
1. Introduction to Flex Layout Flex is the abbrev...
HTML small tag usage tips
Phrase elements such as <em></em> can ...
Quickly solve the problems of incorrect format, slow import and data loss when importing data from MySQL
If you want to solve the slow problem once and fo...
How to use HTML+CSS to create TG-vision homepage
This time we use HTML+CSS layout to make a prelim...
Implementation process of row_number in MySQL
1. Background Generally, in a data warehouse envi...
5 ways to determine whether an object is an empty object in JS
1. Convert the json object into a json string, an...
Example of implementing translation effect (transfrom: translate) with CSS3
We use the translate parameter to achieve movemen...