Skip to content
Related Articles

Related Articles

Bulma Disabled form

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


Output:

Bulma Disabled form

Reference: https://bulma.io/documentation/form/general/#disabled-form


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!