Materialize CSS Form
Forms are used as a standard way to receive user inputted data. Materialize CSS provides a very beautiful and responsive CSS for form designing. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms.
Index |
Class name |
Description |
1) |
input-field |
It is used to set the div container as an input field container. Required. |
2) |
validate |
It is used to add validation styles to an input field. |
3) |
active |
It is used to show an input with active style. |
4) |
materialize-textarea |
It is used to style a text-area. The text-areas will auto resize to the text inside. |
5) |
filled-in |
It show a checkbox with filled box style. |
Example
Let's take an example to demonstrate the use of input classes to showcase a sample form.
Test it Now
Output:
List of Input Control
Materialize CSS offers several types of input controls. Following is a list:
Index |
Input types |
Description |
1) |
select |
It specifies various types of selects inputs |
2) |
switches |
It specifies various types of switches |
3) |
file |
It specifies various types of file inputs |
4) |
range |
It specifies various types of range inputs |
4) |
date picker |
It specifies date picker |
5) |
character counter |
It specifies character counter |
|