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 <p> tag, <label> tag is the description of the form, that is, the text on the left side of the text box, and <input> tag is the text box. To align the labels, you only need to set the width of the label tag to a certain value, such as 150px in this example. Because the label tag and the input tag belong to the same p tag, they are displayed from left to right. By specifying the length of the label tag, the text boxes of the form can be aligned.

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

A detailed tutorial on master-slave replication and read-write separation of MySQL database

How to align text boxes in multiple forms in HTML

A detailed tutorial on master-slave replication and read-write separation of MySQL database

A brief discussion on the types of node.js middleware

Briefly talk about mysql left join inner join

MySQL 5.7.23 installation and configuration method graphic tutorial

CSS code to achieve 10 modern layouts

Installation and usage analysis of Portainer, a visual UI management tool for Docker

Mini Program Recording Function Implementation

Implementation of react automatic construction routing

Analysis of the Docker image construction principle (you can build an image without installing Docker)

Native js to implement a simple calculator

Recommend

HTML markup language - reference

Web Design Tutorial (4): About Materials and Expressions

MySQL table return causes index invalidation case explanation

How to prevent users from copying web page content using pure CSS

Detailed analysis of matching rules when Nginx processes requests

How to use Tencent slider verification code in Vue3+Vue-cli4 project

MySQL latest version 8.0.17 decompression version installation tutorial

MySQL 5.7.24 compressed package installation and configuration method graphic tutorial

Detailed explanation of using MySQL where

Mini Program to Implement Simple List Function

How to build Jenkins+Maven+Git continuous integration environment on CentOS7

Share 20 excellent web form design cases

HTML iframe usage summary collection

How to use geoip to restrict regions in nginx

MySQL foreign key (FOREIGN KEY) usage case detailed explanation