How to create sub-labels for input elements using HTML


Tags: html,css,input,label

Problem :

I am using windows to create a simple HTML form, and I cannot figure out how to create the sub-labels for the various inputs. The picture (link in comment below) shows what I am trying to produce. Is this a Safari only thing? The closest I came was using CSS display:block which allowed me to move the label on top of the input.



Solution :

You can accomplish that by wrapping each group of label & input within e.g. div, like so:

<div class="form-line">
   <div class="form-field">
      <input class="form-field-input" id="input1" type="text" placeholder="Your value..." />
      <label class="form-field-label" for="input1">
         Text 1
      </label>
   </div>
   <!-- other groups go here -->
</div>

Here's the CodePen example


    CSS Howto..

    How to center my text vertically in a circular div with css

    HTML+CSS: How to force div contents to stay in one line?

    How to vertical-align text on this input box for IE

    How do you make a div display two inline items that stretch the width?

    How to change class named active into link's active attribute in javascript

    Showing different in Internet Explorer and Google Chrome

    how to reference background image urls in css through config entrys

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    How to apply advanced styling for all portlets of one kind

    How to center verticaly n inline containers with different font-size?

    How to select the first type of child of a particular CSS using CSS selector [duplicate]

    How to put logo on navigation bar

    how to apply CSS for @Html.DisplayFor?

    CSS: How to do image change on rollover

    How to combine this css?

    How can you print a page that has been altered by javascript?

    How to achieve table's centering capabilities without tables

    How to make a CSS transform affect the flow of other elements

    How to spread a div to cover available space in a parent container?

    How do I 'freeze' a block level element?

    Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

    Rails 4: How to style navigation for current page using jQuery

    How to create an highlight animation when a control gets focused [closed]

    How do you prevent expanding outer element when adding padding? [duplicate]

    How do I reduce the vertical space between list items in an unordered list?

    How Do I make this JQuery window have a minimum size?

    How do I properly reference files in subdirectories (in xampp) for PHP, CSS, etc. on localhost?

    How to force Visual Studio to honor the BOM at the start of a UTF-8 encoded CSS file?

    How to inline elements with CSS

    CSS - Minus top value how to get rid of the gap below it