Jijnasu

I wanted to create a simple but good looking HTML Form for my applications. After searching the internet for inspiration this is what i came up with –

See the Pen HTML forms by hrishikesh mk (@avastava) on CodePen.0

Code

HTML

Inside the form (.fiform) the input elements are enclosed inside a container (div .fi). Inside the container comes the label element which encloses the input text and input elements. This is done so that the input element gets focus when the user clicks anywhere inside the label.

<form id="add_form" class="fiform" novalidate >
  <h1>New User</h1>
  <div class="fi" >
    <label>
      <span>User Type</span>
      <select id="user_type" data-lname="User Type" required data-sname="user_type" >
        <option value="1" >Single</option>
        <option value="1" >Team</option>
      </select>
    </label>
  </div>
  <div class="fi" >
    <label>
    <span>Username</span>
    <input id="username" required min="2" max="50" />
    </label>
  </div>
  <div class="fi" >
    <label>
    <span>Password</span>
    <input id="password" type="password" required min="6" max="50" />
    </label>
  </div>
  <div class="fi" >
    <label>
    <span>Address</span>
    <textarea id="add" required min="6" max="50" ></textarea>
    </label>
  </div>
  <div class="fi" >
    <label>
    <input type="checkbox" checked />
    <span>Recieve Notifications</span>
    </label>
  </div>
  <div class="fi" >
    <label>
    <input type="submit" value="Add" id="submit" />
    </label>
  </div>
</form>

 

CSS

The form is given a display of table. Inside the form the input fields with labels are put in a container with a display of table-row. The labels are given a display of table-cell so that they fill the parent and its contents can be vertically aligned.

* {
    margin: 0;
    padding: 0;
    font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
body {
    padding-top: 55px;
    background-color: #f8f8f8;
}
.fiform {
    display: table;
    width: 90%;
    max-width: 400px;
    min-width: 300px;
    margin: auto;
    padding: 30px 0;
    padding-top: 0;
}
.fiform h1 {
    text-align: center;
}
.fi {
    display: table-row;
    text-align: left;
    height: 100px;
}
label {
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
}
label span {
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

The input elements are given a width of 100% so that they fill the form width. Also let’s give the inputs the same background as the body. Input auto-fill color is also changed in webkit browsers using -webkit-autofill property.

input,
select,
textarea {
    display: block;
    margin: auto;
    width: 100%;
    height: 35px;
    border: 0;
    border-bottom: solid 1px;
    font-size: 18px;
    background-color: #f8f8f8;
}
input[type="submit"] {
    height: 70px;
}
input:disabled {
    background-color: #f0f0f0;
}
button,
input[type="submit"] {
    border: 0;
    cursor: pointer;
    background-color: #dddddd;
}
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
    outline: 0;
    border-bottom: solid 1px rgb(0, 188, 215);
}
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #f8f8f8 inset;
}
textarea {
    height: 100px;
}
select[multiple] {
    height: auto !important;
    margin-bottom: 20px;
    border-bottom: solid 1px #000;
}
select {
    text-transform: capitalize;
}

Everything looked good until the time came to add check-boxes to the form. So i started my search for cool check box styles.

Fortunately I came across a youtube channel called Devtips. So i just stole the idea and got a good checkbox style for my form.

Here is the link to their tutorial – How to make Custom Animated Checkboxes with CSS .

Javascript

Now the only thing left was to highlight the label text when the input element is in focus. So let’s bring in some javascript.

var inputfade = document.querySelectorAll('.fi input,.fi select,.fi textarea');
var ifln = inputfade.length;

function input_fade(elem, on) {
  var span_elem = elem.parentNode.getElementsByTagName('span');
  if (span_elem.length) {
    span_elem[0].style.color = on ? 'rgb(0, 188, 215)' : '#000';
  }
}
for (var i = 0; i < ifln; i++) {
  inputfade[i].onfocus = function() {
    input_fade(this, true);
  }
  inputfade[i].onblur = function() {
    input_fade(this, false);
  }
}

And the form is ready.

Link to part two of the tutorial – Styling HTML Forms 2 .