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

409 codex

Ouvrir dans l'éditeur Video Publiez votre code

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

Recommandé

18 August 2024

Case à cocher / Développeur ou designer ?

8 July 2025

Choix du personnage avec animation de la carte d'aperçu (sprites CSS)

28 June 2025

Modèle HTML de page d'erreur 404

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>

Recommandé

Case à cocher / Développeur ou designer ?

Choix du personnage avec animation de la carte d'aperçu (sprites CSS)

Modèle HTML de page d'erreur 404

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS