There are form fields listed below and form validation is also styled.
Add form-label class to labels and form-field for input element, form-field, form-textarea for textarea element(mulitple lines input).
| <label class="form-label">Email Address:</label> | |
| <input | |
| type="email" | |
| class="form-field border-radius-xs padding-xs" | |
| placeholder="name@gmail.com" | |
| required | |
| /> | |
| <label class="form-label">Give your Feedback:</label> | |
| <textarea | |
| class="form-field border-radius-xs padding-xs" | |
| placeholder="write here..." | |
| rows="5"> | |
| </textarea> |
Add disabled attribute to your form element to make them disable. No need to add any extra class. Add readonly attribute to your form element to make them read-only. No need to add any extra class.
| <label class="form-label">Email Address:</label> | |
| <input | |
| type="email" | |
| class="form-field border-radius-xs padding-xs disable-input" | |
| placeholder="disabled input" | |
| disabled | |
| /> | |
| <label class="form-label">Disabled textarea </label> | |
| <textarea | |
| class="form-field border-radius-xs padding-xs disable-input" | |
| placeholder="disabled textarea" | |
| rows="5" | |
| disabled> | |
| </textarea> |
Add form-label class to labels and form-field for input element, form-field, form-textarea for textarea element(mulitple lines input).
| <div class="d-flex"> | |
| <label class="form-label">Email Address:</label> | |
| <input | |
| type="email" | |
| class="form-field border-radius-xs padding-xs" | |
| placeholder="name@gmail.com" | |
| required | |
| /> | |
| </div> | |
| <div class="d-flex"> | |
| <label class="form-label">Password: </label> | |
| <input | |
| type="password" | |
| class="form-field border-radius-xs padding-xs" | |
| placeholder="password" | |
| required | |
| /> | |
| </div> |