प्लस बटन के साथ HTML फ़ोन नंबर इनपुट फ़ॉर्म

64 codex

संपादक में खोलें अपना कोड प्रकाशित करें

प्लस बटन के साथ HTML फ़ोन नंबर इनपुट फ़ॉर्म

अनुशंसित

8 July 2025

सीएसएस क्लासों के साथ HTML सीढ़ी संरचना

29 July 2025

ब्रांडिंग और मार्केटिंग के साथ कंपनी कार्ड सूची

20 April 2024

HTML और CSS का उपयोग करके सोशल आइकन

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>

अनुशंसित

सीएसएस क्लासों के साथ HTML सीढ़ी संरचना

ब्रांडिंग और मार्केटिंग के साथ कंपनी कार्ड सूची

HTML और CSS का उपयोग करके सोशल आइकन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS