Javatpoint Logo
Javatpoint Logo

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.


Let's take an example to demonstrate the use of input classes to showcase a sample form.

Test it Now


Materialize Form 1

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

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA