editCreditCard.xhtml (3372B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- This Source Code Form is subject to the terms of the Mozilla Public 3 - License, v. 2.0. If a copy of the MPL was not distributed with this 4 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 5 <!DOCTYPE html> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <title data-l10n-id="autofill-add-card-title"></title> 9 <meta http-equiv="Content-Security-Policy" content="default-src chrome:" /> 10 <link rel="localization" href="browser/preferences/formAutofill.ftl" /> 11 <link 12 rel="stylesheet" 13 href="chrome://formautofill/content/skin/editDialog-shared.css" 14 /> 15 <link 16 rel="stylesheet" 17 href="chrome://formautofill/content/skin/editCreditCard.css" 18 /> 19 <script 20 type="module" 21 src="chrome://formautofill/content/editCreditCard.mjs" 22 ></script> 23 </head> 24 <body> 25 <form id="form" class="editCreditCardForm contentPane" autocomplete="off"> 26 <!-- 27 The <span class="label-text" …/> needs to be after the form field in the same element in 28 order to get proper label styling with :focus and :user-invalid 29 --> 30 <label id="cc-number-container" class="container" role="none"> 31 <span 32 id="invalidCardNumberString" 33 hidden="hidden" 34 data-l10n-id="autofill-card-invalid-number" 35 ></span> 36 <!-- Because there is text both before and after the input, a11y will 37 include the value of the input in the label. Therefore, we override 38 with aria-labelledby. 39 --> 40 <input 41 id="cc-number" 42 type="text" 43 required="required" 44 minlength="14" 45 pattern="[\- 0-9]+" 46 aria-labelledby="cc-number-label" 47 /> 48 <span 49 id="cc-number-label" 50 data-l10n-id="autofill-card-number" 51 class="label-text" 52 /> 53 </label> 54 <label id="cc-exp-month-container" class="container"> 55 <select id="cc-exp-month" required="required"> 56 <option /> 57 </select> 58 <span data-l10n-id="autofill-card-expires-month" class="label-text" /> 59 </label> 60 <label id="cc-exp-year-container" class="container"> 61 <select id="cc-exp-year" required="required"> 62 <option /> 63 </select> 64 <span data-l10n-id="autofill-card-expires-year" class="label-text" /> 65 </label> 66 <label id="cc-name-container" class="container"> 67 <input id="cc-name" type="text" required="required" /> 68 <span data-l10n-id="autofill-card-name-on-card" class="label-text" /> 69 </label> 70 <label id="cc-csc-container" class="container" hidden="hidden"> 71 <!-- The CSC container will get filled in by forms that need a CSC (using csc-input.js) --> 72 </label> 73 <div 74 id="billingAddressGUID-container" 75 class="billingAddressRow container rich-picker" 76 > 77 <select id="billingAddressGUID" required="required"></select> 78 <label 79 for="billingAddressGUID" 80 data-l10n-id="autofill-card-billing-address" 81 class="label-text" 82 /> 83 </div> 84 </form> 85 <div id="controls-container"> 86 <button id="cancel" data-l10n-id="autofill-cancel-button" /> 87 <button id="save" class="primary" data-l10n-id="autofill-save-button" /> 88 </div> 89 </body> 90 </html>