Spectre Forms

Spectre Forms is one of the most important elements in Spectre. Spectre forms offer us so many common style classes that designing a form becomes so easy. Like creating input fields, textarea, select, checkboxes, etc. All the components are mentioned and described below.

Spectre Form input: This control styles used to set the input field.
Spectre Form textarea: This control styles used to set the textarea.
Spectre Form select: This control styles used to set the select options.
Spectre Form radio: This control styles used to to set the radio buttons.
Spectre Form switch: This control styles used to ti set the switch buttons.
Spectre Form checkbox: This control styles used to set the checkboxes.
Spectre Forms Inline forms: This control styles used to make the form inline.
Spectre Forms Horizontal forms: This control styles used to make the form horizontal.
Spectre Form sizes: This control styles used to the size of the form.
Spectre Form icons: This control styles used to set the used icon in the form.
Spectre Form Input types: This control styles used to set the input types.
Spectre Form Input groups: This control styles used to categorized the input in groups.
Spectre Form validation styles: This control styles used to set form validation success and error messages.
Spectre Form disabled styles: This control styles used to disabled form components style.

Spectre Forms Class:

form-group: This class is used to create a form

Note: To create a form in spectre above mentioned class will be container of forms component.

Syntax:

<div class="form-group">
...
</div>

Below example illustrate the Spectre Forms;

Example:

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 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 type="text col-6"
                       class="form-input is-success"
                       placeholder="Email Id"
                       value="mastermind@gmail.com">
                </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">
                <i class="form-icon icon icon-shutdown"></i>
            </button>
         </form>
  </form>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <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
        </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>
        <select class="form-select">
            <option>Choose Course</option>
            <option>Front-End Development</option>
            <option>Back-End Development</option>
            <option>Full-stack Development</option>
        </select>
        <label class="form-label">Special</label>
        <label class="form-checkbox form-inline">
        <input type="checkbox" name="gender">
        <i class="form-icon"></i>JS
        </label>
        <label class="form-checkbox form-inline">
        <input type="checkbox" name="gender">
        <i class="form-icon"></i>Spectre
        </label>
        <label class="form-label">Gender</label>
        <label class="form-radio">
          <input type="radio" name="gender" checked>
          <i class="form-icon"></i> Male
        </label>
        <label class="form-radio">
          <input type="radio" name="gender">
          <i class="form-icon"></i> Female
        </label>
        <br>
        <center>
            <button class="btn btn-success">
            Download
            <i class="form-icon icon icon-download"></i>
            </button>
            <button class="btn btn-error">
            Power Off
            <i class="form-icon icon icon-shutdown"></i>
            </button>
        </center>
    </div>
</body>

</html>

Output:

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

Explore