Material Admin
Form Horizontal
Project Assigningmore_vert
This is the basic horizontal form with labels on left and form controls on right in one line. Add .h-form class to the form tag to have horizontal form styling. Also, put form label inside div with .h-form-label class.
Codeclose
<form class="h-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 s3">
<div class="h-form-label">
<label for="f-nameh">First Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="f-nameh" type="text" placeholder="First Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="l-nameh">Last Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="l-nameh" type="text" placeholder="Last Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="emailh">Email</label>
</div>
</div>
<div class="input-field col s9">
<input id="emailh" type="text" placeholder="Email Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="con_no">Contact Number</label>
</div>
</div>
<div class="input-field col s9">
<input id="con_no" type="text" placeholder="Contact Number Here">
</div>
</div>
</div>
<div class="divider"></div>
<div class="card-content">
<h6 class="font-medium">Requirements</h6>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="com_nh">Company</label>
</div>
</div>
<div class="input-field col s9">
<input id="com_nh" type="text" placeholder="Company Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label>Interested In</label>
</div>
</div>
<div class="input-field col s9">
<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>
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label>Budget</label>
</div>
</div>
<div class="input-field col s9">
<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>
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="com_nh">Select File</label>
</div>
</div>
<div class="input-field col s9">
<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" placeholder="Choose File Here">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="com_nh">About Project</label>
</div>
</div>
<div class="input-field col s9">
<textarea id="project" class="materialize-textarea" placeholder="About Project Here"></textarea>
</div>
</div>
</div>
<div class="divider"></div>
<div class="card-content">
<div class="form-action">
<button class="btn cyan waves-effect waves-light" 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 class="h-form">
<div class="form-body">
<div class="divider"></div>
<div class="card-content">
<h6 class="font-medium">Employee User</h6>
<div class="row">
<div class="col s12 l6">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="f-nameh">First Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="f-nameh" type="text" placeholder="First Name Here">
</div>
</div>
</div>
<div class="col s12 l6">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="l-nameh">Last Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="l-nameh" type="text" placeholder="Last Name Here">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 l6">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="u_name1">Username</label>
</div>
</div>
<div class="input-field col s9">
<input id="u_name1" type="text" placeholder="Username Here">
</div>
</div>
</div>
<div class="col s12 l6">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="n_nameh">Nick Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="n_nameh" type="text" placeholder="Nick Name Here">
</div>
</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 l6">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="email3">Email</label>
</div>
</div>
<div class="input-field col s9">
<input id="email3" type="email" placeholder="Email Here">
</div>
</div>
</div>
<div class="col s12 l6">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="web1">Website</label>
</div>
</div>
<div class="input-field col s9">
<input id="web1" type="text" placeholder="http://">
</div>
</div>
</div>
<div class="col s12 l6">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="con_no1">Contact No</label>
</div>
</div>
<div class="input-field col s9">
<input id="con_no1" type="text" placeholder="Contact No Here">
</div>
</div>
</div>
<div class="col s12 l6">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="bio1">Bio</label>
</div>
</div>
<div class="input-field col s9">
<textarea id="bio1" class="materialize-textarea" placeholder="Bio Here"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="card-content">
<div class="form-action">
<button class="btn cyan waves-effect waves-light" type="submit" name="action">Save
</button>
<button class="btn waves-effect waves-light grey darken-4" type="submit" name="action">Cancel
</button>
</div>
</div>
</form>
Employee Timingmore_vert
Codeclose
<form class="h-form">
<div class="form-body">
<div class="card-content">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="icon_prefix1">Employee Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="icon_prefix1" type="text" class="validate" placeholder="Employee Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="icon_prefix3">Project Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="icon_prefix3" type="text" class="validate" placeholder="Project Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="icon_prefix4">Date</label>
</div>
</div>
<div class="input-field col s9">
<input id="icon_prefix4" type="text" class="validate datepicker" placeholder="Date Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="icon_prefix5">Rate Per Hour</label>
</div>
</div>
<div class="input-field col s9">
<input id="icon_prefix5" type="text" class="validate" placeholder="Rate Per Hour Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="icon_prefix6">Start Time</label>
</div>
</div>
<div class="input-field col s9">
<input id="icon_prefix6" type="text" class="validate datepicker" placeholder="Start Time Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="icon_prefix7">End Time</label>
</div>
</div>
<div class="input-field col s9">
<input id="icon_prefix7" type="text" class="validate datepicker" placeholder="End Time Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="icon_prefix8">Notes</label>
</div>
</div>
<div class="input-field col s9">
<input id="icon_prefix8" type="text" class="validate" placeholder="Notes Here">
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="card-content">
<div class="form-action">
<button class="btn cyan waves-effect waves-light" type="submit" name="action">Save
</button>
<button class="btn waves-effect waves-light grey darken-4" type="submit" name="action">Cancel
</button>
</div>
</div>
</form>
Event Registrationmore_vert
Codeclose
<form class="h-form">
<div class="form-body">
<div class="card-content">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="full-n">Full Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="full-n" type="text" placeholder="Full Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="title">Title</label>
</div>
</div>
<div class="input-field col s9">
<input id="title" type="text" placeholder="Title Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="com1">Company</label>
</div>
</div>
<div class="input-field col s9">
<input id="com1" type="text" placeholder="Company Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="em1">Email</label>
</div>
</div>
<div class="input-field col s9">
<input id="em1" type="text" placeholder="Email Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="con2">Contact Number</label>
</div>
</div>
<div class="input-field col s9">
<input id="con2" type="text" placeholder="Contact Number Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label>Existing Customer</label>
</div>
</div>
<div class="input-field col s9">
<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>
</div>
<div class="divider"></div>
<div class="card-content">
<div class="form-action">
<button class="btn cyan waves-effect waves-light" type="submit" name="action">Save
</button>
<button class="btn waves-effect waves-light grey darken-4" type="submit" name="action">Cancel
</button>
</div>
</div>
</form>