Form and form components are very important to any webpage. Bermuda also provide some predefined classes for input methods.
Inputs in Bermuda
Simple form input.
Simple form control with pre-defined sizes and spacing.
<!-- Simple Form Control -->
<form class="container">
<div class="input-group">
<label for="text-input"> Username </label>
<input type="text" id="text-input" />
</div>
<div
class="input-group">
<label for="pwd-input"> Password </label>
<input type="password" id="pwd-input" />
</div>
<div class="input-group">
<button class="btn btn-primary-outline">Submit</button>
</div>
</form>
Form Control With Required Inputs and Messages
Bermuda also provides the way to get required symbol for required input label. It also provides the classes for error messages in input as well as success messages in inputs.
<!-- Form control with success and error messages -->
<form class="container">
<div
class="input-group required success"
success-message="All looks good!"
>
<label for="text-input"> Username </label>
<input type="text" id="text-input" required />
</div>
<div
class="input-group required error"
error-message="Invalid input entered! Please try again."
>
<label for="pwd-input"> Password </label>
<input type="password" id="pwd-input" required />
</div>
<div class="input-group">
<button class="btn btn-primary-outline">Submit</button>
</div>
</form>
Checkbox and Radio Inputs
Bermuda also provides the styles for radio and checkbox inputs.
<!-- Disabled Input -->
<div class="input-group disabled">
<label for="radio-3"> <input id="radio-3" name="radio" type="radio" disabled /> Disabled</label>
</div>
Now, You are done with all the input type that Bermuda provides. You can always change the styles of them.