Spectre Forms Inline Form
The Spectre Forms provide the most common control component used in a regular form. In this article, we will discuss the form inline forms. The form inline forms is an important component that can make any input field in a single line. Like In the previous articles we used radio, checkbox, etc they can be placed in a single line.
Forms Form Inline forms Class:
- form-inline: This class is used to create a radio and checkboxes in a single line.
Syntax:
<label class="form-radio form-inline">
The below example illustrates the Spectre Forms Form Inline forms:
Example:
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 class = "text-success" > w3wiki </ h1 > < strong > SPECTRE Forms Form Inline forms Class </ strong > </ center > < br > < div class = "form-group" > < label class = "form-label" > Name </ label > < input class = "form-input" placeholder = "Please type your name" > < label class = "form-label" > Mail Id </ label > < input class = "form-input" placeholder = "Your Mail Id" > < br > < label class = "form-label" >Gender</ label > < label class = "form-checkbox form-inline" > < input type = "checkbox" name = "gender" > < i class = "form-icon" ></ i >Male </ label > < label class = "form-checkbox form-inline" > < input type = "checkbox" name = "gender" > < i class = "form-icon" ></ i >Female </ label > < br > < center > < button class = "btn btn-success" > LogIn </ button > < button class = "btn btn-error" > Sign Up </ button > </ center > </ div > </ body > </ html > |
Output:
Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-inline