Last active
July 22, 2018 06:24
-
-
Save sawatsky/2eac6bc2a028f885681b1d1fc1d1f37b to your computer and use it in GitHub Desktop.
The various forms for creating / editing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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