Material Admin
Form Separate Row
Project Assigningmore_vert
Add .r-separator class in the form with horizontal styling.
Codeclose
<form class="h-form r-separator">
<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="email" placeholder="Email Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="cn_noh">Contact Number</label>
</div>
</div>
<div class="input-field col s9">
<textarea id="cn_noh" class="materialize-textarea" placeholder="Contact Number Here"></textarea>
</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="c_nameh">Company Name</label>
</div>
</div>
<div class="input-field col s9">
<textarea id="c_nameh" class="materialize-textarea" placeholder="Company Here"></textarea>
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="ins_inh">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 for="ins_inbh">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="fileh">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="a_proh">About Project</label>
</div>
</div>
<div class="input-field col s9">
<textarea id="a_proh" class="materialize-textarea" placeholder="About Project Here"></textarea>
</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 Profilemore_vert
Codeclose
<form class="h-form r-separator">
<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-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="l1-nameh">Last Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="l1-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="u1-nameh">Username</label>
</div>
</div>
<div class="input-field col s9">
<input id="u1-nameh" 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="n1-nameh">Nick Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="n1-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="email2h">Email</label>
</div>
</div>
<div class="input-field col s9">
<input id="email2h" type="text" 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="bio2h">Bio</label>
</div>
</div>
<div class="input-field col s9">
<textarea id="bio2h" class="materialize-textarea" placeholder="Bio Here"></textarea>
</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="webh">Website</label>
</div>
</div>
<div class="input-field col s9">
<input id="webh" 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="cn_no1h">Contact No</label>
</div>
</div>
<div class="input-field col s9">
<input id="cn_no1h" type="text" placeholder="Contact Number Here">
</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 r-separator">
<div class="form-body">
<div class="card-content">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="e_name1">Employee Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="e_name1" type="text" placeholder="Employee Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="p_name1">Project Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="p_name1" type="text" placeholder="Project Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="u1-nameh">Date</label>
</div>
</div>
<div class="input-field col s9">
<input type="text" class="datepicker" placeholder="Date Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="r_f_h">Rate Per Hour</label>
</div>
</div>
<div class="input-field col s9">
<input id="r_f_h" type="text" placeholder="Rate Per Hour Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="s_th">Start Time</label>
</div>
</div>
<div class="input-field col s9">
<input id="s_th" type="text" class="timepicker" placeholder="Start Time Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="e_th">End Time</label>
</div>
</div>
<div class="input-field col s9">
<input id="e_th" type="text" class="timepicker" placeholder="End Time Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="note_h">Notes</label>
</div>
</div>
<div class="input-field col s9">
<textarea id="note_h" class="materialize-textarea" placeholder="Notes"></textarea>
</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 r-separator">
<div class="form-body">
<div class="card-content">
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="fu_name1">Full Name</label>
</div>
</div>
<div class="input-field col s9">
<input id="fu_name1" type="text" placeholder="Full Name Here">
</div>
</div>
<div class="row">
<div class="col s3">
<div class="h-form-label">
<label for="title1">Title</label>
</div>
</div>
<div class="input-field col s9">
<input id="title1" 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 Here">
</div>
</div>
<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="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 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>