Spectre Forms Horizontal forms
Spectre Forms Horizontal forms are horizontal forms if you want to create a horizontal form then you have to use the form-horizontal class in form element. For each fields in the form you can use col-* and col-xs/sm/lg/xl-* class to the child elements for responsive form row layout. Here the * can be replaceable by 1 to 12 any number you want based on the width of the field you want.
Forms Horizontal forms Classes:
- form-horizontal: This class is used to create horizontal form.
Syntax:
<form class="form-horizontal"> .... </form>
Example: Here we will create a simple feedback form, remember one thing button is not the part of form in Spectre, here we will use button in the form as well.
HTML
<!DOCTYPE html> < html > < head > < title >SPECTRE CSS Forms Class</ title > < 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 Horizontal forms Class</ strong > < br > </ center > < form class = "form-horizontal" > < form class = "form-horizontal" > < div class = "form-group" > < div class = "col-3 col-sm-12" > < label class = "form-label" >Name:</ label > </ div > < div class = "col-9 col-sm-12" > < input class = "form-input" type = "text" placeholder = "Name" > </ div > < div class = "col-3 col-sm-12" > < label class = "form-label" >Email Id:</ label > </ div > < div class = "col-9 col-sm-12" > < input class = "form-input" type = "text" placeholder = "Email Id" > </ div > </ div > < label class = "form-label" >Gender:</ label > < label class = "form-radio" > < input type = "radio" name = "gender" > < i class = "form-icon" ></ i > Male </ label > < label class = "form-radio" > < input type = "radio" name = "gender" > < i class = "form-icon" ></ i > Female </ label > < label class = "form-label" > Feedback: </ label > < div class = "col-9 col-sm-12" > < textarea class = "form-input" id = "input-example-1" rows = "3" > </ textarea > </ div > < br > < button class = "btn" >Submit</ button > </ form > </ form > </ body > </ html > |
Output:
Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-horizontal
Contact Us