Back to patterns
Ask users for... Employment history
Contents
Example
Job Details
HTML Snippet for manual address
<h1 class="heading-large">Job Details</h1>
<form>
<fieldset>
<div class="form-group">
<label class="form-label form-label-bold" for="job-title">Job Title</label>
<input data-val="true" data-val-required="Please enter a job title" id="job-title" name="job-title" type="text" class="form-control">
</div>
</fieldset>
<div class="form-group">
<fieldset>
<legend>
<span class="form-label-bold">Date from</span>
<span class="form-hint">For example, 31 3 1980</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="df-day">Day</label>
<input class="form-control" id="df-day" name="df-day" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="df-month">Month</label>
<input class="form-control" id="df-month" name="df-month" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="df-year">Year</label>
<input class="form-control" id="df-year" name="df-year" type="text" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="4">
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset>
<legend>
<span class="form-label-bold">Date to</span>
<span class="form-hint">For example, 31 3 1980</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="dt-day">Day</label>
<input class="form-control" id="dt-day" name="dt-day" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="dt-month">Month</label>
<input class="form-control" id="dt-month" name="dt-month" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="dt-year">Year</label>
<input class="form-control" id="dt-year" name="dt-year" type="text" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="4">
</div>
</div>
</fieldset>
</div>
<button class="btn btn-primary" type="button">Add Job</button>
</form>Job listing
Example
Previous jobs
Job
Date from
Date to
HTML Snippet for address lookup step two
<div>
<h1 class="heading-large">Previous jobs</h1>
<div class="address__headings">
<h3>Job</h3>
<h3>Date from</h3>
<h3>Date to</h3>
</div>
<form class="address disabledInput">
<!--Job title-->
<div class="address__group">
<h3 class="mobileEnabled">Jobs</h3>
<fieldset class="disabled">
<div class="form-group">
<label class="form-label form-label-bold sr-only" for="job-title">Job Title</label>
<input disabled data-val="true" data-val-required="Please enter a job title" id="job-title" name="job-title" type="text" class="form-control" value="Front end developer">
</div>
</fieldset>
</div>
<!--date from-->
<div class="address__group">
<h3 class="mobileEnabled">Date from</h3>
<fieldset class="disabled">
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label sr-only" for="df-day">Day</label>
<input class="form-control" id="df-day" name="df-day" type="text" inputmode="numeric" placeholder="D" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-month">
<label class="form-label sr-only" for="df-month">Month</label>
<input class="form-control" id="df-month" name="df-month" type="text" inputmode="numeric" placeholder="M" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-year">
<label class="form-label sr-only" for="df-year">Year</label>
<input class="form-control" id="df-year" name="df-year" type="text" inputmode="numeric" placeholder="Y" pattern="[0-9]*" minlength="4" maxlength="4" value="2020" disabled>
</div>
</div>
</fieldset>
</div>
<!--date to-->
<div class="address__group">
<h3 class="mobileEnabled">Date to</h3>
<fieldset class="disabled">
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label sr-only" for="dt-day">Day</label>
<input class="form-control" id="dt-day" name="dt-day" type="text" inputmode="numeric" placeholder="D" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-month">
<label class="form-label sr-only" for="dt-month">Month</label>
<input class="form-control" id="dt-month" name="dt-month" type="text" inputmode="numeric" placeholder="M" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-year">
<label class="form-label sr-only" for="dt-year">Year</label>
<input class="form-control" id="dt-year" name="dt-year" type="text" inputmode="numeric" placeholder="Y" pattern="[0-9]*" minlength="4" maxlength="4" value="2021" disabled>
</div>
</div>
</fieldset>
</div>
<!--edit/remove-->
<div class="address__group address__group--full">
<a href="#" class="form-group-link address--edit" type="button">Edit</a> / <a href="#" class="form-group-link address--remove" type="button">Remove</a>
</div>
</form>
<hr/>
<form class="address disabledInput">
<!--Job title-->
<div class="address__group">
<h3 class="mobileEnabled">Jobs</h3>
<fieldset class="disabled">
<div class="form-group">
<label class="form-label form-label-bold sr-only" for="job-title">Job Title</label>
<input disabled data-val="true" data-val-required="Please enter a job title" id="job-title" name="job-title" type="text" class="form-control" value="Front end developer">
</div>
</fieldset>
</div>
<!--date from-->
<div class="address__group">
<h3 class="mobileEnabled">Date from</h3>
<fieldset class="disabled">
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label sr-only" for="df-day">Day</label>
<input class="form-control" id="df-day" name="df-day" type="text" inputmode="numeric" placeholder="D" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-month">
<label class="form-label sr-only" for="df-month">Month</label>
<input class="form-control" id="df-month" name="df-month" type="text" inputmode="numeric" placeholder="M" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-year">
<label class="form-label sr-only" for="df-year">Year</label>
<input class="form-control" id="df-year" name="df-year" type="text" inputmode="numeric" placeholder="Y" pattern="[0-9]*" minlength="4" maxlength="4" value="2020" disabled>
</div>
</div>
</fieldset>
</div>
<!--date to-->
<div class="address__group">
<h3 class="mobileEnabled">Date to</h3>
<fieldset class="disabled">
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label sr-only" for="dt-day">Day</label>
<input class="form-control" id="dt-day" name="dt-day" type="text" inputmode="numeric" placeholder="D" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-month">
<label class="form-label sr-only" for="dt-month">Month</label>
<input class="form-control" id="dt-month" name="dt-month" type="text" inputmode="numeric" placeholder="M" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-year">
<label class="form-label sr-only" for="dt-year">Year</label>
<input class="form-control" id="dt-year" name="dt-year" type="text" inputmode="numeric" placeholder="Y" pattern="[0-9]*" minlength="4" maxlength="4" value="2021" disabled>
</div>
</div>
</fieldset>
</div>
<!--edit/remove-->
<div class="address__group address__group--full">
<a href="#" class="form-group-link address--edit" type="button">Edit</a> / <a href="#" class="form-group-link address--remove" type="button">Remove</a>
</div>
</form>
<hr/>
<button class="btn btn-primary" type="button">Continue</button>
</div>