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 allow the user to input.To create input field, wrap input and label inside the container and assign it to .input-field
class.
<div class="input-field">
<input name="name" id="id" type="text" />
<label for=""></label>
</div>
<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 is used for larger user input. To create Materialize textarea, follow the given below steps.
.input-field
class.
.materialize-textarea
class to the textarea base class.
<div class="input-field">
<textarea id="textarea" class="materialize-textarea"> </textarea>
<label for="textarea">Textarea</label>
</div>
<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.
$('#textarea').val('New Text');
$('#textarea').trigger('autoresize');
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.
.input-field
class.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('select').formSelect();
});
<select name="" id="">
<option value="">value</option>
</select>
<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 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.
<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 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
.
<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 are basically special checkboxes that is used for binary states such as on / off.
<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>
<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>
To create multiple file upload, simply add .multiple
class in your input file to allow multiple file uploads.
<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 slider is used for the value with a wide range.There are mainly two types of range slider such as HTML 5 & 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.
<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>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
The datepicker is used to select a date from the calendar.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.datepicker');
var instances = M.Datepicker.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.datepicker').datepicker();
});
<div class="input-field">
<input id="birthdate" type="text" class="datepicker">
<label for="birthdate">Date Picker</label>
</div>
The time picker allows users to select time from the clock.
<div class="input-field">
<input id="lunchtime" type="text" class="timepicker">
<label for="lunchtime">Time Picker</label>
</div>
Autocomplete feature is used to suggest the possible value in the form.You can also populate the suggestion list dynamically.
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'
},
});
});
<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>