Spectre Form disabled styles

Last Updated : 30 Jan, 2022

The Spectre Forms provide the most common control component used in regular forms. In this article, we will discuss the form disabled styles. Spectre Forms Form disabled styles is used to disable the form input field. Only the use of the disabled attribute can disable that field.

Forms Form disabled styles Classes: There are no predefined classes to disable any field in Spectre, we can simply use HTML input disable the attribute for that

Syntax:

 <input type="" disabled >

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 disabled styles Class</strong> 
        <br><br> 
    </center> 
    <form > 
        <div class="input-group"> 
            <div class="input-group"> 
            <span class="input-group-addon "> 
              Username 
            </span> 
            <input type="text"
                   class="form-input is-success"
                   placeholder="Username"
                   value="Mastermind@Pubg"> 
            </div> 
            <span class="input-group-addon"> 
              Password 
            </span> 
              
            <input type="text"
                   class="form-input is-error"
                   placeholder="Password"
                   value="********"> 
            </div> 
            <br> 
            <div class="input-group col-12" > 
            <span class="input-group-addon"> 
              Email Id 
            </span> 
            <input type="text col-6"
                   class="form-input is-success"
                   placeholder="Email Id"
                   value="mastermind@gmail.com"
                   disabled > 
            <button class="btn btn-success  
                           input-group-btn 
                           col-3"> 
                             LogIn 
            </button> 
        </div> 
        <label class="form-checkbox"> 
              <input type="checkbox" disabled > 
              <i class="form-icon"></i> 
              I agree that the content of the course  
              will not be used for any bad purpose 
        </label> 
        <p> 
            <span class="text-error">Incorrect Password</span> 
            Password hint: 
            <span class="form-input-hint"> 
             Your First School Friend 
            </span> 
        </p> 
  
    </form> 
</body> 
  
</html>