Material Admin
Form Layouts
Basic Formmore_vert
Codeclose
<form>
<div class="row">
<div class="input-field col s12">
<input id="name" type="text">
<label for="name">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="message" class="materialize-textarea"></textarea>
<label for="message">Message</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<button class="btn cyan waves-effect waves-light right" type="submit" name="action">Submit
</button>
</div>
</div>
</form>
Form with placeholdermore_vert
Codeclose
<form>
<div class="row">
<div class="input-field col s12">
<input placeholder="John Doe" id="name2" type="text">
<label for="name2">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="john@domainname.com" id="email2" type="email">
<label for="email2">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="YourPassword" id="password2" type="password">
<label for="password2">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea placeholder="Oh WoW! Let me check this one too." id="message2" class="materialize-textarea"></textarea>
<label for="message2">Message</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<button class="btn cyan waves-effect waves-light right" type="submit" name="action">Submit
</button>
</div>
</div>
</form>
Form with iconmore_vert
Codeclose
<form>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="name3" type="text">
<label for="name3">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="email3" type="email">
<label for="email3">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">lock_outline</i>
<input id="password3" type="password">
<label for="password3">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">question_answer</i>
<textarea id="message3" class="materialize-textarea"></textarea>
<label for="message3">Message</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<button class="btn cyan waves-effect waves-light right" type="submit" name="action">Submit
</button>
</div>
</div>
</form>
Form validationmore_vert
Codeclose
<form>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="name4" type="text" class="validate">
<label for="name4">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="email4" type="email" class="validate">
<label for="email4">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">lock_outline</i>
<input id="password4" type="password" class="validate">
<label for="password4">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">question_answer</i>
<textarea id="message4" class="materialize-textarea validate" length="120"></textarea>
<label for="message4">Message</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<button class="btn cyan waves-effect waves-light right" type="submit" name="action">Submit
</button>
</div>
</div>
</form>
Inline formmore_vert
Codeclose
<form class="row">
<div class="input-field col s4">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s4">
<i class="material-icons prefix">lock_outline</i>
<input id="icon_password" type="password" class="validate">
<label for="icon_password">Password</label>
</div>
<div class="input-field col s4">
<button class="btn cyan waves-effect waves-light" type="submit" name="action">Submit
</button>
</div>
</form>
Inline form with placeholdermore_vert
Codeclose
<form class="row">
<div class="input-field col s4">
<i class="material-icons prefix">account_circle</i>
<input placeholder="John Doe" id="icon_prefix2" type="text" class="validate">
<label for="icon_prefix2">First Name</label>
</div>
<div class="input-field col s4">
<i class="material-icons prefix">email</i>
<input placeholder="john@mydomain.com" id="icon_email" type="email" class="validate">
<label for="icon_email">Email</label>
</div>
<div class="input-field col s4">
<button class="btn cyan waves-effect waves-light" type="submit" name="action">Submit
</button>
</div>
</form>
Advanced Form Inputsmore_vert
Codeclose
<form>
<div class="row">
<div class="input-field col s12 m6 l6">
<input id="first_name" type="text">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s12 m6 l6">
<input id="last_name" type="text">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m6 l6">
<input id="email5" type="email">
<label for="email5">Email</label>
</div>
<div class="input-field col s12 m6 l6">
<input id="password5" type="password">
<label for="password5">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m6 l6">
<select>
<option value="" disabled selected>Choose your profile</option>
<option value="1">Manager</option>
<option value="2">Developer</option>
<option value="3">Business</option>
</select>
<label>Select Profile</label>
</div>
<div class="input-field col s12 m6 l6">
<input type="text" id="dob" class="datepicker">
<label for="dob">DOB</label>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="file-field input-field">
<div class="btn">
<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>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="message5" class="materialize-textarea" length="120"></textarea>
<label for="message5">Message</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<button class="btn cyan waves-effect waves-light right" type="submit" name="action">Submit
</button>
</div>
</div>
</form>
Project Assingingmore_vert
Codeclose
<form>
<div class="form-body">
<div class="divider"></div>
<div class="card-content">
<h6 class="font-medium">Personal Info</h6>
<div class="row">
<div class="col s12 m6 l6">
<div class="input-field">
<input id="f-name" type="text">
<label for="f-name">First Name</label>
</div>
</div>
<div class="col s12 m6 l6">
<div class="input-field">
<input id="l-name" type="text">
<label for="l-name">Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="input-field">
<input id="email1" type="text">
<label for="email1">Email</label>
</div>
</div>
<div class="col s12 m6 l6">
<div class="input-field">
<input id="con1" type="text">
<label for="con1">Contact Number</label>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="card-content">
<h6 class="font-medium">Requirements</h6>
<div class="row">
<div class="col s12">
<div class="input-field">
<input id="company" type="text">
<label for="company">Company Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Designing</option>
<option value="2">Development</option>
<option value="3">Videography</option>
</select>
<label>Interested In</label>
</div>
</div>
<div class="col s12 m6 l6">
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Less then $5000</option>
<option value="2">$5000 -$10000</option>
<option value="3">$10000 - $20000</option>
</select>
<label>Budget</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="file-field input-field">
<div class="btn cyan">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="input-field">
<textarea id="project" class="materialize-textarea"></textarea>
<label for="project">About Project</label>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="card-content">
<div class="form-action">
<button class="btn waves-effect waves-light cyan" type="submit" name="action">Save
</button>
<button class="btn waves-effect waves-light grey darken-4" type="submit" name="action">Cancel
</button>
</div>
</div>
</div>
</form>
Employee Profilemore_vert
Codeclose
<form>
<div class="form-body">
<div class="divider"></div>
<div class="card-content">
<h6 class="font-medium">About Employee</h6>
<div class="row">
<div class="col s12 m6 l6">
<div class="input-field">
<input id="f-name1" type="text">
<label for="f-name1">First Name</label>
</div>
</div>
<div class="col s12 m6 l6">
<div class="input-field">
<input id="l-name2" type="text">
<label for="l-name2">Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="input-field">
<input id="uname" type="text">
<label for="uname">Username</label>
</div>
</div>
<div class="col s12 m6 l6">
<div class="input-field">
<input id="nname" type="text">
<label for="nname">Nick Name</label>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="card-content">
<h6 class="font-medium">Contact Info & Bio</h6>
<div class="row">
<div class="col s12">
<div class="input-field">
<input id="email2" type="text">
<label for="email2">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="input-field">
<input id="website" type="text" placeholder="http://">
<label for="website">Website</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="input-field">
<input id="cnno" type="text">
<label for="cnno">Contact Number</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="input-field">
<textarea id="bio" class="materialize-textarea"></textarea>
<label for="bio">Bio</label>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="card-content">
<div class="form-action">
<button class="btn waves-effect waves-light cyan" type="submit" name="action">Save
</button>
<button class="btn waves-effect waves-light grey darken-4" type="submit" name="action">Cancel
</button>
</div>
</div>
</div>
</form>
Issue Trackingmore_vert
Codeclose
<form>
<div class="row">
<div class="col s12">
<div class="input-field">
<input id="f-name1" type="text">
<label for="f-name1">Issue Title</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="opb" type="text">
<label for="opb">Open By</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="input-field">
<input type="text" id="do" class="datepicker">
<label for="do">Date Opened</label>
</div>
</div>
<div class="col s12 m6 l6">
<div class="input-field">
<input type="text" id="df" class="datepicker">
<label for="df">Date Fixed</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Low</option>
<option value="2">Medium</option>
<option value="3">High</option>
</select>
<label>Priority</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Started</option>
<option value="2">Not Started</option>
<option value="3">Fixed</option>
</select>
<label>Status</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<textarea id="com" class="materialize-textarea"></textarea>
<label for="com">Comments</label>
</div>
</div>
<div class="col s12">
<a class="waves-effect waves-light btn cyan">Save</a>
<a class="waves-effect waves-light btn grey darken-4">Cancel</a>
</div>
</div>
</form>
Employee Timingmore_vert
Codeclose
<form>
<div class="row">
<div class="col s12">
<div class="input-field">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix1" type="text" class="validate">
<label for="icon_prefix1">Employee Name</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<i class="material-icons prefix">aspect_ratio</i>
<input id="icon_prefix3" type="text" class="validate">
<label for="icon_prefix3">Project Name</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<i class="material-icons prefix">assignment_turned_in</i>
<input id="icon_prefix4" type="text" class="validate datepicker">
<label for="icon_prefix4">Date</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<i class="material-icons prefix">attach_money</i>
<input id="icon_prefix5" type="text" class="validate">
<label for="icon_prefix5">Rate Per Hour</label>
</div>
</div>
</div>
<div class="row">
<div class="col s6">
<div class="input-field">
<i class="material-icons prefix">cached</i>
<input id="icon_prefix6" type="text" class="validate datepicker">
<label for="icon_prefix6">Start Time</label>
</div>
</div>
<div class="col s6">
<div class="input-field">
<i class="material-icons prefix">autorenew</i>
<input id="icon_prefix7" type="text" class="validate datepicker">
<label for="icon_prefix7">End Time</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<i class="material-icons prefix">class</i>
<input id="icon_prefix8" type="text" class="validate">
<label for="icon_prefix8">Notes</label>
</div>
</div>
<div class="col s12">
<div class="right">
<a class="waves-effect waves-light btn cyan">Save</a>
<a class="waves-effect waves-light btn grey darken-4">Cancel</a>
</div>
</div>
</div>
</form>
Complaint Formmore_vert
Codeclose
<form>
<div class="row">
<div class="col s12">
<div class="input-field">
<input id="c-name" type="text">
<label for="c-name">Company Name</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="e-name" type="text">
<label for="e-name">Employee Name</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input type="text" id="doc" class="datepicker">
<label for="doc">Date of Complaint</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="s-name" type="text">
<label for="s-name">Supervisor's Name</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<textarea id="comd" class="materialize-textarea"></textarea>
<label for="comd">Complaint Details</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="sign" type="text">
<label for="sign">Signature</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<a class="waves-effect waves-light btn cyan">Save</a>
<a class="waves-effect waves-light btn grey darken-4">Cancel</a>
</div>
</div>
</form>
Donationmore_vert
Codeclose
<form>
<div class="row">
<div class="col s12">
<div class="input-field">
<input id="fu-name" type="text">
<label for="fu-name">Full Name</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="email5" type="text">
<label for="email5">Email Name</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="c-num" type="text">
<label for="c-num">Contact Number</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="d-type" type="text">
<label for="d-type">Donation Type</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="amount" type="text">
<label for="amount">Amout</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="comments" type="text">
<label for="comments">Comments</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="right">
<a class="waves-effect waves-light btn cyan">Save</a>
<a class="waves-effect waves-light btn grey darken-4">Cancel</a>
</div>
</div>
</div>
</form>
Event Registrationmore_vert
Codeclose
<form>
<div class="row">
<div class="col s12">
<div class="input-field">
<input id="full-n" type="text">
<label for="full-n">Full Name</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="title" type="text">
<label for="title">Title</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="com1" type="text">
<label for="com1">Company</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="em1" type="text">
<label for="em1">Email</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="con2" type="text">
<label for="con2">Contact Number</label>
</div>
</div>
<div class="col s12">
<label>Existing Customer</label>
<p>
<label>
<input name="group1" type="radio" checked />
<span>Yes</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>No</span>
</label>
</p>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="right">
<a class="waves-effect waves-light btn cyan">Save</a>
<a class="waves-effect waves-light btn grey darken-4">Cancel</a>
</div>
</div>
</div>
</form>
Login Formmore_vert
Codeclose
<form>
<!-- email -->
<div class="row">
<div class="input-field col s12">
<input id="email_2" type="email" class="validate" required>
<label for="email_2">Email</label>
</div>
</div>
<!-- pwd -->
<div class="row">
<div class="input-field col s12">
<input id="password_2" type="password" class="validate" required>
<label for="password_2">Password</label>
</div>
</div>
<!-- pwd -->
<div class="row m-t-5">
<div class="col s7">
<label>
<input type="checkbox" />
<span>Remember Me?</span>
</label>
</div>
<div class="col s5 right-align"><a href="#" class="link" id="to-recover">Forgot Pwd?</a></div>
</div>
<!-- pwd -->
<div class="row m-t-40">
<div class="col s12">
<button class="btn cyan waves-effect waves-light" type="submit" name="action">Login
</button>
</div>
</div>
</form>
Register Formmore_vert
Codeclose
<form>
<!-- email -->
<div class="row">
<div class="input-field col s12">
<input id="name" type="text" class="validate" required>
<label for="name">Name</label>
</div>
</div>
<!-- email -->
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate" required>
<label for="email">Email</label>
</div>
</div>
<!-- pwd -->
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate" required>
<label for="password">Password</label>
</div>
</div>
<!-- pwd -->
<div class="row">
<div class="input-field col s12">
<input id="cpassword" type="password" class="validate" required>
<label for="cpassword">Password</label>
</div>
</div>
<!-- pwd -->
<div class="row m-t-5">
<div class="col s7">
<label>
<input type="checkbox" />
<span>Agree to all Terms</span>
</label>
</div>
</div>
<!-- pwd -->
<div class="row m-t-40">
<div class="col s12">
<button class="btn cyan waves-effect waves-light" type="submit" name="action">Login
</button>
</div>
</div>
</form>