How to correctly style a form?


Tags: html,css

Problem :

I'm really not that good at CSS, and I want to know how to correctly style a form in a manner that it puts each single text input and label in a line. like this :

<label for="input1">...</label>
<input type="text" id="input1"/>
<label for="input2">...</label>
<input type="text" id="input2"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
<label for="input3">...</label>
<input type="text" id="input3"/>

and it would be shown in the webpage like :

(label)(input)
(label)(input)
(label)(input)
(label)(input)


Solution :

I recommend this tutorial by A List Apart about Prettier Accessible Forms. You can also use a definition list with some custom styling, e.g.,

<dl><dt><label></label></dt>
  <dd><input></dd></dl>

And something like:

dl dt {
    float: left;
    width: 8em;
}

Edit: to sum up the A List Apart article, they suggest you put form fields in an ordered list ol. Labels are displayed as inline-block so they appear horizontally next to their associated fields.


    CSS Howto..

    how to get rid of firefox image border

    How could I use postcss-bem with css-modules or postcss-js in React component

    How can I have a div/span “fill in” the remaining width/height of the page, and stay fixed in position?

    How to setup flexible box CSS through jQuery? css( display, '-moz-box') doesn't seem to work?

    How to gray out a HTML element

    How to center CSS-shapes within a wrapper in a row

    How to remove last TD in first LINE

    How to make content next to a fixed-position menu not overlap in smaller resolutions

    How to select an UNTAG element in CSS

    How to properly link CSS files with PHP footer and header

    How can I allign select menu with a button on the same line with css bootstrap?

    How to figure a text box set of characters into a text box figure 2 effect?

    How to make a web form with 3 columns?

    Show DIV on hover of other DIV that is not parent with CSS or JS [duplicate]

    How to fix html border corner slope with css?

    How to convert shorthand CSS to longhand?

    hide/show multiple div elements using jquery

    How to add space after border in css

    How to do this specifically things in CSS for a table

    How do I let a div fill in the blank space

    How to use a Video as text background in css

    How to align a label to the “BOTTOM” of a div in CSS?

    How to align an img and a carousel next to each other, with max-width of 1000px?

    How can I debug twitter bootstrap v4-alpha grid? col-sm-offset-* not working

    How to make a Facebook-image-style web design using CSS3?

    How to disable Cufon on certain elements?

    How to add html glyph markup to JQuery show/hide function

    How to add php to wordpress form

    How to make slanted ribbon

    How to write a more specific css