Spectre Form Input

Last Updated : 24 Jan, 2022

The Spectre Forms provide the most common control component used in a regular form. In this article, we will discuss form input. The form input is an important component that is required to get the data from the user as usual.

Form Input Class:

form-input: This class is used to create the input field for the data.

Syntax:

<input class="form-input">

Example:

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 Form Input Class</strong> 
        <br> 
    </center> 
    <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"> 
        <label class="form-label"> 
            Password 
        </label> 
        <input class="form-input" 
               type="password"
               placeholder="Please enter your Password"> 
        <br> 
        <center> 
            <button class="btn btn-success"> 
              LogIn 
            </button> 
            <button class="btn btn-error"> 
              Sign Up 
            </button> 
        </center> 
    </div> 
      
</body> 
  
</html>