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: https://i.sstatic.net/ZpPyB.png

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;
}
htmlcss

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

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 №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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Link not functioning correctly on mobile-responsive CSS

Having some trouble with hyperlinks over a background image. The hyperlinks work fine normally, but in mobile view, nothing happens when clicking on them. Below is the code for the hyperlinks. You can also visit the site and see that the "Post a Project" ...

htmlcssbootstrap-4

Ways to reset a JQuery/JavaScript filter

I am currently working on a list of div items that are being filtered and sorted using JavaScript. Each item animates as it enters the screen, scaling up to its final size. However, when I apply filters using buttons, items that are already displayed do n ...

javascriptjquerycss

The JavaScript-generated form element will not be included in the data submitted through the POST method

While it may appear that this question has been asked before, my specific inquiry seems to be unique as I have not found a similar answer in other threads. Therefore, I am initiating a new discussion. My issue revolves around a form which contains a link ...

javascriptjqueryhtmlforms

Show various shapes based on the values retrieved from MYSQL database

I am just starting to learn MYSQL and PHP, and I am currently working on creating a Course registration application using xampp. This application is designed to collect user data and store it in a MYSQL database. Within my MYSQL table, I have user details ...

phpmysqlhtml

Creating a string-based template that can be included in Django

I need to create a list of clickable links for my navigation bar with the URLs provided using the url-tag. To achieve this, I have a list of dictionaries containing all the necessary information for each link, and I am creating a template string with them ...

htmldjangotemplatesdjango-templatestemplatetags

Left-align elements within a div container that is centered

I want to left-align my elements within a div container that is centered. I used the text-align property to center the overall div, but now I'm having trouble aligning another content container's text to the left within the center-aligned div. H ...

htmlcss

The specified 'image' identifier has not been defined. There is no such member within 'never'

Edit :: Finally, I managed to get the output successfully, but there's still an error that baffles me. https://i.stack.imgur.com/2wrNM.pngAlthough I've tackled similar issues in the past, this particular one seems elusive. I attempted using "?", ...

htmlangular

Canvas displaying inaccurately (unsteady)

While working on a simple HTML5/javascript game, I encountered an unusual issue with the canvas drawings - they seem to be unstable. I have a map that needs to be drawn in a specific way: The background consists of 2 layers: the ocean and the islands. Th ...

javascripthtmlcanvas

Is it possible to submit forms in MIME format?

I've been attempting to send a form via email in MIME format, but I've run into an issue where the input tags are replaced with square brackets. For example: < input type="submit" value="Submit" class="button"/> ==> [Submit] I tried u ...

html

Is it possible to establish a CSS minimum width that is relative to a different element?

Is it possible to set the min-width of a submenu in CSS to be equal to that of the corresponding link in a navigation menu? I am using LESS for my styling. <ul> <li> <a href="">Item FooBarBaz</a> <ul class="submenu"&g ...

javascriptjqueryhtmlcss

What are the recommended web-safe colors to use for styling an <hr> element?

Having an <hr> element with the color #ac8900 is what I require. When I apply the style in the traditional way <hr color="#ac8900"> it functions perfectly. However, the expectation is to style everything using CSS, so I attempted the followin ...

css

Preventing responsive elements from loading with HTML scripts

Currently, I am utilizing the Gumby framework which can be found here. Everything appears to be running smoothly. My goal is to incorporate a mobile navigation list where the links are grouped under a single button, as outlined here. Initially, this funct ...

javascriptjqueryhtmlcssgumby-framework

Looking to determine if a specific element is assigned multiple class names

Help needed! Can you tell me how to check if an element contains more than one classname using pure javascript, without using jQuery? For example: If #test has both the classnames "classA and classB", then { alert(true) } else { alert(false) } Here is ...

javascriptjqueryhtml

The use of @font-face in CSS seems to be malfunctioning

I am having trouble changing the font in my CSS to what I want it to be. body{ background-color:#a8a7a7; color:#C50909; font-family: main, Calibri; text-align:center; } @font-face{ font-family: main; src: url('fonts/RegencieLight.ttf'); } ...

htmlcssfont-face

Error occurred during SCSS rendering process: [Internal Error: Unable to locate or read the specified file.]

When trying to create a website using scss, I encounter an error every time I save the scss file. Strangely, after saving it multiple times, the file will render properly. Although this issue is minor, it really bothers me. I have searched for a solution ...

csssass

Place a vertical slider adjacent to an HTML element on either the left or right side

I'm struggling to bind a range slider to the left or right side of a canvas that displays video. Despite my efforts, CSS seems to be putting up a strong fight. I can handle issues like stretching and slider values, but attaching it to the canvas is pr ...

javascripthtmlcsshtml5-canvasrange

Phaser 3 shows images as vibrant green squares

In my project, I have two scenes: Loading and Menu. In the loading scene, I load images with the intention of displaying them in the menu. Here is the code for the Loading scene: import { CTS } from './../CTS.js'; import { MenuScene } from &apo ...

javascripthtmlhtml5-canvasphaser-framework

Displaying an image gradually as the user moves down the page

Recently, I came across this fascinating website: As you scroll down, the images on the site gradually unveil more details, which caught my attention. This unique effect is not something commonly seen on websites, and I'm curious to learn how it is ...

javascripthtmlcssweb

Ensuring HTML is clean in SQL query using PHP function for sanitization

I am currently working on a PHP page that contains a dropdown form. When an option is selected, it triggers an AJAX script which queries a result from the same MySQL table. Overall, the functionality works as expected. However, I have encountered an issue ...

phphtmlsqlfunctionsanitize

How can I prevent or override the text being pushed to the right by CSS::before?

Using the css property ::before, I am attempting to insert a tag before a paragraph. While I am able to display the tag correctly, it is causing the text within the paragraph to be shifted to the right. Ideally, I would like the tag to appear in the top-le ...

css