BootAMP by

form

Overview

We'll never share your email.

<div class="my3 flex flex-column"> 
  <div class="ampstart-input inline-block relative m0 p0 mb1"> 
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Email address"> 
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Email address</label>
  </div> 
  <small class="ampstart-small-text">We'll never share your email.</small>
  <div class="ampstart-input inline-block relative m0 p0 mb1 mt2">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Password"> 
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Password</label> 
  </div>
  <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb1"> 
    <input type="checkbox" value="2" name="cb" id="cb2" class="p0 m0 relative"> 
    <label for="cb2" class="" aria-hidden="true">Check me out</label>
  </div>
</div> 
<button type="submit" class="ampstart-btn">SUBMIT</button>

Form controls


<div class="my3 flex flex-column">
  <div class="ampstart-input inline-block relative m0 p0 mb1">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Email address">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
      Email address
    </label>
  </div>
  <div class="ampstart-input inline-block relative m0 p0 mb1">
    <select name="name12" id="ip12" class="block border-none p0 m0">
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
      <option value="">4</option>
    </select>
    <label for="ip12" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
      Select a option
    </label>
  </div>
  <div class="ampstart-input inline-block relative m0 p0 mb1">
    <textarea name="name13" id="ip13" class="block border-none p0 m0" rows="5"></textarea>
    <label for="ip13" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
      Example textarea
    </label>
  </div>
</div>
                      

Readonly


<div class="ampstart-input inline-block relative m0 p0 mb1">
  <input type="text" name="name1" id="ip1" class="block border-none p0 m0" value="Readonly input here..." placeholder="Readonly input here..." readonly>
  <label for="ip0" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">This input is Disabled</label>
</div>
              

Read only plain text


<div class="flex">
  <legend class="ampstart-label col-12 sm-col-2 md-col-3 lg-col-2 pt4" aria-hidden="true">Email</legend>
  <div class="ampstart-input inline-block relative m0 p0 mb3 col-12 sm-col-10 md-col-9 lg-col-10">
    <input type="text" name="name1" id="ip0" class="block border-none p0 m0" value="email@example.com" placeholder= "email@example.com"readonly>
    <label for="ip0" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">This input is Disabled</label>
  </div>
</div>
<div class="flex">
  <legend class="ampstart-label col-12 sm-col-2 md-col-3 lg-col-2 pt4" aria-hidden="true">Password</legend>
  <div class="ampstart-input inline-block relative m0 p0 mb3 col-12 sm-col-10 md-col-9 lg-col-10">
    <input type="text" name="name1" id="pw1" class="block border-none p0 m0" placeholder="Password">
    <label for="pw1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
  </div>
</div>
              

<div class="flex">
  <div class="col-12 md-col-4 sm-col-4 px2 my1">
    <div class="ampstart-input inline-block relative m0 p0">
      <input type="text" value="email@example.com" name="name1" id="ip1" class="block border-none p0 m0" placeholder="email@example.com" readonly>
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">This input is Disabled</label>
    </div>
  </div>
  <div class="col-12 md-col-4 sm-col-4 px2 my1">
    <div class="ampstart-input inline-block relative m0 p0">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Password">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
    </div>
  </div>
  <div class="col-12 md-col-4 sm-col-4 px2 my1">
    <div class="ampstart-input inline-block relative m0 p0">
      <button type="submit" class="ampstart-btn">Confirm identity</button>
    </div>
  </div>
</div>
              

Range Inputs

Set horizontally scrollable range inputs using .ampstart-input


<div class="ampstart-input inline-block relative m0 p0 my3 py2">
  <input type="range" value="" name="name11" id="ip11" class="block border-none p0 m0" placeholder="Example Range input">
  <label for="ip11" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
   Example Range input
  </label>
</div>
              

Checkboxes and radios

Make input look inactive by adding the disabled boolean attribute to any <input> tag.


<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb1">
  <input type="checkbox" value="2" name="cb" id="cb2" class="p0 m0 relative">
  <label for="cb2" class="" aria-hidden="true">Default checkbox</label>
</div>
<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb1">
  <input type="checkbox" value="3" name="cb" id="cb3" class="p0 m0 relative" disabled="">
  <label for="cb3" class="" aria-hidden="true">Disabled checkbox</label>
</div>
                    

<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
  <input type="radio" value="1" name="rb" id="rb1" class="relative" checked>
  <label for="rb1" class="" aria-hidden="true">Default radio</label>
</div>
<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
  <input type="radio" value="2" name="rb" id="rb2" class="relative">
  <label for="rb2" class="" aria-hidden="true">Second default radio</label>
</div>
<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
  <input type="radio" value="3" name="rb" id="rb3" class="relative" disabled>
  <label for="rb3" class="" aria-hidden="true">Disabled radio</label>
</div>
              

Inline


<div class="inline-block">
  <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mr1">
    <input type="checkbox" value="1" name="cb" id="cb5" class="p0 m0 relative" checked="">
    <label for="cb5" class="" aria-hidden="true">Checkbox 1</label>
  </div>
  <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mr1">
    <input type="checkbox" value="2" name="cb" id="cb6" class="p0 m0 relative">
    <label for="cb6" class="" aria-hidden="true">Checkbox 2</label>
  </div>
  <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mr1">
    <input type="checkbox" value="3" name="cb" id="cb3" class="p0 m0 relative" disabled="">
    <label for="cb3" class="" aria-hidden="true">Disabled checkbox</label>
  </div>
</div>
              

<div class="inline-block mt2">
  <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
    <input type="radio" value="1" name="rb" id="rb4" class="relative" checked>
    <label for="rb4" class="" aria-hidden="true">Radio 1</label>
  </div>
  <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
    <input type="radio" value="2" name="rb" id="rb5" class="relative">
    <label for="rb5" class="" aria-hidden="true">Radio 2</label>
  </div>
  <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
    <input type="radio" value="3" name="rb" id="rb3" class="relative" disabled>
    <label for="rb3" class="" aria-hidden="true">Disabled Radio</label>
  </div>
</div>
            

Without labels


<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0">
  <input type="checkbox" value="1" name="cb" id="cb1" class="p0 m0 relative">
</div>
<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0">
  <input type="radio" value="1" name="rb" id="rb1" class="relative">
</div>
              

Layout

Form Group


<div class="flex flex-column">
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Input1">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
     Label1
    </label>
  </div>
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Input2">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
     Label2
    </label>
  </div>
</div>
                    

Form grid


<div class="flex flex-wrap">
  <div class="col-6">
    <div class="ampstart-input inline-block relative m0 p0 mb3 ">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="First Name">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">This input is Disabled</label>
    </div>
  </div>
  <div class="col-6">
    <div class="ampstart-input inline-block relative m0 p0 mb3 ">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Last Name">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
    </div>
  </div>
</div>
              

Horizontal form

Radios
Checkbox

<div class="flex flex-wrap">
  <legend class="ampstart-label col-12 sm-col-4 lg-col-4 pt3" aria-hidden="true">Email</legend>
  <div class="ampstart-input inline-block relative m0 p0 mb3 col-12 sm-col-8">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Email">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
  </div>
</div>
<div class="flex flex-wrap">
 <legend class="ampstart-label col-12 sm-col-4 lg-col-4 pt3" aria-hidden="true">Password</legend>
 <div class="ampstart-input inline-block relative m0 p0 mb3 col-12 sm-col-8">
   <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Password">
   <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
 </div>
</div>
<div class="flex flex-wrap">
  <legend class="ampstart-label col-12 sm-col-4 lg-col-4">Radios</legend>
  <div class="flex flex-column col-12 sm-col-8">
    <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
      <input type="radio" value="1" name="rb" id="rb10" class="relative" checked="">
      <label for="rb10" class="" aria-hidden="true">First radio</label>
    </div>
    <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
      <input type="radio" value="2" name="rb" id="rb11" class="relative">
      <label for="rb11" class="" aria-hidden="true">Second radio</label>
    </div>
    <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
      <input type="radio" value="3" name="rb" id="rb12" class="relative" disabled="">
      <label for="rb12" class="" aria-hidden="true">Third disabled radio</label>
    </div>
  </div>
</div>
<div class="flex flex-wrap">
  <legend class="ampstart-label py1 col-12 sm-col-4 lg-col-4">Checkbox</legend>
  <div class="flex flex-column col-12 sm-col-8">
    <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb1">
      <input type="checkbox" value="1" name="cb" id="cb1" class="p0 m0 relative">
      <label for="cb1" class="" aria-hidden="true">Checkbox 1</label>
    </div>
  </div>
</div>
<div class="flex flex-wrap">
  <button class="ampstart-btn col-12 sm-col-3 lg-col-3">SUBMIT</button>
</div>
                  

Column sizing


<div class="flex flex-wrap py2">
  <div class="col-12 sm-col-6 md-col-6">
    <div class="ampstart-input inline-block relative m0 p0">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="City">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
    </div>
  </div>
  <div class="col-12 sm-col-3 md-col-3 px1">
    <div class="ampstart-input inline-block relative m0 p0">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="State">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
    </div>
  </div>
  <div class="col-12 sm-col-3 md-col-3 px1">
    <div class="ampstart-input inline-block relative m0 p0">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Zip">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
    </div>
  </div>
</div>
                  

Inline forms


<form class="inline-block">
  <div class="ampstart-input relative inline-block mb3">
    <select name="name12" id="ip12" class="block border-none p0 m0">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <label for="ip12" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
      Preference
    </label>
  </div>
  <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb3 ">
    <input type="checkbox" value="1" name="cb" id="chkb1" class="p0 m0 relative">
    <label for="chkb1" class="" aria-hidden="true">Remember my preference</label>
  </div>
  <button type="submit" class="ampstart-btn my-1">Submit</button>
</form>
              

Help text

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

<div class="flex flex-column">
  <div class="ampstart-input inline-block relative m0 p0 mb1">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Password">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
      Password
    </label>
  </div>
  <small class="ampstart-small-text ">Your password must be 8-20 characters long, contain letters
    and numbers, and must not contain spaces, special characters, or emoji.</small>
</div>
                  
Must be 8-20 characters long.

<div class="flex flex-wrap inline-block">
  <div class="ampstart-input inline-block relative m0 p0 mb1 mr2">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Password">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
     Password
    </label>
  </div>
  <small class="ampstart-small-text mt4">Must be 8-20 characters long.</small>
</div>
                        

Disabled forms


<div class="ampstart-input inline-block relative m0 p0 mb1">
  <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" disabled placeholder="Disabled input">
  <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Disabled input</label>
</div>
<div class="ampstart-input inline-block relative m0 p0 mb1">
  <select name="Disabled select menu" id="ip12" class="block border-none  p0 m0" disabled>
    <option value="1">Apple</option>
    <option value="2">Orange</option>
    <option value="3">Lemon</option>
    <option value="4">Grape</option>
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
     Disabled select menu
    </label>
  </select>
</div>
<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb1">
  <input type="checkbox" value="2" name="cb" id="cb2" class="p0 m0 relative" disabled>
  <label for="cb2" class="" aria-hidden="true">Cant check this</label>
</div>
<button class="ampstart-btn" disabled>SUBMIT</button>