Skip to content

Instantly share code, notes, and snippets.

@sawatsky

sawatsky/client.html

Last active July 22, 2018 06:24
Show Gist options
  • Save sawatsky/2eac6bc2a028f885681b1d1fc1d1f37b to your computer and use it in GitHub Desktop.
Save sawatsky/2eac6bc2a028f885681b1d1fc1d1f37b to your computer and use it in GitHub Desktop.
Download ZIP
The various forms for creating / editing
Raw
client.html
<!DOCTYPE html>
<title>Client - TruckIt</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Heather Sawatsky"/>
<meta name="application-name" content="TruckIt"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/form.css"/>
<link rel="stylesheet" href="form.css"/>
<form id="clientForm" class="form">
<header id="clientHeader">
<h2>Create / Edit a Client</h2>
</header>
<section id="clientContent">
<div class="form-field">
<label id="client-name-label" class="form-label" for="client-name-input">Name</label>
<input id="client-name-input" class="form-input" name="name" type="text" aria-describedby="client-name-tooltip" required autofocus/>
<div id="client-name-tooltip" class="form-tooltip" role="tooltip">The name of the company client</div>
</div>
<div class="form-field">
<label id="client-creditBalance-label" class="form-label" for="client-creditBalance-input">Credit Balance</label>
<input id="client-creditBalance-input" class="form-input" name="creditBalance" type="number" placeholder="0.00" pattern="[0-9]+\.[0-9]{2}" aria-describedby="client-creditBalance-tooltip" step="0.01" required/>
<div id="client-creditBalance-tooltip" class="form-tooltip" role="tooltip">The client's credit balance</div>
</div>
<div class="form-field">
<label id="client-currencyType-label" class="form-label" for="client-currencyType-input">Currency Type</label>
<select id="client-currencyType-input" class="form-input" name="currencyType" aria-describedby="client-currencyType-tooltip" required>
<option value="cad">CAD</option>
<option value="usd">USD</option>
</select>
<div id="client-currencyType-tooltip" class="form-tooltip" role="tooltip">The client's currency type, either Canadian or American</div>
</div>
<div class="form-field">
<label id="client-creditLimit-label" class="form-label" for="client-creditLimit-input">Credit Limit</label>
<input id="client-creditLimit-input" class="form-input" name="creditLimit" type="number" placeholder="0.00" pattern="[0-9]+\.[0-9]{2}" aria-describedby="client-creditLimit-tooltip" step="0.01" required/>
<div id="client-creditLimit-tooltip" class="form-tooltip" role="tooltip">The client's credit limit</div>
</div>
<div class="form-field">
<label id="client-paymentInterval-label" class="form-label" for="client-paymentInterval-input">Payment Interval</label>
<select id="client-paymentInterval-input" class="form-input" name="paymentInterval" aria-describedby="client-paymentInterval-tooltip" required>
<option value="1">1 month</option>
<option value="3">3 months</option>
<option value="6">6 months</option>
</select>
<div id="client-paymentInterval-tooltip" class="form-tooltip" role="tooltip">The client's payment interval</div>
</div>
<div class="form-field">
<label id="client-taxFormula-label" class="form-label" for="client-taxFormula-input">Tax Formula</label>
<textarea id="client-taxFormula-input" class="form-input" name="taxFormula" placeholder="Tax Formula" aria-describedby="client-taxFormula-tooltip" aria-multiline="true" required></textarea>
<div id="client-taxFormula-tooltip" class="form-tooltip" role="tooltip">The client's tax formula</div>
</div>
<div class="form-field">
<label id="client-rateFormula-label" class="form-label" for="client-rateFormula-input">Rate Formula</label>
<textarea id="client-rateFormula-input" class="form-input" name="rateFormula" placeholder="Rate Formula" aria-describedby="client-rateFormula-tooltip" aria-multiline="true" required></textarea>
<div id="client-rateFormula-tooltip" class="form-tooltip" role="tooltip">The client's rate formula</div>
</div>
<fieldset class="form-fields" name="dispatch">
<legend class="form-legend">Dispatcher Information</legend>
<div class="form-field">
<label id="client-dispatchName-label" class="form-label" for="client-dispatchName-input">Name</label>
<input id="client-dispatchName-input" class="form-input" name="dispatchName" type="text" aria-describedby="client-dispatchName-tooltip" required/>
<div id="client-dispatchName-tooltip" class="form-tooltip" role="tooltip">The dispatcher's name</div>
</div>
<div class="form-field">
<label id="client-dispatchPhone-label" class="form-label" for="client-dispatchPhone-input">Phone</label>
<input id="client-dispatchPhone-input" class="form-input" name="dispatchPhone" type="tel" aria-describedby="client-dispatchPhone-tooltip" required/>
<div id="client-dispatchPhone-tooltip" class="form-tooltip" role="tooltip">The dispatcher's phone number</div>
</div>
</fieldset>
<fieldset class="form-fields" name="billing">
<legend class="form-legend">Billing Information</legend>
<div class="form-field">
<label id="client-billingName-label" class="form-label" for="client-billingName-input">Name</label>
<input id="client-billingName-input" class="form-input" name="billingName" type="text" aria-describedby="client-billingName-tooltip" required/>
<div id="client-billingName-tooltip" class="form-tooltip" role="tooltip">The name of the person to send the bill to</div>
</div>
<div class="form-field">
<label id="client-billingPhone-label" class="form-label" for="client-billingPhone-input">Phone</label>
<input id="client-billingPhone-input" class="form-input" name="billingPhone" type="tel" aria-describedby="client-billingPhone-tooltip" required/>
<div id="client-billingPhone-tooltip" class="form-tooltip" role="tooltip">The phone number of the person to send the bill to</div>
</div>
<fieldset class="form-fields" name="billingAddress">
<div class="form-field">
<label id="client-billingAddressLine1-label" class="form-label" for="client-billingAddressLine1-input">Address Line 1</label>
<input id="client-billingAddressLine1-input" class="form-input" name="billingAddressLine1" type="text" placeholder="Street address, P.O. box, company name, c/o" aria-describedby="client-billingAddressLine1-tooltip" required/>
<div id="client-billingAddressLine1-tooltip" class="form-tooltip" role="tooltip">The first line of the billing address, which may be a street address, P.O. box, company name, or c/o</div>
</div>
<div class="form-field">
<label id="client-billingAddressLine2-label" class="form-label" for="client-billingAddressLine2-input">Address Line 2</label>
<input id="client-billingAddressLine2-input" class="form-input" name="billingAddressLine2" type="text" placeholder="Apartment, suite, unit, building, floor, etc." aria-describedby="client-billingAddressLine2-tooltip" required/>
<div id="client-billingAddressLine2-tooltip" class="form-tooltip" role="tooltip">The second line of the billing address, which may be an apartment, suite, unit, building, floor, etc.</div>
</div>
<div class="form-field">
<label id="client-billingAddressCity-label" class="form-label" for="client-billingAddressCity-input">City</label>
<input id="client-billingAddressCity-input" class="form-input" name="billingAddressCity" type="text" aria-describedby="client-billingAddressCity-tooltip" required/>
<div id="client-billingAddressCity-tooltip" class="form-tooltip" role="tooltip">The billing address's city component</div>
</div>
<div class="form-field" role="combobox">
<label id="client-billingAddressRegion-label" class="form-label" for="client-billingAddressRegion-input">State/Province/Region</label>
<input id="client-billingAddressRegion-input" class="form-input" name="billingAddressRegion" type="text" role="textbox" list="client-billingAddressRegion-list" aria-controls="client-billingAddressRegion-list" aria-expanded="false" aria-multiline="false" aria-describedby="client-billingAddressRegion-tooltip" required/>
<datalist id="client-billingAddressRegion-list" role="listbox">
<optgroup label="Canada">
<option value="ab">Alberta</option>
<option value="bc">British Columbia</option>
</optgroup>
<optgroup label="USA">
<option value="wa">Washington</option>
</optgroup>
</datalist>
<div id="client-billingAddressRegion-tooltip" class="form-tooltip" role="tooltip">The billing address's state, province, or region component</div>
</div>
<div class="form-field">
<label id="client-billingAddressCode-label" class="form-label" for="client-billingAddressCode-input">Zip/Postal Code</label>
<input id="client-billingAddressCode-input" class="form-input" name="billingAddressCode" type="text" aria-describedby="client-billingAddressCode-tooltip" required/>
<div id="client-billingAddressCode-tooltip" class="form-tooltip" role="tooltip">The billing address's zip code or postal code component</div>
</div>
<div class="form-field" role="combobox">
<label id="client-billingAddressCountry-label" class="form-label" for="client-billingAddressCountry-input">Country</label>
<input id="client-billingAddressCountry-input" class="form-input" name="billingAddressCountry" type="text" role="textbox" list="client-billingAddressCountry-list" aria-controls="client-billingAddressCountry-list" aria-expanded="false" aria-multiline="false" aria-describedby="client-billingAddressCountry-tooltip" required/>
<datalist id="client-billingAddressCountry-list" role="listbox">
<option value="ca">Canada</option>
<option value="usa">USA</option>
</datalist>
<div id="client-billingAddressCountry-tooltip" class="form-tooltip" role="tooltip">The billing address's country component</div>
</div>
</fieldset>
</fieldset>
<input id="client-submit" class="form-submit" type="submit" value="Create / Edit the client"/>
</section>
</form>
Raw
driver.html
<!DOCTYPE html>
<title>Driver - TruckIt</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Heather Sawatsky"/>
<meta name="application-name" content="TruckIt"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/form.css"/>
<link rel="stylesheet" href="form.css"/>
<form id="driverForm" class="form">
<header id="driverHeader">
<h2>Create / Edit a Driver</h2>
</header>
<section id="driverContent">
<div class="form-field">
<label id="driver-name-label" class="form-label" for="driver-name-input">Name</label>
<input id="driver-name-input" class="form-input" name="driverName" type="text" aria-describedby="driver-name-tooltip" required autofocus/>
<div id="driver-name-tooltip" class="form-tooltip" role="tooltip">The driver's full name</div>
</div>
<div class="form-field">
<label id="driver-mobileNumber-label" class="form-label" for="driver-mobileNumber-input">Mobile Number</label>
<input id="driver-mobileNumber-input" class="form-input" name="mobileNumber" type="tel" aria-describedby="driver-mobileNumber-tooltip" required/>
<div id="driver-mobileNumber-tooltip" class="form-tooltip" role="tooltip">The driver's mobile phone number</div>
</div>
<div class="form-field">
<label id="driver-license-label" class="form-label" for="driver-license-input">Driver's License</label>
<input id="driver-license-input" class="form-input" name="driverLicense" type="text" placeholder="Eg. '82734562' or 'SAWATHL083JK'" aria-describedby="driver-license-tooltip" required/>
<div id="driver-license-tooltip" class="form-tooltip" role="tooltip">The driver's license number</div>
</div>
<div class="form-field">
<label id="driver-sin-label" class="form-label" for="driver-sin-input">SIN</label>
<input id="driver-sin-input" class="form-input" name="driverSin" type="text" placeholder="Eg. '123-456-789'" maxlength="11" aria-describedby="driver-sin-tooltip" required/>
<div id="driver-sin-tooltip" class="form-tooltip" role="tooltip">The driver's social insurance number or SIN</div>
</div>
<fieldset class="form-fields" name="mailingAddress">
<legend class="form-legend">Mailing Address</legend>
<div class="form-field">
<label id="driver-mailingAddressLine1-label" class="form-label" for="driver-mailingAddressLine1-input">Address Line 1</label>
<input id="driver-mailingAddressLine1-input" class="form-input" name="mailingAddressLine1" type="text" placeholder="Street address, P.O. box, company name, c/o" aria-describedby="driver-mailingAddressLine1-tooltip" required/>
<div id="driver-mailingAddressLine1-tooltip" class="form-tooltip" role="tooltip">The first line of the mailing address, which may be a street address, P.O. box, company name, or c/o</div>
</div>
<div class="form-field">
<label id="driver-mailingAddressLine2-label" class="form-label" for="driver-mailingAddressLine2-input">Address Line 2</label>
<input id="driver-mailingAddressLine2-input" class="form-input" name="mailingAddressLine2" type="text" placeholder="Apartment, suite, unit, building, floor, etc." aria-describedby="driver-mailingAddressLine2-tooltip" required/>
<div id="driver-mailingAddressLine2-tooltip" class="form-tooltip" role="tooltip">The second line of the mailing address, which may be an apartment, suite, unit, building, floor, etc.</div>
</div>
<div class="form-field">
<label id="driver-mailingAddressCity-label" class="form-label" for="driver-mailingAddressCity-input">City</label>
<input id="driver-mailingAddressCity-input" class="form-input" name="mailingAddressCity" type="text" aria-describedby="driver-mailingAddressCity-tooltip" required/>
<div id="driver-mailingAddressCity-tooltip" class="form-tooltip" role="tooltip">The mailing address's city component</div>
</div>
<div class="form-field" role="combobox">
<label id="driver-mailingAddressRegion-label" class="form-label" for="driver-mailingAddressRegion-input">State/Province/Region</label>
<input id="driver-mailingAddressRegion-input" class="form-input" name="mailingAddressRegion" type="text" role="textbox" list="driver-mailingAddressRegion-list" aria-controls="driver-mailingAddressRegion-list" aria-expanded="false" aria-multiline="false" aria-describedby="driver-mailingAddressRegion-tooltip" required/>
<datalist id="driver-mailingAddressRegion-list" role="listbox">
<optgroup label="Canada">
<option value="ab">Alberta</option>
<option value="bc">British Columbia</option>
</optgroup>
<optgroup label="USA">
<option value="wa">Washington</option>
</optgroup>
</datalist>
<div id="driver-mailingAddressRegion-tooltip" class="form-tooltip" role="tooltip">The mailing address's state, province, or region component</div>
</div>
<div class="form-field">
<label id="driver-mailingAddressCode-label" class="form-label" for="driver-mailingAddressCode-input">Zip/Postal Code</label>
<input id="driver-mailingAddressCode-input" class="form-input" name="mailingAddressCode" type="text" aria-describedby="driver-mailingAddressCode-tooltip" required/>
<div id="driver-mailingAddressCode-tooltip" class="form-tooltip" role="tooltip">The mailing address's zip code or postal code component</div>
</div>
<div class="form-field" role="combobox">
<label id="driver-mailingAddressCountry-label" class="form-label" for="driver-mailingAddressCountry-input">Country</label>
<input id="driver-mailingAddressCountry-input" class="form-input" name="mailingAddressCountry" type="text" role="textbox" list="driver-mailingAddressCountry-list" aria-controls="driver-mailingAddressCountry-list" aria-expanded="false" aria-multiline="false" aria-describedby="driver-mailingAddressCountry-tooltip" required/>
<datalist id="driver-mailingAddressCountry-list" role="listbox">
<option value="ca">Canada</option>
<option value="usa">USA</option>
</datalist>
<div id="driver-mailingAddressCountry-tooltip" class="form-tooltip" role="tooltip">The mailing address's country component</div>
</div>
</fieldset>
<input id="driver-addTruck" type="button" value="Add Truck"/>
<input id="driver-addTrailer" type="button" value="Add Trailer"/>
<br/>
<input id="driver-submit" class="form-submit" type="submit" value="Create / Edit the driver"/>
</section>
</form>
Raw
form.css
body {
margin: 0;
box-sizing: border-box;
background-color: #E6E6E6;
font: 16px Arial;
color: #333;
}
.form {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
.form-field {
margin: 1.5rem 0 0 0;
padding: 0;
border: 0;
}
.form-input:not([type="radio"]) {
display: block;
box-sizing: border-box;
width: 100%;
margin-top: 0.25rem;
padding: 1rem 0.5rem;
background-color: #FFF;
font-size: 1rem;
border: 1px solid rgb(200, 200, 200);
outline: none;
}
.form-input:hover {
border-color: black;
}
.form-input:focus {
border-color: #5EB8FF;
}
.form-tooltip {
display: none;
}
.form-fields {
margin: 0;
padding: 0;
border: 0;
}
.form-legend {
margin: 0;
padding: 1.5rem 0 0 0;
font-weight: bold;
}
.form-submit {
width: 100%;
margin-top: 1.5rem;
padding: 1rem 0;
font-size: 1rem;
background-color: #5EB8FF;
border: 1px solid rgb(200, 200, 200);
cursor: pointer;
}
.form-submit:hover {
border-color: black;
}
Raw
trailer.html
<!DOCTYPE html>
<title>Trailer - TruckIt</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Heather Sawatsky"/>
<meta name="application-name" content="TruckIt"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/form.css"/>
<link rel="stylesheet" href="form.css"/>
<form id="trailerForm" class="form">
<header id="trailerHeader">
<h2>Create / Edit a Trailer</h2>
</header>
<section id="trailerContent">
<fieldset class="form-field" name="rentedOrOwned">
<legend>Rented or Owned</legend>
<input id="trailer-rented-input" class="form-input" name="rentedOrOwned" type="radio" value="rented" aria-describedby="trailer-rented-tooltip" checked aria-checked="true" required autofocus/>
<label id="trailer-rented-label" class="form-label" for="trailer-rented-input">Rented</label>
<div id="trailer-rented-tooltip" class="form-tooltip" role="tooltip">The trailer is rented</div>
<br/>
<input id="trailer-owned-input" class="form-input" name="rentedOrOwned" type="radio" value="owned" aria-describedby="trailer-owned-tooltip" aria-checked="false" required/>
<label id="trailer-owned-label" class="form-label" for="trailer-owned-input">Owned</label>
<div id="trailer-owned-tooltip" class="form-tooltip" role="tooltip">The trailer is owned</div>
</fieldset>
<div class="form-field">
<label id="trailer-axleCount-label" class="form-label" for="trailer-axleCount-input">Axle Count</label>
<input id="trailer-axleCount-input" class="form-input" name="axleCount" type="number" placeholder="Eg. 2" min="2" aria-valuemin="2" aria-valuemax="20" max="20" value="4" aria-valuenow="4" aria-describedby="trailer-axleCount-tooltip" required/>
<div id="trailer-axleCount-tooltip" class="form-tooltip" role="tooltip">The trailer's axle count</div>
</div>
<input id="trailer-submit" class="form-submit" type="submit" value="Create / Edit the trailer"/>
</section>
</form>
Raw
trip.html
<!DOCTYPE html>
<title>Trip - TruckIt</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Heather Sawatsky"/>
<meta name="application-name" content="TruckIt"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/form.css"/>
<link rel="stylesheet" href="form.css"/>
<form id="tripForm" class="form">
<header id="tripHeader">
<h2>Create / Edit a Trip</h2>
</header>
<section id="tripContent">
<fieldset class="form-fields" name="customerAndClient">
<legend class="form-legend">Customer and Client</legend>
<div class="form-field" role="combobox">
<label id="trip-customerId-label" class="form-label" for="trip-customerId-input">Customer Name</label>
<input id="trip-customerId-input" class="form-input" name="customerId" type="text" role="textbox" list="trip-customerId-list" aria-controls="trip-customerId-list" aria-expanded="false" aria-multiline="false" aria-describedby="trip-customerId-tooltip" required autofocus/>
<datalist id="trip-customerId-list" role="listbox">
<option value="123456789">QFC</option>
<option value="987654321">Burger King</option>
<option value="192837465">Green Leaf</option>
</datalist>
<div id="trip-customerId-tooltip" class="form-tooltip" role="tooltip">The customer</div>
</div>
<div class="form-field">
<label id="trip-orderNumber-label" class="form-label" for="trip-orderNumber-input">Order Number</label>
<input id="trip-orderNumber-input" class="form-input" name="orderNumber" type="text" placeholder="Eg. 0483000482" aria-describedby="trip-orderNumber-tooltip" required/>
<div id="trip-orderNumber-tooltip" class="form-tooltip" role="tooltip">The order number</div>
</div>
<div class="form-field" role="combobox">
<label id="trip-clientId-label" class="form-label" for="trip-clientId-input">Client Name</label>
<input id="trip-clientId-input" class="form-input" name="clientId" type="text" role="textbox" list="trip-clientId-list" aria-controls="trip-clientId-list" aria-expanded="false" aria-multiline="false" aria-describedby="trip-clientId-tooltip" required/>
<datalist id="trip-clientId-list" role="listbox">
<option value="123456789">QFC</option>
<option value="987654321">Burger King</option>
<option value="192837465">Green Leaf</option>
</datalist>
<div id="trip-clientId-tooltip" class="form-tooltip" role="tooltip">The client</div>
</div>
<div class="form-field">
<label id="trip-purchaseNumber-label" class="form-label" for="trip-purchaseNumber-input">Purchase Number</label>
<input id="trip-purchaseNumber-input" class="form-input" name="purchaseNumber" type="text" placeholder="Eg. 00384930001" aria-describedby="trip-purchaseNumber-tooltip" required/>
<div id="trip-purchaseNumber-tooltip" class="form-tooltip" role="tooltip">The purchase number</div>
</div>
</fieldset>
<fieldset class="form-fields" name="pickup">
<legend class="form-legend">Pick up</legend>
<div class="form-field">
<label id="trip-pickupDate-label" class="form-label" for="trip-pickupDate-input">Pickup Date</label>
<input id="trip-pickupDate-input" class="form-input" name="pickupDate" type="datetime-local" aria-describedby="trip-pickupDate-tooltip" required/>
<div id="trip-pickupDate-tooltip" class="form-tooltip" role="tooltip">The pickup date and time</div>
</div>
<fieldset class="form-fields" name="pickupLocation">
<div class="form-field">
<label id="trip-pickupLocationLine1-label" class="form-label" for="trip-pickupLocationLine1-input">Address Line 1</label>
<input id="trip-pickupLocationLine1-input" class="form-input" name="pickupLocationLine1" type="text" placeholder="Street address, P.O. box, company name, c/o" aria-describedby="trip-pickupLocationLine1-tooltip" required/>
<div id="trip-pickupLocationLine1-tooltip" class="form-tooltip" role="tooltip">The first line of the pickup location, which may be a street address, P.O. box, company name, or c/o</div>
</div>
<div class="form-field">
<label id="trip-pickupLocationLine2-label" class="form-label" for="trip-pickupLocationLine2-input">Address Line 2</label>
<input id="trip-pickupLocationLine2-input" class="form-input" name="pickupLocationLine2" type="text" placeholder="Apartment, suite, unit, building, floor, etc." aria-describedby="trip-pickupLocationLine2-tooltip" required/>
<div id="trip-pickupLocationLine2-tooltip" class="form-tooltip" role="tooltip">The second line of the pickup location, which may be an apartment, suite, unit, building, floor, etc.</div>
</div>
<div class="form-field">
<label id="trip-pickupLocationCity-label" class="form-label" for="trip-pickupLocationCity-input">City</label>
<input id="trip-pickupLocationCity-input" class="form-input" name="pickupLocationCity" type="text" aria-describedby="trip-pickupLocationCity-tooltip" required/>
<div id="trip-pickupLocationCity-tooltip" class="form-tooltip" role="tooltip">The pickup location's city component</div>
</div>
<div class="form-field" role="combobox">
<label id="trip-pickupLocationRegion-label" class="form-label" for="trip-pickupLocationRegion-input">State/Province/Region</label>
<input id="trip-pickupLocationRegion-input" class="form-input" name="pickupLocationRegion" type="text" role="textbox" list="trip-pickupLocationRegion-list" aria-controls="trip-pickupLocationRegion-list" aria-expanded="false" aria-multiline="false" aria-describedby="trip-pickupLocationRegion-tooltip" required/>
<datalist id="trip-pickupLocationRegion-list" role="listbox">
<optgroup label="Canada">
<option value="ab">Alberta</option>
<option value="bc">British Columbia</option>
</optgroup>
<optgroup label="USA">
<option value="wa">Washington</option>
</optgroup>
</datalist>
<div id="trip-pickupLocationRegion-tooltip" class="form-tooltip" role="tooltip">The pickup location's state, province, or region component</div>
</div>
<div class="form-field">
<label id="trip-pickupLocationCode-label" class="form-label" for="trip-pickupLocationCode-input">Zip/Postal Code</label>
<input id="trip-pickupLocationCode-input" class="form-input" name="pickupLocationCode" type="text" aria-describedby="trip-pickupLocationCode-tooltip" required/>
<div id="trip-pickupLocationCode-tooltip" class="form-tooltip" role="tooltip">The pickup location's zip code or postal code component</div>
</div>
<div class="form-field" role="combobox">
<label id="trip-pickupLocationCountry-label" class="form-label" for="trip-pickupLocationCountry-input">Country</label>
<input id="trip-pickupLocationCountry-input" class="form-input" name="pickupLocationCountry" type="text" role="textbox" list="trip-pickupLocationCountry-list" aria-controls="trip-pickupLocationCountry-list" aria-expanded="false" aria-multiline="false" aria-describedby="trip-pickupLocationCountry-tooltip" required/>
<datalist id="trip-pickupLocationCountry-list" role="listbox">
<option value="ca">Canada</option>
<option value="usa">USA</option>
</datalist>
<div id="trip-pickupLocationCountry-tooltip" class="form-tooltip" role="tooltip">The pickup location's country component</div>
</div>
</fieldset>
</fieldset>
<fieldset class="form-fields" name="dropoff">
<legend class="form-legend">Drop off</legend>
<div class="form-field">
<label id="trip-deliveryDate-label" class="form-label" for="trip-deliveryDate-input">Delivery Date</label>
<input id="trip-deliveryDate-input" class="form-input" name="deliveryDate" type="datetime-local" aria-describedby="trip-deliveryDate-tooltip" required/>
<div id="trip-deliveryDate-tooltip" class="form-tooltip" role="tooltip">The delivery date and time</div>
</div>
<fieldset class="form-fields" name="deliveryLocation">
<div class="form-field">
<label id="trip-deliveryLocationLine1-label" class="form-label" for="trip-deliveryLocationLine1-input">Address Line 1</label>
<input id="trip-deliveryLocationLine1-input" class="form-input" name="deliveryLocationLine1" type="text" placeholder="Street address, P.O. box, company name, c/o" aria-describedby="trip-deliveryLocationLine1-tooltip" required/>
<div id="trip-deliveryLocationLine1-tooltip" class="form-tooltip" role="tooltip">The first line of the delivery location, which may be a street address, P.O. box, company name, or c/o</div>
</div>
<div class="form-field">
<label id="trip-deliveryLocationLine2-label" class="form-label" for="trip-deliveryLocationLine2-input">Address Line 2</label>
<input id="trip-deliveryLocationLine2-input" class="form-input" name="deliveryLocationLine2" type="text" placeholder="Apartment, suite, unit, building, floor, etc." aria-describedby="trip-deliveryLocationLine2-tooltip" required/>
<div id="trip-deliveryLocationLine2-tooltip" class="form-tooltip" role="tooltip">The second line of the delivery location, which may be an apartment, suite, unit, building, floor, etc.</div>
</div>
<div class="form-field">
<label id="trip-deliveryLocationCity-label" class="form-label" for="trip-deliveryLocationCity-input">City</label>
<input id="trip-deliveryLocationCity-input" class="form-input" name="deliveryLocationCity" type="text" aria-describedby="trip-deliveryLocationCity-tooltip" required/>
<div id="trip-deliveryLocationCity-tooltip" class="form-tooltip" role="tooltip">The delivery location's city component</div>
</div>
<div class="form-field" role="combobox">
<label id="trip-deliveryLocationRegion-label" class="form-label" for="trip-deliveryLocationRegion-input">State/Province/Region</label>
<input id="trip-deliveryLocationRegion-input" class="form-input" name="deliveryLocationRegion" type="text" role="textbox" list="trip-deliveryLocationRegion-list" aria-controls="trip-deliveryLocationRegion-list" aria-expanded="false" aria-multiline="false" aria-describedby="trip-deliveryLocationRegion-tooltip" required/>
<datalist id="trip-deliveryLocationRegion-list" role="listbox">
<optgroup label="Canada">
<option value="ab">Alberta</option>
<option value="bc">British Columbia</option>
</optgroup>
<optgroup label="USA">
<option value="wa">Washington</option>
</optgroup>
</datalist>
<div id="trip-deliveryLocationRegion-tooltip" class="form-tooltip" role="tooltip">The delivery location's state, province, or region component</div>
</div>
<div class="form-field">
<label id="trip-deliveryLocationCode-label" class="form-label" for="trip-deliveryLocationCode-input">Zip/Postal Code</label>
<input id="trip-deliveryLocationCode-input" class="form-input" name="deliveryLocationCode" type="text" aria-describedby="trip-deliveryLocationCode-tooltip" required/>
<div id="trip-deliveryLocationCode-tooltip" class="form-tooltip" role="tooltip">The delivery location's zip code or postal code component</div>
</div>
<div class="form-field" role="combobox">
<label id="trip-deliveryLocationCountry-label" class="form-label" for="trip-deliveryLocationCountry-input">Country</label>
<input id="trip-deliveryLocationCountry-input" class="form-input" name="deliveryLocationCountry" type="text" role="textbox" list="trip-deliveryLocationCountry-list" aria-controls="trip-deliveryLocationCountry-list" aria-expanded="false" aria-multiline="false" aria-describedby="trip-deliveryLocationCountry-tooltip" required/>
<datalist id="trip-deliveryLocationCountry-list" role="listbox">
<option value="ca">Canada</option>
<option value="usa">USA</option>
</datalist>
<div id="trip-deliveryLocationCountry-tooltip" class="form-tooltip" role="tooltip">The delivery location's country component</div>
</div>
</fieldset>
<input id="trip-addDelivery" type="button" value="Add another drop point"/>
</fieldset>
<fieldset class="form-fields" name="pricing">
<legend class="form-legend">Pricing</legend>
<div class="form-field">
<label id="trip-fuelSurcharge-label" class="form-label" for="trip-fuelSurcharge-input">Fuel Surcharge (per mile)</label>
<input id="trip-fuelSurcharge-input" class="form-input" name="fuelSurcharge" type="number" placeholder="0.00" pattern="[0-9]+\.[0-9]{2}" aria-describedby="trip-fuelSurcharge-tooltip" min="0" aria-valuemin="0" step="0.01" required/>
<div id="trip-fuelSurcharge-tooltip" class="form-tooltip" role="tooltip">The fuel surcharge per mile</div>
</div>
<div class="form-field">
<label id="trip-rateFormula-label" class="form-label" for="trip-rateFormula-input">Rate Formula</label>
<textarea id="trip-rateFormula-input" class="form-input" name="rateFormula" placeholder="Rate Formula" aria-describedby="trip-rateFormula-tooltip" aria-multiline="true" required></textarea>
<div id="trip-rateFormula-tooltip" class="form-tooltip" role="tooltip">The rate formula</div>
</div>
</fieldset>
<fieldset class="form-fields" name="truckTrailerDriver">
<legend class="form-legend">Truck and Driver</legend>
<div class="form-field" role="combobox">
<label id="trip-driverId-label" class="form-label" for="trip-driverId-input">Driver</label>
<input id="trip-driverId-input" class="form-input" name="driverId" type="text" role="textbox" list="trip-driverId-list" aria-controls="trip-driverId-list" aria-expanded="false" aria-multiline="false" aria-describedby="trip-driverId-tooltip" required/>
<datalist id="trip-driverId-list" role="listbox">
<option value="123456789">John Smith</option>
<option value="987654321">Jane Doe</option>
<option value="192837465">Gordon Ramsey</option>
</datalist>
<div id="trip-driverId-tooltip" class="form-tooltip" role="tooltip">The truck driver</div>
</div>
<div class="form-field" role="combobox">
<label id="trip-truckId-label" class="form-label" for="trip-truckId-input">Truck</label>
<input id="trip-truckId-input" class="form-input" name="truckId" type="text" role="textbox" list="trip-truckId-list" aria-controls="trip-truckId-list" aria-expanded="false" aria-multiline="false" aria-describedby="trip-truckId-tooltip" required/>
<datalist id="trip-truckId-list" role="listbox">
<option value="123456789">Toyota</option>
<option value="987654321">Nissan</option>
<option value="192837465">Tesla</option>
</datalist>
<div id="trip-truckId-tooltip" class="form-tooltip" role="tooltip">The truck</div>
</div>
<div class="form-field" role="combobox">
<label id="trip-trailerId-label" class="form-label" for="trip-trailerId-input">Trailer</label>
<input id="trip-trailerId-input" class="form-input" name="trailerId" type="text" role="textbox" list="trip-trailerId-list" aria-controls="trip-trailerId-list" aria-expanded="false" aria-multiline="false" aria-describedby="trip-trailerId-tooltip" required/>
<datalist id="trip-trailerId-list" role="listbox">
<option value="123456789">The short one</option>
<option value="987654321">The medium one</option>
<option value="192837465">The long one</option>
</datalist>
<div id="trip-trailerId-tooltip" class="form-tooltip" role="tooltip">The trailer</div>
</div>
</fieldset>
<input id="trip-submit" class="form-submit" type="submit" value="Create / Edit the trip"/>
</section>
</form>
Raw
truck.html
<!DOCTYPE html>
<title>Truck - TruckIt</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Heather Sawatsky"/>
<meta name="application-name" content="TruckIt"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/form.css"/>
<link rel="stylesheet" href="form.css"/>
<form id="truckForm" class="form">
<header id="truckHeader">
<h2>Create / Edit a Truck</h2>
</header>
<section id="truckContent">
<div class="form-field">
<label id="truck-type-label" class="form-label" for="truck-type-input">Type</label>
<input id="truck-type-input" class="form-input" name="type" type="text" list="truck-type-list" aria-describedby="truck-type-tooltip" required autofocus/>
<datalist id="truck-type-list">
<option>Type A</option>
<option>Type B</option>
<option>Type C</option>
</datalist>
<div id="truck-type-tooltip" class="form-tooltip" role="tooltip">The truck's type</div>
</div>
<div class="form-field">
<label id="truck-mileage-label" class="form-label" for="truck-mileage-input">Mileage</label>
<input id="truck-mileage-input" class="form-input" name="mileage" type="number" placeholder="Eg. 6053" aria-describedby="truck-mileage-tooltip" value="0" aria-valuenow="0" min="0" aria-valuemin="0" required/>
<div id="truck-mileage-tooltip" class="form-tooltip" role="tooltip">The truck's mileage</div>
</div>
<div class="form-field">
<label id="truck-serviceDate-label" class="form-label" for="truck-serviceDate-input">Service Date</label>
<input id="truck-serviceDate-input" class="form-input" name="serviceDate" type="date" aria-describedby="truck-serviceDate-tooltip" required/>
<div id="truck-serviceDate-tooltip" class="form-tooltip" role="tooltip">The truck's last service date</div>
</div>
<input id="truck-submit" class="form-submit" type="submit" value="Create / Edit the trip"/>
</section>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment