Scroll to Top

Form

Form Properties in Material Grammi are inherited from Google's Material Design. We wanted to deliver the best to our community . By Default form elements have no styling but if you would add related classes and use them properly, you can have beautiful design.

SITEMAP Documentation / Css / Form

Default Form elements are available with material grammi's own form elements.

Demo

Code copy

<input type="text" placeholder="text">
<input type="email" placeholder="email">
<input type="number" placeholder="number">
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<textarea placeholder="textarea"></textarea>
<input type="checkbox" id="example-checkbox"><label for="example-checkbox">checkbox</label>
<label for="radio-ex-1">radio 01</label>
<input type="radio" id="radio-ex-1" name="example-radio">
<label for="radio-ex-2">radio 02</label>
<input type="radio" id="radio-ex-2" name="example-radio">
<label for="radio-ex-3">radio 03</label>
<input type="radio" id="radio-ex-3" name="example-radio">

Material Forms are more designed and focused input elements. They can be controlled easily.

Demo

Code copy

<div class="row">
                <div class="col m6 l6 s12">
                    <div class="pad-10">
                        <label for="material-form-text">Input Text</label>
                        <input type="text" class="Material-form" id="material-form-text" label-color="#9E9E9E">
                    </div>
                </div>
                <div class="col m6 l6 s12">
                    <div class="pad-10">
                        <label for="material-form-pass">Input Password</label>
                        <input type="password" class="Material-form" id="material-form-pass" label-color="#9E9E9E">
                    </div>
                </div>
                <div class="col m6 l6 s12">
                    <div class="pad-10">
                        <label for="material-form-num">Input Number</label>
                        <input type="number" class="Material-form" id="material-form-num" label-color="#9E9E9E">
                    </div>
                </div>
                <div class="col m6 l6 s12">
                    <div class="pad-10">
                        <label for="material-form-email">Input Email</label>
                        <input type="email" class="Material-form" id="material-form-email" label-color="#9E9E9E">
                    </div>
                </div>
                <div class="col m12 l12 s12">
                    <div class="pad-10">
                        <label for="material-form-textarea">Textarea</label>
                        <textarea class="Material-form" id="material-form-textarea" label-color="#9E9E9E"></textarea>
                    </div>
                </div>
            </div>

These input elements are designed just like bootstrap form elements.

Demo

Code copy

<div class="row">
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="text" class="form-control" placeholder="text">
                    </div>

                </div>
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="password" class="form-control" placeholder="password">
                    </div>
                </div>
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="date" class="form-control" placeholder="date">
                    </div>
                </div>
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="time" class="form-control" placeholder="time">
                    </div>
                </div>
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="number" class="form-control" placeholder="number">
                    </div>
                </div>
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="email" class="form-control" placeholder="email">
                    </div>
                </div>
                <div class="col m12 s12 l12">
                    <div class="pad-10">
                        <textarea class="form-control" placeholder="textarea"></textarea>
                    </div>
                </div>
            </div>

Checkbox element is pre configured with ripple effect and different colors are introduced with two type of check boxes.

Demo

Code copy

    <div class="row">
        <div class="col m6 s12 l6">
            <div class="pad-20">
                <div class="checkgrammi checkbox-rotate checkbox-ripple">
                    <label class="input-checkbox indigo">
                        <input type="checkbox" id="c9" checked>
                        <span class="checkbox"></span>
                    </label>
                    <label for="c9" class="label">Checkbox</label>
                </div>
            </div>
        </div>
        <div class="col m6 s12 l6">
            <div class="pad-20">
                <div class="checkgrammi checkbox-ripple">
                    <label class="input-checkbox indigo">
                        <input type="checkbox" id="c9" checked>
                        <span class="checkbox"></span>
                    </label>
                    <label for="c9" class="label">Checkbox</label>
                </div>
            </div>
        </div>
    </div>

Use switches on various places in your project to make it more interactive and attractive, as switches are responsive in material Grammi.

Demo

To change the color of the switch box add name of switch box infont of switch-box.

Code copy

               <div class="switch-box warning">
                    <input type="checkbox" id="switch-example-6" checked class="switch-box-input">
                    <label class="switch-box-slider" for="switch-example-6"></label>
                    <label for="switch-example-6" class="switch-box-label">warning</label>
                </div>

There are two types of file inputs designed in material grammi.

Demo

There are three file input styles in Material Grammi.

Default File Upload

Material File Upload

Bootstrap File Upload

Code copy

    <!--Default Upload-->
    <input type="file" name="file3" id="file3">
    <!--Material Upload-->
    <input type="file" name="file" id="file" class="Material-File" />
    <label for="file" class="btn btn-primary">Material File</label>
    <!--Bootstrap Upload-->
    <input type="file" name="file2" id="file2" class="form-control" />

Feedback