Formulario de ingreso de número de teléfono HTML con botón más

819 codex

Abrir en el editor Publica tu código

Formulario de ingreso de número de teléfono HTML con botón más

Recomendado

16 January 2026

Friday Night Funkin' vs. Nonsense Game HTML5

5 February 2026

Archivo Wayback de YouTube y herramientas de video

1 April 2026

Cargador HTML5 y configuración de Firebase para el juego Escape Road

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>

CSS