Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Home Depot - Checkout</title>
</head>
<body>
<checkout-form name="pickupDetailsSection">
<shipping>
<div>
<hd-address type="shipping">
<hd-address-field label="Shipping Address" type="type">
<div name="addressFieldForm">
<div>
<div>
<div>
<hd-name-field name="firstName" label="First Name" analytics-tag="pickup options">
<span name="firstName">
<label for="inputField">
<span>First Name</span>
</label>
<input type="text" id="firstName" name="inputField" maxlength="30" placeholder="" required="required">
</span>
</hd-name-field>
</div>
<div>
<hd-name-field name="lastName" label="Last Name" analytics-tag="pickup options">
<span name="lastName">
<label for="inputField">
<span>Last Name</span>
</label>
<input type="text" id="lastName" name="inputField" maxlength="30" placeholder="" required="required">
</span>
</hd-name-field>
</div>
</div>
<div>
<div>
<hd-email-field name="emailInput" label="Email" placeholder="you@domain.com" analytics-tag="pickup options">
<span name="emailInput">
<label for="inputField">
<span>Email</span>
</label>
<input id="emailInput" type="email" name="inputField" placeholder="you@domain.com" required="required">
</span>
</hd-email-field>
</div>
</div>
<div>
<create-account>
<div>
<div>
<div>
<span role="button" tabindex="0">Create an account</span> to track your order history and check out faster - all we need is a password.</div>
<div>
<p>Check out faster, access past orders, and organize products into lists.</p>
</div>
</div>
<div>
<div>
<hd-password-field label="Password" name="password">
<span name="hdPasswordField">
<label for="textPasswordInput">
<span>Password</span>
</label>
<input type="password" name="inputField">
<span>
</span>
</span>
</hd-password-field>
</div>
<div>
<hd-password-field name="confirmPassword" label="Confirm Password">
<span name="hdPasswordField">
<label for="textPasswordInput">
<span>Confirm Password</span>
</label>
<input type="password" name="inputField">
<span>
</span>
</span>
</hd-password-field>
</div>
<div>
<div>
<hd-check-box field-value="" label="SHOW PASSWORD" tab-index-hd="-1">
<div>
<div>
<input tabindex="-1" type="checkbox" name="hdCheckBox_3" id="hdCheckBox_3">
<label for="hdCheckBox_3">SHOW PASSWORD</label>
</div>
</div>
</hd-check-box>
</div>
<div>
<span>Passwords are case sensitive and must be at least 8 characters.</span>
<div>
<span>Create a strong password by:</span>
<ul>
<li>Including numbers or symbols</li>
<li>Mixing upper/lowercase</li>
</ul>
</div>
</div>
<div>
<a target="_blank">Terms & Conditions</a> | <a target="_blank">Privacy & Security</a>
</div>
</div>
<create-account-button>
</create-account-button>
</div>
</div>
</create-account>
</div>
<div>
<div>
<hd-phone-field name="phone" label="Phone" analytics-tag="pickup options">
<span name="phone">
<label for="inputField">
<span>Phone</span>
</label>
<input id="phone" name="inputField" type="tel" inputmode="numeric" placeholder="(___) ___-____" required="required">
</span>
</hd-phone-field>
</div>
</div>
</div>
<div>
<div>
<div>
<label for="billingAddress">
<span>Shipping Address</span>
</label>
</div>
<span name="streetInput">
<hd-type-ahead id="billingAddress" name="billingAddress" label="Billing Street Address" placeholder="Address Line 1" pause="700" input-class="form-input__field">
<div>
<input id="billingAddress_value" name="billingAddress" type="text" maxlength="30" placeholder="Address Line 1" required="">
</div>
</hd-type-ahead>
</span>
</div>
</div>
<div>
<span role="button" tabindex="0">Add an apartment, suite, building, etc.</span>
</div>
<div>
<div>
<span name="zipInput">
<label for="zip">
<span>ZIP Code</span>
</label>
<input type="tel" name="zip" maxlength="5" required="">
</span>
</div>
<div>
<span>
<label>
<span>City, State</span>
</label>
<span>
<b>MOUNTAIN VIEW, CA</b>
</span>
<div>
<span name="stateInput">
<select id="cityStateListSelector" autocomplete="billing street-address" name="pickupLocation">
<option value="? object:null ?" selected="selected">
</option>
</select>
</span>
</div>
</div>
</div>
</div>
</hd-address-field>
</hd-address>
<div>
<hd-check-box field-value="checkoutFlags.hideBillingAddress" label="Use as Billing Address" checked="checked">
<div>
<div>
<input tabindex="" type="checkbox" name="hdCheckBox_1" id="hdCheckBox_1" checked="checked">
<label for="hdCheckBox_1">Use as Billing Address</label>
</div>
</div>
</hd-check-box>
</div>
</div>
</shipping>
</checkout-form>
<card-field form-is-valid="formIsValid">
<div name="cardForm">
<div>
<input name="expiryMonth" type="tel" autocomplete="cc-exp-month" tabindex="-1">
<input name="expiryYear" type="tel" autocomplete="cc-exp-year" tabindex="-1">
</div>
<div>
<div>
<span>Payment</span>
</div>
</div>
<div>
<div>
<input type="radio" value="PayPal" id="payPal" name="paymentOptions">
<label for="payPal" tabindex="10">
<span>
</span>
<div>
</div>
</label>
</div>
<div>
<input type="radio" select-payment="" value="creditCard" id="creditCard" name="paymentOptions" checked="checked">
<label for="creditCard" tabindex="10">
<span>
</span>Credit Card</label>
</div>
<div>
<span>
<label>
</label>
<input id="cardNumber" name="cardNumber" type="tel" mask-field="" mask="0000 0000 0000 0000 0000 0" maxlength="26" placeholder="Enter credit card number" required="required">
<span id="ccIcon" tabindex="-1" role="button">
</span>
</span>
</div>
<div>
<div>
<div>
<div>
<span>Expiration</span>
<span>
<select id="ccMonth" name="ccMonth" required="">
<option value="" selected="selected">Month</option>
<option label="01 - January" value="object:17">01 - January</option>
<option label="02 - February" value="object:18">02 - February</option>
<option label="03 - March" value="object:19">03 - March</option>
<option label="04 - April" value="object:20">04 - April</option>
<option label="05 - May" value="object:21">05 - May</option>
<option label="06 - June" value="object:22">06 - June</option>
<option label="07 - July" value="object:23">07 - July</option>
<option label="08 - August" value="object:24">08 - August</option>
<option label="09 - September" value="object:25">09 - September</option>
<option label="10 - October" value="object:26">10 - October</option>
<option label="11 - November" value="object:27">11 - November</option>
<option label="12 - December" value="object:28">12 - December</option>
</select>
</span>
</div>
</div>
<div>
<div>
<span>
<select id="ccYear" name="ccYear" required="">
<option value="" selected="selected">Year</option>
<option label="2017" value="object:29">2017</option>
<option label="2018" value="object:30">2018</option>
<option label="2019" value="object:31">2019</option>
<option label="2020" value="object:32">2020</option>
<option label="2021" value="object:33">2021</option>
<option label="2022" value="object:34">2022</option>
<option label="2023" value="object:35">2023</option>
<option label="2024" value="object:36">2024</option>
<option label="2025" value="object:37">2025</option>
<option label="2026" value="object:38">2026</option>
<option label="2027" value="object:39">2027</option>
<option label="2028" value="object:40">2028</option>
<option label="2029" value="object:41">2029</option>
<option label="2030" value="object:42">2030</option>
<option label="2031" value="object:43">2031</option>
<option label="2032" value="object:44">2032</option>
<option label="2033" value="object:45">2033</option>
<option label="2034" value="object:46">2034</option>
<option label="2035" value="object:47">2035</option>
</select>
</span>
</div>
</div>
</div>
<div>
<span>
<label>
<span>
CVV (on back)
</span>
</label>
<input id="cvv" name="cvv" type="tel" placeholder="ñññ" minlength="3" required="">
<span id="ccIcon">
</span>
</span>
</div>
</div>
<div>
<span role="button" tabindex="0">Apply a Gift Card</span>
<span> | </span>
<span role="button" tabindex="0">Have a PO/Job Code for this order?</span>
</div>
</div>
<div>
</div>
<div>
</div>
</div>
</card-field>
<base>
<div>
<ui-view>
<div id="checkout" analytics="">
<div name="checkout">
<div>
<div>
<div>
<myapron-display>
<div>
<div>
<span name="myApronID">
<label for="myapron">
<span>myApron ID (Optional)</span>
</label>
<input type="tel" name="myapron" maxlength="10">
</span>
</div>
</div>
</myapron-display>
<email-subscribe>
<div>
<div>
<hd-check-box field-value="user.emailSubscribed" name="emailSubscribed" label="Yes, I would like to receive emails about unadvertised & online only specials, new products and store promotions." checked="true">
<div>
<div>
<input tabindex="" type="checkbox" name="emailSubscribed" id="hdCheckBox_2" checked="checked">
<label for="hdCheckBox_2">Yes, I would like to receive emails about unadvertised & online only specials, new products and store promotions.</label>
</div>
</div>
</hd-check-box>
</div>
</div>
</email-subscribe>
</div>
</div>
</div>
</div>
<div>
<right-rail pick-up-options="pickUpOptions" messages="checkoutModel.messagesSummary">
<div>
<div>
<promotions-summary promotions="order.promotionsModel" messages="messages">
<div name="promoForm">
<div>
<span role="button" tabindex="0">Have a promo code?</span>
</div>
<div>
<div>
<span>
<span>
</span>
</span>
</div>
</div>
<div>
<span>
<input id="promoId" name="promoId" type="text">
</span>
<span>
<a>
<span>Apply</span>
</a>
</span>
</div>
</div>
</promotions-summary>
</div>
</div>
</right-rail>
</div>
</div>
</ui-view>
</div>
</body>
</html>