How to properly align a form with a multi-lined label in HTML and CSS?

Question

How to properly align a form with a multi-lined label in HTML and CSS?

I'm looking to create a form label that spans multiple lines and align the inputs with the labels. The goal is for the "Releasse Date" label to display as:

Release Date

(YYYY-MM-DD): [input box]

Here's how it currently looks:

HTML Code:

<form action="http://localhost/songadded.php" method="post" id="songform">

    <h4>Add a New Song</h4>

...

CSS Code:

#songform {
margin: 20px;
}

label {
float: left;
width: 250px;
margin-top: 20px;
clear: right;
}

input{
margin-top: 20px;
}


#songsubmit {
margin-left: 80px;
}

html css

Answer 1

Answer №1

To achieve the desired layout, utilize display:inline-block and vertical-align:bottom. Avoid using floats or absolute positioning.

#songform {
    margin: 20px;
}

#songform > div {
    position: relative;
    margin-top: 20px;
}

label {
    display:inline-block;
    width: 250px;
    vertical-align:bottom;
}

#songsubmit {
    margin-left: 80px;
}

<form action="http://localhost/songadded.php" method="post" id="songform">

    <h4>Add a New Song</h4>

    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>

    <div>
        <label for="artist">Artist:</label>
        <input type="text" name="artist" size="30" value=""/>
    </div>

    <div>
        <label for="album">Album:</label>
        <input type="text" name="album" size="30" value=""/>
    </div>

    <div>
        <label for="genre">Genre:</label>
        <input type="text" name="genre" size="30" value=""/>
    </div>

    <div>
        <label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
        <input type="text" name="release_date" size="30" value="" id="rdinput"/>
    </div>

    <div>
        <label for="bpm">BPM:</label>
        <input type="text" name="bpm" maxlength="3" value=""/>
    </div>

    <div id="songsubmit">
    <input type="submit" name="submit" value="Add Song"/>
    </div>
</form>

Answer 2

To achieve the desired layout, utilize display:inline-block and vertical-align:bottom. Avoid using floats or absolute positioning.

#songform {
    margin: 20px;
}

#songform > div {
    position: relative;
    margin-top: 20px;
}

label {
    display:inline-block;
    width: 250px;
    vertical-align:bottom;
}

#songsubmit {
    margin-left: 80px;
}

<form action="http://localhost/songadded.php" method="post" id="songform">

    <h4>Add a New Song</h4>

    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>

    <div>
        <label for="artist">Artist:</label>
        <input type="text" name="artist" size="30" value=""/>
    </div>

    <div>
        <label for="album">Album:</label>
        <input type="text" name="album" size="30" value=""/>
    </div>

    <div>
        <label for="genre">Genre:</label>
        <input type="text" name="genre" size="30" value=""/>
    </div>

    <div>
        <label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
        <input type="text" name="release_date" size="30" value="" id="rdinput"/>
    </div>

    <div>
        <label for="bpm">BPM:</label>
        <input type="text" name="bpm" maxlength="3" value=""/>
    </div>

    <div id="songsubmit">
    <input type="submit" name="submit" value="Add Song"/>
    </div>
</form>

Answer 3

Answer №2

If you're facing a similar issue, I have created a code snippet for you to check out: http://jsfiddle.net/86abcdefg1/ Simply add the following CSS rule clear:left to each div wrapper containing your form fields.

  <div class="form-item">
        <label for="email">Email:</label>
        <input type="email" name="email" size="30" value=""/>
    </div>

.form-item {
        clear: left;
}

Answer 4

If you're facing a similar issue, I have created a code snippet for you to check out: http://jsfiddle.net/86abcdefg1/ Simply add the following CSS rule clear:left to each div wrapper containing your form fields.

  <div class="form-item">
        <label for="email">Email:</label>
        <input type="email" name="email" size="30" value=""/>
    </div>

.form-item {
        clear: left;
}

Answer 5

Answer №3

To achieve the alignment next to the colon, you can utilize absolute positioning. Below is a functional example where I have made some adjustments to ensure it works smoothly:

#songform {
    margin: 20px;
}

#songform > div {
    position: relative;
    margin-top: 20px;
}

#songform > div:after {
  /* Clearfix */
  content:"";
  display:table;
  clear:both;
}

#songform > div > input {
    position: absolute;
    bottom: 0;
}

label {
    float: left;
    width: 250px;
    clear: right;
}

#songsubmit {
    margin-left: 80px;
}

<form action="http://localhost/songadded.php" method="post" id="songform">

    <h4>Add a New Song</h4>

    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>

    <div>
        <label for="artist">Artist:</label>
        <input type="text" name="artist" size="30" value=""/>
    </div>

    <div>
        <label for="album">Album:</label>
        <input type="text" name="album" size="30" value=""/>
    </div>

    <div>
        <label for="genre">Genre:</label>
        <input type="text" name="genre" size="30" value=""/>
    </div>

    <div>
        <label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
        <input type="text" name="release_date" size="30" value="" id="rdinput"/>
    </div>

    <div>
        <label for="bpm">BPM:</label>
        <input type="text" name="bpm" maxlength="3" value=""/>
    </div>

    <div id="songsubmit">
    <input type="submit" name="submit" value="Add Song"/>
    </div>
</form>

Answer 6

To achieve the alignment next to the colon, you can utilize absolute positioning. Below is a functional example where I have made some adjustments to ensure it works smoothly:

#songform {
    margin: 20px;
}

#songform > div {
    position: relative;
    margin-top: 20px;
}

#songform > div:after {
  /* Clearfix */
  content:"";
  display:table;
  clear:both;
}

#songform > div > input {
    position: absolute;
    bottom: 0;
}

label {
    float: left;
    width: 250px;
    clear: right;
}

#songsubmit {
    margin-left: 80px;
}

<form action="http://localhost/songadded.php" method="post" id="songform">

    <h4>Add a New Song</h4>

    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>

    <div>
        <label for="artist">Artist:</label>
        <input type="text" name="artist" size="30" value=""/>
    </div>

    <div>
        <label for="album">Album:</label>
        <input type="text" name="album" size="30" value=""/>
    </div>

    <div>
        <label for="genre">Genre:</label>
        <input type="text" name="genre" size="30" value=""/>
    </div>

    <div>
        <label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
        <input type="text" name="release_date" size="30" value="" id="rdinput"/>
    </div>

    <div>
        <label for="bpm">BPM:</label>
        <input type="text" name="bpm" maxlength="3" value=""/>
    </div>

    <div id="songsubmit">
    <input type="submit" name="submit" value="Add Song"/>
    </div>
</form>

How to properly align a form with a multi-lined label in HTML and CSS?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to display only a specific container from a page within an IFRAME?

Issues concerning date and time manipulation - Library Moment.js

Is there a way to position the text within an email body at the center using SendGrid?

Customize button design with data from API request

What is the best way to control the overflow length and display only a specific amount of content at once?

HTML TABS: Make the first TAB automatically selected

Managing numerous ajax forms within a single page

Darkening the background of HTML and CSS text to black

Minimization tools for compressing CSS and JavaScript documents

Steps for eliminating an element using jQuery from a variable filled with HTML code

The -webkit-background-clip feature seems to be malfunctioning in Safari

Ensure the date is displayed in the format of dd-mm-yyyy when using the input type=date

Issue with activation of onClick event in case/switch statement

The overlay background is being obscured by surrounding elements

Is using readonly attribute for HTML inputs a security concern?

What are the steps to shift columns to the left within a table?

Is there a way to change the font size with a click in JavaScript or Angular?

What is the reasoning behind beginning the transition with autofocus enabled?

Calculate the total sum of values in a MySQL column and then group the results

Guide on hiding a div element when clicked outside of it?