Skip to main content

Form

Read about how to use the Form classes to your forms.

Example of a form​

<form>
<div class="form-group">
<label>Email address</label>
<input
type="email"
class="form-control form-invalid"
placeholder="Enter email"
/>
</div>

<div class="form-group">
<label>Password</label>
<input
type="password"
class="form-control"
placeholder="Enter password"
/>
</div>

<button type="submit" class="btn btn-primary text-white">Submit</button>
</form>

Form Group​

<div class="form-group">
<label>Email address</label>
<input
type="email"
class="form-control form-invalid"
placeholder="Enter email"
/>
</div>

Form Disabled​

<div class="form-group">
<label>Email address</label>
<input
type="email"
class="form-control form-invalid"
placeholder="Enter email"
disabled
/>
</div>

Form valid/invalid​

<div class="form-group">
<label>Email address</label>
<input
type="email"
class="form-control form-invalid form-valid"
placeholder="Enter email"
/>
</div>

Form Label​

The form label have is already styled.

<label>Email address</label>

Form classes​

ClassProperties
form-groupThe class that makes the form div look good
form-controlThe class that makes your form input looks good
form-invalidIf the content in a form is invalid, then the border color will be red
form-validIf the content in a form is valid, then the border color will be green