Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align form elements in CSS

Tags:

css

I'm new to CSS and have a simple login form that I'm trying to align correctly. Basically two columns with the labels and the Login button in one column and the text boxes in another column. How do I do this in CSS?

The HTML code is:

<body>   <form action="" method="post">     <label> Username </label>     <input type="text"/>      <label> Password </label>     <input type="password"/>      <input type="submit" value="submit"/>   </form> </body> 
like image 480
DavidL Avatar asked Nov 02 '12 22:11

DavidL


People also ask

How do I align a field in a CSS form?

Solutions with CSS propertiesWe specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to "inline-block" and give a fixed width. After that, set the text-align property to "right", and the labels will be aligned with the inputs on the right side.

How do I align text in a form?

HTML | <input> align Attribute left: It sets the alignment of image to the left. it is a default value. right: It sets the alignment of image to the right. middle: It sets the alignment of image to the middle.


1 Answers

This is one approach that works:

form {   width: 80%;   margin: 0 auto; }  label, input {   /* In order to define widths */   display: inline-block; }  label {   width: 30%;   /* Positions the label text beside the input */   text-align: right; }  label+input {   width: 30%;   /* Large margin-right to force the next element to the new-line            and margin-left to create a gutter between the label and input */   margin: 0 30% 0 4%; }   /* Only the submit button is matched by this selector,        but to be sure you could use an id or class for that button */  input+input {   float: right; }
<form action="#" method="post">   <!-- note that I've added a 'for' attribute to        both of the <label> elements, which is        equal to the 'id' attribute of the relevant        <input> element; this means that clicking        the <label> will focus the <input>: -->   <label for="username">Username</label>   <input id="username" type="text" />    <label for="password">Password</label>   <input id="password" type="password" />    <input type="submit" value="submit" /> </form>

JS Fiddle demo.

Adjust dimensions and margins to suit your use-case and aesthetic of course.

Of course, currently, there are other means by which this can work, such as CSS Grid:

*, ::before, ::after {   /* selecting all elements on the page, along with the ::before      and ::after pseudo-elements; resetting their margin and      padding to zero and forcing all elements to calculate their      box-sizing the same way, 'border-box' includes the border-widths,      and padding, in the stated width: */   box-sizing: border-box;   margin: 0;   padding: 0; }  form {   /* Using CSS Grid to lay out the elements in two-dimensions: */   display: grid;   /* specifying a 0.5em gutter/gap between adjacent elements: */   gap: 0.5em;   /* declaring a number of named grid areas in order to lay out      the child elements; the areas identified with a period (.)      are 'empty' areas, whereas the areas named by strings are      used, later, to place elements according to those names: */   grid-template-areas:     "usernameLabel . usernameInput"     "passwordLabel . passwordInput"     ". . submit";   /* declaring the size of each of the three columns; 1fr is      one fractional unit of the available space, and is the      size of the first and last of the columns. The central      column is declared as being 0.5em in width: */   grid-template-columns: 1fr 0.5em 1fr;   margin: 1em auto;   width: 80%; }  label {   /* placing all <label> elements in the grid column 1 (the first): */   grid-column: 1;   /* aligning text-content to the right in order to position the label      text near to the relevant <input>: */   text-align: right; }  label::after {   content: ':'; }  input {   grid-column: 3; }  button {   /* positioning the <button> element in the grid-area identified      by the name of 'submit': */   grid-area: submit; }
<form action="" method="post">   <label for="username">Username</label>   <input id="username" type="text" />    <label for="password">Password</label>   <input id="password" type="password" />    <input type="submit" value="submit" /> </form>

JS Fiddle demo.

References:

  • Adjacent-sibling (+) combinator.
  • box-sizing.
  • display.
  • float.
  • gap.
  • grid-area.
  • grid-template-areas.
  • grid-template-columns.
  • grid-template-rows.
  • margin.
  • width.

Bibliography:

  • "Basic Concepts of grid layout."
like image 89
David Thomas Avatar answered Sep 24 '22 23:09

David Thomas