Materialize CSS Forms
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>
Source Code
<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>
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-fieldclass. - Assign the
.materialize-textareaclass to the textarea base class.
General Syntax
<div class="input-field">
<textarea id="textarea" class="materialize-textarea"> </textarea>
<label for="textarea">Textarea</label>
</div>
Source Code
<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>
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-fieldclass. - 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>
Source Code
<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>
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.
General Syntax
<label>
<input name="inputname" type="radio" id="inputid">
<span for="inputid">Input Text</span>
</label>
Source Code
<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>
Checkbox
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.
General Syntax
<label for="checkboxid">
<input type="checkbox" id="checkboxid">
<span>Checkbox Text</span>
</label>
Source Code
<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>
Switches
Switches are basically special checkboxes that are used for binary states such as on / off.
Source Code
<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>
File Input
If you want to take input as a path then use input of type file.
Source Code
<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>
Multiple File Uploads
To create multiple file upload, simply add .multiple class in your input file to allow multiple file uploads.
Source Code
<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>
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.
Source Code
<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
}
});
</script>
HTML5 Range
Source Code
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
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
<div class="input-field">
<input id="birthdate" type="text" class="datepicker">
<label for="birthdate">Date Picker</label>
</div>
Time Picker
The time picker allows users to select time from the clock.
Source Code
<div class="input-field">
<input id="lunchtime" type="text" class="timepicker">
<label for="lunchtime">Time Picker</label>
</div>
Form Autocomplete
Autocomplete feature is used to suggest the possible value in the form.You can also populate the suggestion list dynamically.
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
<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>
Character Counter
It applies the restriction on input character length. To create a character counter, add data-length property in the input fields and then initializes it through jQuery. Basically, it is mainly used where the input character length is mandatory.
Initialization
$(document).ready(function() {
$('input#input_text, textarea#textarea2').characterCounter();
});
Source Code
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="input_text" type="text" data-length="10">
<label for="input_text">Input text</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea2" class="materialize-textarea" data-length="120"></textarea>
<label for="textarea2">Textarea</label>
</div>
</div>
</form>
</div>
Icon Prefixes
You can add an icon prefix with prefix class before the input and label to make form input label even more clear.
Source Code
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telephone</label>
</div>
</div>
</form>
</div>
Custom Error or Success Messages
Custom validation messages can be express by adding either data-error or data-success attributes to your helper text element.
Source Code
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
</form>
</div>
Conclusion
Materialize forms are the standard way to take user inputted data. There are different predefined Materialize CSS form input classes that are used with the HTML form's input field such as Input fields, radio buttons, checkboxes, selects, range, pickers to make more elegant input fields. You can also add icon prefixes with the form inputs of Materialize.
Web Tutorials
