Open In App

Spectre Forms Input groups

Improve
Improve
Like Article
Like
Save
Share
Report

Spectre Forms Input groups are used to categorize the form field for example personal details, billing details.  If the user wants to attach text and button along with input, add the input-group class to the input container. Add the input-group-addon class to the text element and input-group-btn to the button element.

Forms Input groups classes:

  • input-group: This class is used to the input field in a group applicable on the input container.
  • input-group-addon: This class is used to the input field in a group applicable on the input container.
  • input-group-btn: This class is used to button in a group.

Syntax:

<div class="input-group">
    <span class="input-group-addon">...</span>
    <button class="input-group-btn">...</button>
    ...
</div>

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 Input types Class</strong>
        <br><br>
    </center>
    <form >
        <div class="input-group">
            <div class="input-group">
                <span class="input-group-addon ">
                  Name
                </span>
                <input type="text" class="form-input"
                       placeholder="Name">
            </div>
            <span class="input-group-addon">
              Course
            </span>
              
               <input type="text" class="form-input"
                      placeholder="Course you want">
        </div>
        <br>
        <div class="input-group col-12">
            <span class="input-group-addon">
              Email Id
            </span>
            <input type="text col-6" class="form-input"
                   placeholder="Email Id">
            <button class="btn btn-success input-group-btn col-3">
                             Buy Course
            </button>
        </div>
        <label class="form-checkbox">
            <input type="checkbox">
              <i class="form-icon"></i>
              I agree that the content of the course 
              will not be used for any bad purpose
        </label>
    </form>
</body>
</html>


Output:

Spectre Forms Input groups

Spectre Forms Input groups

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



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads