chromium/components/test/data/autofill/heuristics/input/111_checkout_virgin_america.com.html

<form method="POST"  autocomplete="on" data-vx-form-handler="" data="creditCard.cardData" data-fields="creditCard.cardFields" data-submit-error-message="Add card info to continue" data-on-success="creditCard.onAddCard()">

            <div data-vx-form-creditcard="" name="creditCard" data-input-label="Card number" data-form-handler="formHandler" data-cc-type="creditCard.cardData.type" >
  <div  ng- ng-show="input.isVisible" data-vx-form-input="" type="text" name="creditCard" data-input-label="" data-validate="required,creditCardNumber,creditCard" autocorrect="off" maxlength="16" pattern="\d*" data-input-readonly="" data-input-autocompletetype="cc-number" data-input-autocomplete="on">
    <label >
        
        <span ng-show="!input.label &amp;&amp; !input.placeholderSupport &amp;&amp; input.showFakePlaceholder" ng-bind="input.placeholder" ></span>
        <div >
	        <input maxlength="16" autocomplete="on"  ng-readonly="input.readonly" ng-model="input.value" ng-change="input.validateValue(input.value)" x-autocompletetype="input.autocompletetype" ng-class="{
                    'is-valid': input.isInputValid() === true &amp;&amp; input.isMessagingVisible,
                    'is-invalid': input.isInputValid() === false &amp;&amp; input.isMessagingVisible,
                    'input-text-optional': input.isOptional
                }" type="text" name="creditCard" autocorrect="off" pattern="\d*" inputautocompletetype="cc-number" inputautocomplete="on" ng >
	        <span ng-show="input.isMessagingVisible"  ng-class="{
                'is-valid': input.isInputValid() === true,
                'is-invalid': input.isInputValid() === false,
                'input-message-optional': input.isOptional
            }">Invalid card #</span>
	    </div>
        <div  ng-transclude=""></div>
    </label>
</div>
  <ul  ng-hide="inputReadonly">
      <li  ng->American Express</li>
      <li  ng->Discover</li>
      <li  ng->Mastercard</li>
      <li  ng->Visa</li>
      <li  ng->UATP</li>
  </ul>
</div>

            <div  ng- ng-show="input.isVisible" data-vx-form-input="" data-input-autocompletetype="cc-name" data-input-autocomplete="on" type="text" name="cardholderName" data-input-label="Cardholder's name" data-validate="required,name" autocorrect="off">
    <label >
        Cardholder's name
        <span ng-show="!input.label &amp;&amp; !input.placeholderSupport &amp;&amp; input.showFakePlaceholder" ng-bind="input.placeholder" ></span>
        <div >
	        <input maxlength="" autocomplete="on"  ng-readonly="input.readonly" ng-model="input.value" ng-change="input.validateValue(input.value)" x-autocompletetype="input.autocompletetype" ng-class="{
                    'is-valid': input.isInputValid() === true &amp;&amp; input.isMessagingVisible,
                    'is-invalid': input.isInputValid() === false &amp;&amp; input.isMessagingVisible,
                    'input-text-optional': input.isOptional
                }" inputautocompletetype="cc-name" inputautocomplete="on" type="text" name="cardholderName" autocorrect="off" ng >
	        <span ng-show="input.isMessagingVisible"  ng-class="{
                'is-valid': input.isInputValid() === true,
                'is-invalid': input.isInputValid() === false,
                'input-message-optional': input.isOptional
            }">Good</span>
	    </div>
        <div  ng-transclude=""></div>
    </label>
</div>

            <div >
                <span >Expiration Date</span>
                <div >
                    <div ng- ng-show="select.isVisible" data-vx-form-select-array="" data-select- data-select-name="expireMonth" data-select-title="Month" data-select-options="months" data-validate="required" >
    <select  name="expireMonth" vx-common-custom-select="" ng-model="select.value" ng-options="option.name for option in select.options" ng-change="select.validateValue(select.value)" ng-switch="select.hasTitle" ><!-- ngSwitchWhen: true --><option value="" ng-switch-when="true" >Month</option><option value="0">January</option><option value="1">February</option><option value="2">March</option><option value="3">April</option><option value="4">May</option><option value="5">June</option><option value="6">July</option><option value="7">August</option><option value="8">September</option><option value="9">October</option><option value="10">November</option><option value="11">December</option></select><span  ><span  >Month</span></span>
</div>
                </div>
                <div >
                    <div ng- ng-show="select.isVisible" data-vx-form-select-array="" data-select- data-select-name="expireYear" data-select-title="Year" data-select-options="years" data-validate="required" >
    <select  name="expireYear" vx-common-custom-select="" ng-model="select.value" ng-options="option.name for option in select.options" ng-change="select.validateValue(select.value)" ng-switch="select.hasTitle" ><!-- ngSwitchWhen: true --><option value="" ng-switch-when="true" >Year</option><option value="0">2014</option><option value="1">2015</option><option value="2">2016</option><option value="3">2017</option><option value="4">2018</option><option value="5">2019</option><option value="6">2020</option><option value="7">2021</option><option value="8">2022</option><option value="9">2023</option><option value="10">2024</option><option value="11">2025</option></select><span  ><span  >Year</span></span>
</div>
                </div>
            </div>

            <div  ng- ng-show="input.isVisible" data-vx-form-input="" data-type="text" data-maxlength="4" data-name="securityNumber" data-autocorrect="off" data-pattern="\d*" data-input- data-input-label="CVV Number" data-validate="required,security" data-inputmode="numeric">
    <label >
        CVV Number
        <span ng-show="!input.label &amp;&amp; !input.placeholderSupport &amp;&amp; input.showFakePlaceholder" ng-bind="input.placeholder" ></span>
        <div >
	        <input maxlength="4" autocomplete="on"  ng-readonly="input.readonly" ng-model="input.value" ng-change="input.validateValue(input.value)" x-autocompletetype="input.autocompletetype" ng-class="{
                    'is-valid': input.isInputValid() === true &amp;&amp; input.isMessagingVisible,
                    'is-invalid': input.isInputValid() === false &amp;&amp; input.isMessagingVisible,
                    'input-text-optional': input.isOptional
                }" type="text" name="securityNumber" autocorrect="off" pattern="\d*" inputmode="numeric" ng >
	        <span ng-show="input.isMessagingVisible"  ng-class="{
                'is-valid': input.isInputValid() === true,
                'is-invalid': input.isInputValid() === false,
                'input-message-optional': input.isOptional
            }">Good</span>
	    </div>
        <div  ng-transclude="">
                <div >3 or 4 digit number<br>on the back or front corner<br>of your card. <a href="#" vx-common-prevent-default="" ng-click="creditCard.showCVVInfo()">See an example</a></div>
            </div>
    </label>
</div>

            <div  ng- ng-show="input.isVisible" data-vx-form-input="" type="text" name="nickname" data-input-label="Card's nickname" placeholder="e.g. My Visa, Corporate card, etc" data-validate="required" autocorrect="off" data-is-visible="purchase.isElevateUser">
    <label >
        Card's nickname
        <span ng-show="!input.label &amp;&amp; !input.placeholderSupport &amp;&amp; input.showFakePlaceholder" ng-bind="input.placeholder" >e.g. My Visa, Corporate card, etc</span>
        <div >
	        <input maxlength="" autocomplete="on"  ng-readonly="input.readonly" ng-model="input.value" ng-change="input.validateValue(input.value)" x-autocompletetype="input.autocompletetype" ng-class="{
                    'is-valid': input.isInputValid() === true &amp;&amp; input.isMessagingVisible,
                    'is-invalid': input.isInputValid() === false &amp;&amp; input.isMessagingVisible,
                    'input-text-optional': input.isOptional
                }" type="text" name="nickname" placeholder="e.g. My Visa, Corporate card, etc" autocorrect="off" isvisible="purchase.isElevateUser" ng>
	        <span ng-show="input.isMessagingVisible"  ng-class="{
                'is-valid': input.isInputValid() === true,
                'is-invalid': input.isInputValid() === false,
                'input-message-optional': input.isOptional
            }"></span>
	    </div>
        <div  ng-transclude=""></div>
    </label>
</div>

            <ul  data-vx-form-radio="" data-radio-name="useAddress" data-radio-label="address" data-validate="required" ng-show="storedAddresses.length">
                <li  ng->
                    <label  for="use-stored-address">
                        <input type="radio" id="use-stored-address" name="useAddress" value="use-stored-address" ng-click="creditCard.selectAddressOption('use-stored-address')" ng-model="radio.useAddress" ng-change="radio.validateValue(radio.useAddress)" ng-selected="radio.validateValue(true); creditCard.addressOption === 'use-stored-address'" >
                        Use stored address
                    </label>
                    <div  ng-show="creditCard.addressOption === 'use-stored-address'">
                        <select name="stored-address"  vx-common-custom-select="" ng-model="storedAddress" ng-options="storedAddress.addressName for ($index, storedAddress) in storedAddresses" ng-change="creditCard.updateSelectedAddress(storedAddress)" ><option value="?" selected="selected"></option></select><span  ><span  >&nbsp;</span></span>
                        <dl  ng-show="creditCard.selectedAddress.addressOne">
                            <dt ></dt>
                            <dd ></dd>
                            <dd ng-show="creditCard.selectedAddress.addressTwo" ></dd>
                            <dd >,  </dd>
                            <dd ></dd>
                        </dl>
                    </div>
                </li>
                <li  ng->
                    <label  for="add-new-address">
                        <input type="radio" id="add-new-address" name="useAddress" value="add-new-address" ng-click="creditCard.selectAddressOption('add-new-address')" ng-model="radio.useAddress" ng-change="radio.validateValue(radio.useAddress)" ng-selected="creditCard.addressOption === 'add-new-address'"  selected="selected">
                        Add new address
                    </label>
                </li>
            </ul>

            <div  ng-show="checkbox.isVisible" data-vx-form-checkbox="" name="shouldSave" data-input-label="Save credit card info" data-is-optional="optional" data-is-visible="purchase.isElevateUser">
  <label  ng->
      <input  type="checkbox" ng-model="checkbox.value" ng-change="checkbox.validateValue(checkbox.value)" vxformcheckbox="" name="shouldSave" isoptional="optional" isvisible="purchase.isElevateUser">
      Save credit card info
      <span  ng-transclude=""></span>
  </label>
</div>

            <div >
                <button  ng- data-vx-form-submit="">
    Add card info to continue
    <span  ng-show="formHandler.isLoading">
        <span>•</span><span>•</span><span>•</span>
    </span>
</button>
            </div>

            <div >
                or <a href="#" vx-common-prevent-default="" ng-click="purchase.changePaymentView('select')">select another payment method</a>
            </div>
        </form>