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@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/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>

Output:

Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-horizontal

Spectre Forms Horizontal forms

Explore