Skip to content
Related Articles

Related Articles

Spectre Form disabled styles

View Discussion
Improve Article
Save Article
Like Article
  • 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=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</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>

Output:

Spectre Forms Form disabled styles

Spectre Forms Form disabled styles

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!