Exemplo de seletor de data HTML

Abrir no Editor Publique Seu Código Precisa de um site?

Recomendado

27 May 2025

Diagrama de Venn animado

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Date Picker Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
            margin: 0;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        h1 {
            color: #333;
            margin-bottom: 25px;
        }
        label {
            display: block;
            margin-bottom: 10px;
            font-size: 1.1em;
            color: #555;
        }
        input[type="date"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1em;
            width: 200px; /* Adjust as needed */
            box-sizing: border-box;
            -webkit-appearance: none; /* Remove default browser styling for some inputs */
            -moz-appearance: none;
            appearance: none;
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Select a Date</h1>
        <form action="#" method="get">
            <label for="eventDate">Choose a date:</label>
            <input type="date" id="eventDate" name="eventDate" value="2023-10-26">
            
        </form>
        <p style="margin-top: 20px; font-size: 0.9em; color: #777;">
            This is a native HTML5 date picker. Its appearance may vary across browsers.
        </p>
    </div>
</body>
</html>

Exemplo de seletor de data HTML

Recomendado

Cartão de pagamento

Erro de senha saltitante

Diagrama de Venn animado

HTML

CSS

JS

Recomendado

Cartão de pagamento

Erro de senha saltitante

Diagrama de Venn animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS