Materialize Forms– Forms are basically used to get the user input. Materialize provides the various form input with smooth transition and smoothness. Here in this tutorial we are going to explain how you can create materialize forms. You can also use our online editor to edit and run the code online.
Materialize Forms Example
Materialize provides inbuilt classes to create form inputs, to show error/success messages, adding icons, changing colors and to add date pickers etc. Let us go step by step to understand the materialize
form inputs and elements.
Input Fields
Input fields are basically used to accept the user inputs. To create input field in Materialize wrap the input and label with div having class .input-field. In case of HTML 5 validation It adds the valid and invalid class as per the validation.
Now let us create a simple example form containing the basic form input fields.
Note : If you don’t want the red/green validation states remove the validate from the form inputs.
If you run the above example it will produce the output something like this –
Prefilling Text Inputs
Sometimes we need to add some default(Prefilled) value in input field, you can do this by simply adding value attribute. Here is an example of Prefilling Text –
Prefilling Text Inputs Example:
<div class="row">
<div class="input-field col s6">
</div>
</div>
|
If you run the above example it will produce the output something like this –
Icon Prefixes | Add Icons To Input Field
Just add a icon before the form input field and add prefix class. Here is an example of Adding icons to input field in Materialize –
You can add –
If you run the above example it will produce the output something like this –
Materialize Textarea
Add class materialize-textarea to textarea and wrap this textarea with a div having class input-field simply as below –
If you run the above example it will produce the textarea with materialize effects.
Learn More
Let us have some More example and demo about the Materialize Forms.
Custom Error | Success Messages
Sometimes we need customization in error or success messages, we can add custom error or success messges by simply adding the attribute
data-error and data-success to input labels. Here is an example of Custom error and messages –
If you run the above example it will produce the output something like this –