Customizable CSS
search

Forms Fields

Form field

you can createa simple form field with the class .form-field

<div class="form-field" id="name">
  <label for="name">Name </label>
  <input class="form-input" type="text" name="name" />
  <span class="form-text">
    this field is required
  </span>
</div>
this field is required

Invalid Form field

In order to indicate an invalid form field you can add the class .invalid to an existing .form-field

<div class="form-field invalid " id="name">
  <label for="name">Name </label>
  <input class="form-input" type="text" name="name" />
  <span class="form-text">
    this field is required
  </span>
  <div></div>
</div>
this field is required

Horizontal Form Field

You can make horizontal fields by adding the class .horizontal into a form field

<div class="form-field horizontal " id="name">
  <label for="name">Name </label>
  <input class="form-input" type="text" name="name" />
  <span class="form-text">
    this field is required
  </span>
  <div></div>
</div>

Form Field with addons

you can adds addons by encapsulating the field and addon on a div with the .with-addons class

<div class="form-field"> 
    <label>Field</label>
    <div class="with-addons">
        <input type="text" class="form-input">
        <button class="btn">Search</button> 
    </div>
</div>

On this page

Site

Support

Customizable CSS By Haniel Hernández. 2021