Bulma Disabled form

Last Updated : 24 Jan, 2022

Bulma is a free and open-source CSS framework used to make beautiful and responsive websites. Bulma comes with prebuilt components and elements so that we don’t have to style everything from scratch.

In this article, we will be seeing how to disable a form or a part of the form in Bulma. To disable a form or a part of the form, we have to wrap those controls in a fieldset element with a disabled attribute.

Bulma Disabled form Class: There is no predefined class to disabled a form, we can simply use the HTML disabled attribute for that.

Syntax:

<fieldset disabled>
    <div class="field">
        ...
    </div>
</fieldset>

Example: The below example illustrates how to disable a form or part of the form using the fieldset disabled attribute.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
          "width=device-width, initial-scale=1.0"> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> 
  
    <style> 
        h1, 
        p { 
            text-align: center; 
        } 
  
        form { 
            margin: 25px auto; 
            width: 50%; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="is-size-2 has-text-success"> 
            GeeksforGeeks 
        </h1> 
        <p><b>Bulma Disabled Form</b></p> 
  
        <form> 
            <!--The name text input has been disabled by  
                using fieldset disabled -->
            <fieldset disabled> 
                <div class="field"> 
                    <label class="label">Name</label> 
                    <div class="control"> 
                        <input class="input" type="text" 
                               placeholder="Disabled Text Input"> 
                    </div> 
                </div> 
            </fieldset> 
  
            <div class="field"> 
                <label class="label">Email</label> 
                <div class="control has-icons-left has-icons-right"> 
                    <input class="input" type="email"
                           placeholder="Email input" 
                           value="xyz@abc.com"> 
                    <span class="icon is-small is-left"> 
                        <i class="fas fa-envelope"></i> 
                    </span> 
                </div> 
            </div> 
  
            <div class="field"> 
                <label class="label">Message</label> 
                <div class="control"> 
                    <textarea class="textarea"
                              placeholder="Textarea"> 
                    </textarea> 
                </div> 
            </div> 
  
            <div class="field is-grouped"> 
                <div class="control"> 
                    <button class="button is-link"> 
                      Submit 
                    </button> 
                </div> 
                <div class="control"> 
                    <button class="button is-link is-light"> 
                      Cancel 
                    </button> 
                </div> 
            </div> 
        </form> 
    </div> 
</body> 
  
</html>