Form Type

Commonly used form input types and utility classes. Input types include text, search, URL, email, and password. <input type="text"> is the browser default. See the form icon or form icon pages for optional glyphs or icons inside your forms.

text

Text Label

<label>Text Label</label>
<div class="evo-space-1"></div>
<input type="text" name="text" placeholder="Text Placeholder" />

Apply a "type" to your input classes, such as this <input type="text"> tag.

<input type="text" name="text" placeholder="Evo Text Placeholder" class="evo-form evo-form-padding evo-form-box" />

Apply a "type" to your input classes, such as this <input type="text"> tag, along with the evo-form, form-padding, and form-box classes.

search

Search Label

<label>Search Label</label>
<div class="evo-space-1"></div>
<input type="search" name="search" placeholder="Search Placeholder" />

Create an <input type="search"> tag.

<input type="search" name="search" placeholder="Evo Search Placeholder" class="evo-form evo-form-padding evo-form-box box-square" />

Create an <input type="search"> tag, then apply the evo-form, form-padding, and form-box classes. The box-square class is added to insure squared corners on IOs devices.

URL

URL Label

<label>URL Label</label>
<div class="evo-space-1"></div>
<input type="url" name="url" placeholder="URL Placeholder" />

Create an <input type="url"> tag.

<input type="url" name="url" placeholder="Evo URL Placeholder" class="evo-form evo-form-padding evo-form-box" />

Create an <input type="url"> tag, then apply the evo-form, form-padding, and form-box classes.

Email

Email Label

<label>Email Label</label>
<div class="evo-space-1"></div>
<input type="email" name="email" placeholder="Email Placeholder" />

Create an <input type="email"> tag.

<input type="email" name="email" placeholder="Evo Email Placeholder" class="evo-form evo-form-padding evo-form-box" />

Create an <input type="email"> tag, then apply the evo-form, form-padding, and form-box classes.

Password

Password Label

<label>Password Label</label>
<div class="evo-space-1"></div>
<input type="password" name="password" placeholder="Password Placeholder" required />

Create an <input type="password"> tag.

<input type="password" name="password" placeholder="Evo Password Placeholder" class="evo-form evo-form-padding evo-form-box" required />

Create an <input type="password"> tag, then apply the evo-form, form-padding, and form-box classes.