February 7, 2018

Materialize Css Registration Form

Materialize provides pre-defined classes to create the form controls and input fields. It is very simple to create beautiful forms with pre-defined classes in Materialize Css. You can create beautiful forms in materialize Css very quickly. Here in this article, we are going to explain how to create simple registration form in Materialize Css framework. You can also use our online editor to edit and run the code online.

Materialize Css Registration Form | Page Template

Here is simple registration page which contains basic input fields for registration.

Example:

 <form class="col s4">
      <div class="row">
        <div class="input-field col s12">
          <input id="FirstName" type="text" class="validate">
          <label for="FirstName">First Name</label>
        </div>
        <div class="input-field col s12">
          <input id="LastName" type="text" class="validate">
          <label for="LastName">Last Name</label>
        </div>
         <div class="input-field col s12">
          <input id="Email" type="email" class="validate">
          <label for="Email">Email</label>
        </div>
		   <div class="input-field col s12">
          <input id="Phone" type="text" class="validate">
          <label for="Phone">Phone</label>
        </div>
		  <div class="input-field col s12">
          <input id="Password" type="password" class="validate">
          <label for="Password">Password</label>
          </div>
		  <div class="input-field col s12">
			  <button type="submit" class="waves-effect waves-light btn">Submit</button>
        </div>
      </div>
    </form>

Try it »

Output of above example-

Add Comment

📖 Read More

6. Materialize Css Registration form in Popup