Untitled

mail@pastecode.io avatar
unknown
plain_text
2 months ago
3.6 kB
1
Indexable
Never
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="./snipped.css">
</head>
<body>
    <img src="https://i.postimg.cc/bJMq0qr6/slap-1.png" class="full-width-image">
    <div class="form-wrapper snipcss-4URlP">
        <form id="myForm" class="forms">
            <div class="form__input">
                <label for="fullName">Nom, Prénom</label>
                <input type="text" name="fullName" id="fullName" placeholder="Mathieu Dupont" required pattern="[a-zA-Z ]{2,}" autocomplete="name" value="">
                <span>Can't be blank</span>
            </div>
            <div class="form__input">
                <label for="address">Adresse</label>
                <input type="text" name="address" id="address" placeholder="91 Place de la bastille" required autocomplete="address-line1" value="">
                <span>Can't be blank</span>
            </div>
            <div class="forms__detail">
                <div class="form__input">
                    <label for="postalCode">Code Postal</label>
                    <input type="text" name="postalCode" id="postalCode" placeholder="85000" required minlength="5" maxlength="5" autocomplete="postal-code" value="">
                    <span>Invalid format</span>
                </div>
                <div class="form__input">
                    <label for="phone">Numéro de Telephone</label>
                    <input type="tel" name="phone" id="phone" placeholder="0613745894" required minlength="10" maxlength="10" autocomplete="tel" value="">
                    <span>Invalid format</span>
                </div>
            </div>
            <div class="form__input">
                <label for="cardName">Nom du Titulaire de la Carte</label>
                <input type="text" name="cardName" id="cardName" placeholder="e.g. Jane Appleseed" required pattern="^[ a-zA-Z ]*$" autocomplete="cc-name" value="">
                <span>Can't be blank</span>
            </div>
            <div class="form__input">
                <label for="cardNumber">Numéro de Carte</label>
                <input type="text" name="cardNumber" id="cardNumber" placeholder="1234 5678 9101 1213" required pattern="[0-9 ]{19}" autocomplete="cc-number" value="">
                <span>Can't be blank</span>
            </div>
            <div class="forms__detail">
                <div class="form__input">
                    <label for="expMonth">Mois d'expiration (MM)</label>
                    <input type="number" name="expMonth" id="expMonth" placeholder="MM" required min="1" max="12" autocomplete="cc-exp-month" value="">
                    <span>Incorrect date</span>
                </div>
                <div class="form__input">
                    <label for="expYear">Année d'expiration (YY)</label>
                    <input type="number" name="expYear" id="expYear" placeholder="YY" required autocomplete="cc-exp-year" value="">
                    <span>Incorrect date</span>
                </div>
                <div class="form__input">
                    <label for="cvv">CVV</label>
                    <input type="number" name="cvv" id="cvv" placeholder="123" required max="999" min="100" autocomplete="cc-csc" value="">
                    <span>CVC format incorrect</span>
                </div>
            </div>
            <button type="submit" class="form-button purple gray-onhover">Confirm</button>
        </form>
    </div>

    <script src="luffy.js"></script>
</body>
</html>
Leave a Comment