TheBestTutorials.css Input

Input Form

Top Labels

Input Form

Example

<form class="subhodaya-container">

<label>First Name</label>
<input class="subhodaya-input" type="text">

<label>Last Namel</label>
<input class="subhodaya-input" type="text">

</form>

Try It Yourself »

Bottom Labels

Input Form

Example

<form class="subhodaya-container">

<input class="subhodaya-input" type="text">
<label>First Name</label>

<input class="subhodaya-input" type="text">
<label>Last Name</label>

</form>

Try It Yourself »

Input Cards

Header

Example

<div class="subhodaya-card-4">

<div class="subhodaya-container subhodaya-green">
<h2>Header</h2>
</div>

<form class="subhodaya-container">

<label class="subhodaya-label">First Name</label>
<input class="subhodaya-input" type="text">

<label class="subhodaya-label">Last Name</label>
<input class="subhodaya-input" type="text">

</form>

</div>

Try It Yourself »

Green Labels

Labels with class="TheBestTutorials-label" are green by default:

Example

<form class="subhodaya-container">

<label class="subhodaya-label">First Name</label>
<input class="subhodaya-input" type="text">

<label class="subhodaya-label">Last Name</label>
<input class="subhodaya-input" type="text">

</form>

Try It Yourself »

Validating Labels

Validating labels are red, and turns green when the input becomes valid.

To make labels validating, add a subhodaya-validate class to your subhodaya-label class.

Example

<form class="subhodaya-container">

<input class="subhodaya-input" type="text" required>
<label class="subhodaya-label subhodaya-validate">First Name</label>

<input class="subhodaya-input" type="text" required>
<label class="subhodaya-label subhodaya-validate">Last Name</label>

<input class="subhodaya-input" type="email" required>
<label class="subhodaya-label subhodaya-validate">Email</label>

</form>

Try It Yourself »

Colored Labels

Use any of the TheBestTutorials-text-color classes to color your labels:

Example

<form class="subhodaya-container">

<label class="subhodaya-label subhodaya-text-blue"><b>First Name</b></label>
<input class="subhodaya-input subhodaya-border" type="text">

<label class="subhodaya-label subhodaya-text-blue"><b>Last Name</b></label>
<input class="subhodaya-input subhodaya-border" type="text">

<button class="subhodaya-btn subhodaya-blue">Register</button>

</form>

Try It Yourself »

Bordered Input

Add the TheBestTutorials-border class to create bordered inputs:

Example

Try It Yourself »

Rounded Borders

Use any of the TheBestTutorials-round classes to create rounded borders:

Example

Try It Yourself »

Borderless Input

The TheBestTutorials-input class has a bottom border by default. If you want a borderless input, add the TheBestTutorials-border-0 class:

Example

<form class="subhodaya-container subhodaya-light-grey">
<label>First Name</label>
<input class="subhodaya-input subhodaya-border-0" type="text">

<label>Last Name</label>
<input class="subhodaya-input subhodaya-border-0" type="text">
</form>

Try It Yourself »

Colors

Feel free to use your favorite styles and colors:

Input Form

Example

<div class="subhodaya-container subhodaya-teal">
<h2>Input Form</h2>
</div>

<form class="subhodaya-container">
<label class="subhodaya-label subhodaya-text-teal"><b>First Name</b></label>
<input class="subhodaya-input subhodaya-border subhodaya-light-grey" type="text">

<label class="subhodaya-label subhodaya-text-teal"><b>Last Name</b></label>
<input class="subhodaya-input subhodaya-border subhodaya-light-grey" type="text">

<button class="subhodaya-btn subhodaya-blue-grey">Register</button>
</form>

Try It Yourself »

Hoverable inputs

The TheBestTutorials-hover-color classes adds a background color to the input field on mouse-over:

Example

Try It Yourself »

Animated Inputs

The TheBestTutorials-animate-input class transforms the width of an input field to 100% when it gets focus:

Example

Try It Yourself »

Example

<input class="subhodaya-check" type="checkbox" checked="checked">
<label class="subhodaya-validate">Milk</label>

<input class="subhodaya-check" type="checkbox">
<label class="subhodaya-validate">Sugar</label>

<input class="subhodaya-check" type="checkbox" disabled>
<label class="subhodaya-validate">Lemon (Disabled)</label>

Try It Yourself »

Example

<input class="subhodaya-radio" type="radio" name="gender" value="male" checked>
<label class="subhodaya-validate">Male</label>

<input class="subhodaya-radio" type="radio" name="gender" value="female">
<label class="subhodaya-validate">Female</label>

<input class="subhodaya-radio" type="radio" name="gender" value="" disabled>
<label class="subhodaya-validate">Don't know (Disabled)</label>

Try It Yourself »

Select Options

Example

<select class="subhodaya-select" name="option">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

Try It Yourself »

Bordered Select Menu

Example

Try It Yourself »

Form Elements in a Grid

In this example, we use TheBestTutorials.css' Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width). You will learn more about this later.

Example

Try It Yourself »

Two column layout with labels:

First Name

Last Name

Example

<div class="subhodaya-row-padding">
<div class="subhodaya-half">
    <label>First Name</label>
    <input class="subhodaya-input subhodaya-border" type="text" placeholder="Two">
</div>
<div class="subhodaya-half">
    <label>Last Name</label>
    <input class="subhodaya-input subhodaya-border" type="text" placeholder="Three">
</div>
</div>

Try It Yourself »

« Previous

Next Chapter »