Material Admin
Bordered Form
Project Assigningmore_vert
Add .b-form class in the form with horizontal styling.
Codeclose
<form class="h-form b-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-name">First Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="f-name" type="text" placeholder="First Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="l-name">Last Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="l-name" type="text" placeholder="Last Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="email1">Email</label>
</div>
</div>
<div class="input-field col s9">
<input id="email1" type="text" placeholder="Email Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="con1">Contact Number</label>
</div>
</div>
<div class="input-field col s9">
<input id="con1" 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="company">Company</label>
</div>
</div>
<div class="input-field col s9">
<input id="company" 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>Select File</label>
</div>
</div>
<div class="input-field col s9">
<div class="file-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 s3">
<div class="h-form-label">
<label for="project">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 b-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 l6">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="f-name">First Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="f-name" 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-name">Last Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="l-name" 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="uname">Username</label>
</div>
</div>
<div class="input-field col s9">
<input id="uname" 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="nname">Nick Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="nname" 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="email2">Email</label>
</div>
</div>
<div class="input-field col s9">
<input id="email2" type="text" placeholder="Email Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="website">Website</label>
</div>
</div>
<div class="input-field col s9">
<input id="website" 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="cnno">Contact No</label>
</div>
</div>
<div class="input-field col s9">
<input id="cnno" type="text" placeholder="Contact No Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="bio">Bio</label>
</div>
</div>
<div class="input-field col s9">
<textarea id="bio" 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 b-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 timepicker" 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 timepicker" 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 b-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>
</form>