Formulaire de saisie de numéro de téléphone HTML avec bouton Plus

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

17 November 2025

Site Web de magasin de chaussures

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Phone Input</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
        }

.card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 60px 50px;
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            width: 100%;
            animation: fadeIn 0.6s ease-out;
        }

@keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

h1 {
            font-size: 28px;
            font-weight: 600;
            color: #1a202c;
            margin-bottom: 32px;
        }

.controls {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

.number-display {
            flex: 1;
            min-width: 200px;
            padding: 16px 20px;
            font-size: 20px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            background: #f7fafc;
            color: #1a202c;
            font-weight: 500;
            transition: all 0.3s ease;
            user-select: none;
        }

.number-display:hover {
            border-color: #cbd5e0;
            background: white;
        }

.increment-button {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 28px;
            font-weight: 300;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

.increment-button:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
        }

.increment-button:active {
            transform: translateY(0) scale(0.95);
        }

.submit-button {
            padding: 16px 40px;
            font-size: 18px;
            font-weight: 600;
            color: white;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            flex-shrink: 0;
        }

.submit-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
        }

.submit-button:active {
            transform: translateY(0);
        }

@media (max-width: 600px) {
            .card {
                padding: 40px 30px;
            }

h1 {
                font-size: 24px;
            }

.number-display {
                width: 100%;
                font-size: 18px;
                padding: 14px 16px;
            }

.controls {
                gap: 12px;
            }

.increment-button {
                flex: 1;
            }

.submit-button {
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Please enter your phone number:</h1>
        <div class="controls">
            <div class="number-display" id="display">(216) 409-9992</div>
            <button class="increment-button" id="plusButton" type="button">+</button>
            <button class="submit-button" type="button">Submit</button>
        </div>
    </div>

function refresh() {
                display.textContent = format(currentNumber);
            }

function increment() {
                currentNumber++;
                refresh();
            }

btn.onclick = increment;

refresh();
        })();
    </script>
</body>
</html>

Formulaire de saisie de numéro de téléphone HTML avec bouton Plus

Recommandé

Un code de Météore

Un code par alejandrokundrah

Site Web de magasin de chaussures

HTML

CSS

JS

Recommandé

Un code de Météore

Un code par alejandrokundrah

Site Web de magasin de chaussures

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS