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

How to align text boxes in multiple forms in HTML

CSS to achieve Tik Tok subscription button animation effect

JavaScript implements a box that follows the mouse movement

Thinking about grid design of web pages

How to configure the same domain name for the front and back ends of nginx

Analysis and solution of the reason why overflow-y: visible; does not work in CSS

Detailed explanation of the complete usage example of developing hyperf under Docker

Element sample code to implement dynamic table

MySQL ID starts to increase from 1 to quickly solve the problem of discontinuous ID

jQuery implements time selector

4 ways to avoid duplicate insertion of data in Mysql

Recommend

Detailed explanation of the new CSS display:box property

Ubuntu 18.04 installs mysql 5.7.23

Windows 10 + mysql 8.0.11 zip installation tutorial detailed

Sample code for nginx to achieve dynamic and static separation

JavaScript to achieve simple provincial and municipal linkage

How to implement Mysql switching data storage directory

Why I recommend Nginx as a backend server proxy (reason analysis)

MySQL data type optimization principles

Alibaba Cloud domain name and IP binding steps and methods

Explore JavaScript prototype data sharing and method sharing implementation

JavaScript custom calendar effect

VMware WorkStation 14 pro installation Ubuntu 17.04 tutorial

Three ways to configure JNDI data source in Tomcat

Example code of html formatting json

Weird and interesting Docker commands you may not know