Open In App

Spectre Forms Inline Form

Last Updated : 24 Jan, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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

Spectre Forms Form Inline forms

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



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads