Spectre Forms Inline Form
Last Updated :
24 Jan, 2022
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 =
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
</ head >
< body >
< center >
< h1 class = "text-success" >
GeeksforGeeks
</ 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:
Spectre Forms Form Inline forms
Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-inline
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...