Spectre Forms Horizontal forms

Last Updated : 10 Feb, 2022

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">GeeksforGeeks</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>