MATERIALIZE JAVASCRIPT
MATERIALIZE FORM
Materialize CSS Forms

Materialize CSS Form

Materialize CSS forms are used to receive user inputted data & it has the following types of form elements: Input fields, radio buttons, checkboxes, select, range, pickers, etc.

Input Fields

Input fields allow the user to input.To create input field, wrap input and label inside the container and assign it to .input-field class.

General Syntax

<div class="input-field">
  <input name="name" id="id" type="text" />
  <label for=""></label>
</div>
Try It Now

Source Code

Download 
<div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s6">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">Last Name</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input disabled value="I am not editable" id="disabled" type="text" class="validate">
          <label for="disabled">Disabled</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="password" type="password" class="validate">
          <label for="password">Password</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          This is an inline input field:
          <div class="input-field inline">
            <input id="email_inline" type="email" class="validate">
            <label for="email_inline">Email</label>
            <span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
          </div>
        </div>
      </div>
    </form>
  </div>
Try it yourself

Source Code : Output

This is an inline input field:
Helper text

Textarea

Textarea is used for larger user input. To create Materialize textarea, follow the given below steps.

  • Place the input & label inside the external container and assign the .input-field class.
  • Assign the .materialize-textarea class to the textarea base class.

General Syntax

<div class="input-field">
  <textarea id="textarea" class="materialize-textarea"> </textarea>
  <label for="textarea">Textarea</label>
</div>
Try It Now

Source Code

Download 
<div class="row">
  <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea" class="materialize-textarea"> </textarea>
          <label for="textarea">Textarea</label>
        </div>
      </div>
    </form>
</div>
Try it yourself

Source Code : Output

Code Explanation

Note: When textarea value is dynamically changing like jQuery's .val() then in this case you must have to trigger an auto resize on it afterwords.

Initialization
   	         
    $('#textarea').val('New Text');
    $('#textarea').trigger('autoresize');

Select Forms

Select form allows user to select one option, multiple option or optgroup from the given list of options.

Basic steps to create Materialize CSS select forms.

  • Place the select form inside the external container and assign the .input-field class.
  • Now, initialize the materialize select either Javascript or jQuery.
Initialization
   	         
 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });
  // Or with jQuery
  $(document).ready(function(){
    $('select').formSelect();
  });

General Syntax

<select name="" id="">
    <option value="">value</option>
 </select>
Try It Now

Source Code

Download 
<div class="input-field col s12">
    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
  </div>

  <div class="input-field col s12">
    <select multiple>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Multiple Select</label>
  </div>

  <div class="input-field col s12">
    <select>
      <optgroup label="team 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </optgroup>
      <optgroup label="team 2">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
      </optgroup>
    </select>
    <label>Optgroups</label>
  </div>

  <div class="input-field col s12 m6">
    <select class="icons">
      <option value="" disabled selected>Choose your option</option>
      <option value="" data-icon="images/sample-1.jpg">example 1</option>
      <option value="" data-icon="images/office.jpg">example 2</option>
      <option value="" data-icon="images/yuna.jpg">example 3</option>
    </select>
    <label>Images in select</label>
  </div>
  <div class="input-field col s12 m6">
    <select class="icons">
      <option value="" disabled selected>Choose your option</option>
      <option value="" data-icon="images/sample-1.jpg" class="left">example 1</option>
      <option value="" data-icon="images/office.jpg" class="left">example 2</option>
      <option value="" data-icon="images/yuna.jpg" class="left">example 3</option>
    </select>
    <label>Images in select</label>
  </div>

  <label>Browser Select</label>
  <select class="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
Try it yourself

Source Code : Output

Radio Button

Radio buttons are used to select only one option from the group of items.Make sure that, the for attribute value of the label is same as the input id value.

Source Code

Download 
<form action="#">
    <p>
        <label>
            <input name="group1" type="radio" id="webdesign" checked >
            <span for="webdesign">Web Design</span>
        </label>
    </p>
    <p>
        <label>
            <input name="group1" type="radio" id="webdesign">
            <span for="webdesign">Graphics Design</span>
        </label>
    </p>
    <p>
        <label>
            <input class="with-gap" name="group1" type="radio"  id="appdesign">
            <span for="appdesign">App design</span>
        </label>
    </p>
</form>
Try it yourself

Source Code : Output

Checkboxes

Checkbox is used to select either yes or no answers. keep in mind that the for attribute of label is necessary to bind custom checkbox with the input.

Make sure that label, for attribute value will be same as the id attribute value of the checkbox.

Source Code

Download 
<form action="#">
    <p>
      <label for="php">
        <input type="checkbox"  id="php">
        <span>PHP</span>
      </label>
    </p>
    <p>
      <label for="asp">
        <input type="checkbox" checked="checked" id="asp" />
        <span>ASP</span>
      </label>
    </p>
    <p>
      <label for="rubby">
        <input type="checkbox" class="filled-in" checked="checked" id="rubby">
        <span>Ruby</span>
      </label>
    </p>
    <p>
      <label for="bootstrap5">
        <input id="indeterminate-checkbox" type="checkbox" id="bootstrap5">
        <span>Bootstrap 5 </span>
      </label>
    </p>
    <p>
      <label for="materialize">
        <input type="checkbox" checked="checked" disabled="disabled" id="materialize">
        <span>Materialize</span>
      </label>
    </p>
    <p>
      <label for="tailwind">
        <input type="checkbox" disabled="disabled" id="tailwind">
        <span>Tailwind</span>
      </label>
    </p>
  </form>
Try it yourself

Source Code : Output

Switches

Switches are basically special checkboxes that is used for binary states such as on / off.

Source Code

Download 
<div class="switch">
    <label>
      Off
      <input type="checkbox" checked>
      <span class="lever"></span>
      On
    </label>
</div>

   <!-- Disabled Switch -->
   <div class="switch">
    <label>
      Off
      <input disabled type="checkbox">
      <span class="lever"></span>
      On
    </label>
</div>
Try it yourself

Source Code : Output

File Input

File

Source Code

Download 
<form action="" method="post">
    <div class="file-field input-field">
      <div class="btn" style="padding-top:0px;">
        <span>File</span>
        <input type="file">
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
</form>
Try it yourself

Source Code : Output

File

Multiple File Uploads

To create multiple file upload, simply add .multiple class in your input file to allow multiple file uploads.

Source Code

Download 
<form action="" method="post">
    <div class="file-field input-field">
      <div class="btn" style="padding-top:0px;">
        <span>File</span>
        <input type="file" multiple>
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text" placeholder="Upload one or more files">
      </div>
    </div>
</form>
Try it yourself

Source Code : Output

File

Range

Range slider is used for the value with a wide range.There are mainly two types of range slider such as HTML 5 & nouiSlider.

nouiSlider

It is a a 3rd party plugin which will be modified.To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.

General Syntax

<script type="text/javascript">
    var slider = document.getElementById('test-slider');
      noUiSlider.create(slider, {
       start: [20, 80],
       connect: true,
       step: 1,
       orientation: 'horizontal', // 'horizontal' or 'vertical'
       range: {
         'min': 0,
         'max': 100
       },
       format: wNumb({
         decimals: 0
       })
     });
</script>
Try It Now

Source Code : Output

HTML5 Range

Source Code

Download 
<form action="#">
  <p class="range-field">
    <input type="range" id="test5" min="0" max="100" />
  </p>
</form>
Try it yourself

Source Code : Output

Date Picker

The datepicker is used to select a date from the calendar.

Initialization
   	         
 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.datepicker');
    var instances = M.Datepicker.init(elems, options);
  });
// Or with jQuery
 $(document).ready(function(){
    $('.datepicker').datepicker();
  });

Source Code

Download 
<div class="input-field">
      <input id="birthdate" type="text" class="datepicker">
      <label for="birthdate">Date Picker</label>
 </div>
Try it yourself

Source Code : Output

Time Picker

The time picker allows users to select time from the clock.

Source Code

Download 
<div class="input-field">
   <input id="lunchtime" type="text" class="timepicker">
   <label for="lunchtime">Time Picker</label>
</div>
Try it yourself

Source Code : Output

Form Autocomplete

Autocomplete feature is used to suggest the possible value in the form.You can also populate the suggestion list dynamically.

textsms
Initialization
   	         
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, options);
  });
  // Or with jQuery
$(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });

Source Code

Download 
<div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>
Try it yourself

Source Code : Output

textsms

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
Tutorials HTML CSS BOOTSTRAP 5 BOOTSTRAP 4
Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
CSS Frameworks Materialize CSS Pure CSS UiKit CSS Bulma CSS