Campo de hora
Registre o tempo com precisão e facilidade. Do agendamento de compromissos à seleção de turnos, com seletores de tempo nativos e elegantes, intervalos inteligentes e formatação flexível, o campo de tempo oferece validação, personalização e uma experiência de usuário perfeita.
Coleta inteligente de tempo com validação integrada
Perfeito para:
Funcionalidades poderosas para cada caso de uso
🕐 Formatos de horário flexíveis
Exibição de 24 ou 12 horas
Escolha o formato que melhor se adapta ao seu público. Use o formato de 24 horas (14:30) para usuários internacionais ou o formato de 12 horas com AM/PM (2:30) para maior familiaridade.
Conversão automática de formato
O campo lida com a conversão de formato automaticamente – os usuários veem o formato de sua preferência enquanto seu sistema recebe dados consistentes.
Exemplos:
- Horário comercial: 9h00 – 5h00 (12 horas)
- Agendamento internacional: 09:00 – 17:00 (24 horas)
- Consultas médicas14:30 (precisão de 24 horas)
⏰ Intervalos de tempo inteligentes
Precisão de seleção de controle
Defina o nível de detalhamento da seleção de tempo. Escolha entre intervalos de um minuto a uma hora, de acordo com suas necessidades.
Intervalos disponíveis:
- A cada minuto (12:00, 12:01, 12:02…) – Máxima precisão
- A cada 5 minutos (12:00, 12:05, 12:10…) – Consultas padrão
- A cada 10 minutos (12:00, 12:10, 12:20…) – Reservas rápidas
- A cada 15 minutos (12:00, 12:15, 12:30…) – Mais comum
- A cada 30 minutos (12:00, 12:30, 1:00…) – Intervalos de meia hora
- A cada hora (12:00, 1:00, 2:00…) – Seleção simples
Por que isso importa:
Menos opções = seleção mais rápida. Ajuste os intervalos às suas necessidades de agendamento para uma melhor experiência do usuário.
🎯 Restrições de intervalo de tempo
Defina os horários mais cedo e mais tarde.
Limite os horários disponíveis para corresponder ao horário comercial, à programação de eventos ou às janelas de operação. Os usuários não podem selecionar horários fora do intervalo definido.
Validação Inteligente
A validação em nível de navegador impede envios inválidos antes que os usuários cliquem em enviar.
Casos de uso:
- Horário de funcionamento: somente das 9h às 18h
- Eventos noturnos: Somente após as 17h
- Horários da manhã: Somente antes das 12h
- Turno da noite: 10h00 – 6h00
Exemplos:
- Reservas no restaurante: mínimo às 11h, máximo às 22h.
- Aulas de ginástica: mínimo às 6h, máximo às 21h.
- Horário de atendimento: mínimo 8h, máximo 17h.
🔧 Opções de hora padrão
Três valores iniciais inteligentes:
1. Em branco (Sem valor padrão)
Os usuários começam com um campo vazio – o ideal é que o horário seja sempre único.
2. Hora Atual
Preenche automaticamente com a hora atual quando o formulário é carregado – perfeito para campos de “hora do incidente” ou de registro de data e hora.
3. Hora personalizada
Selecione previamente um horário específico, como "9h00", para ver sugestões de horários de agendamento ou opções comuns.
Quando usar cada um:
- Em branco – Horários de início do evento, agendas pessoais
- Atual – Registro de data e hora, horários de check-in
- Personalizado – Horários de reunião sugeridos, horário padrão
⚡ Precisão em segundos (opcional)
Adicione segundos quando necessário.
Ative o campo de segundos (HH:MM:SS) para um controle preciso do tempo. Ideal para provas de tempo, cronômetros e registros de data e hora exatos.
Exemplos de formato:
- Sem segundos: 14:30 ou 2:30
- Com segundos: 14:30:45 ou 2:30:45
Ideal para:
- Cronometragem esportiva e resultados de corridas
- Experimentos científicos
- Sistemas de registro precisos
- Inscrições para contra-relógio
🔀 Lógica Condicional
Campos de tempo dinâmicos
Mostre ou oculte o campo de tempo com base em outros valores do formulário. Crie formulários inteligentes que se adaptam à entrada do usuário.
Regras de lógica avançada:
- Lógica AND – Todas as condições devem ser atendidas.
- Lógica OU – Qualquer condição pode desencadear a ação.
- 8 operadores – Igual a, Diferente de, Maior que, Menor que, Contém, Está vazio e mais
Casos de uso:
- Exibir o “Horário de chamada preferencial” somente quando a opção “Contatar por telefone” estiver selecionada.
- Exibir a “Hora de início do evento” quando o tipo de evento for igual a “Evento personalizado”.
- Ocultar o campo “Prazo de entrega” quando o método de entrega for “Entrega padrão”.
- Exibir o “Horário da reunião” quando o tipo de reunião for “Presencial”.
🎨 Experiência de usuário aprimorada
Ativação com um clique em qualquer lugar
Clique em qualquer lugar do campo para abrir o seletor de tempo nativo – área de seleção maior, melhor usabilidade.
Seletores de tempo nativos
Utiliza o seletor de hora integrado do navegador com interfaces familiares e otimizadas para cada plataforma (roda do iOS, relógio do Android, menu suspenso para desktop).
Otimizado para celular
Seleção de tempo intuitiva por toque, com teclados e seletores nativos para dispositivos móveis.
Características adicionais:
- Classes CSS personalizadas para estilização
- Modo de campo oculto para horários do sistema
- Suporte de acessibilidade (rótulos ARIA)
- Botão Limpar para facilitar a reinicialização
- Validação de campos obrigatórios
- Suporte para texto de espaço reservado
Configuração simples em 3 etapas
Prepare seu campo de tempo em minutos
Adicionar o campo de tempo
Arraste e solte o campo "Hora" da seção "Campos Básicos" no seu formulário.
Configurar formato e intervalos
Escolha o formato de 12 ou 24 horas, defina os intervalos de tempo (a cada 15 minutos, 30 minutos, etc.) e, opcionalmente, adicione restrições de tempo mínimo/máximo.
Definir hora padrão
Escolha se o campo começará em branco, com a hora atual ou com uma hora personalizada que você especificar. Habilite os segundos se precisar de uma cronometragem precisa.
🎉 Pronto! Seu campo de tempo está configurado com formatação e validação inteligentes.
Aplicações do mundo real
Serviço e Reservas
* Horários de manutenção dos veículos
* Agendamento de visitas ao imóvel
* Horários de reserva de passeios
* Vagas para reserva de instalações
Reserva de aulas e atividades
* Horários das aulas de ginástica
* Agendamento de sessões de treinamento
* Horários para atividades em grupo
* Preferências de horário de aula
Operações de negócio
* Horários de início e término do turno
* Submissão de cronogramas de trabalho
* Coordenação do horário da reunião
* Seleção de horário de disponibilidade
Marcação de consultas
* Agendamento de consultas médicas
* Reservas de salão de beleza e spa
* Seleção do horário da consulta
* Solicitações de agendamento de serviço
Registro de Eventos
* Horários de início e término do evento
* Preferências de horário da sessão
* Horários disponíveis para o workshop
* Seleção da programação da conferência
Entrega e retirada
* Janelas de tempo de entrega de comida
* Horários de retirada na loja
* Agendamento de retirada na calçada
* Preferências de horário de entrega
Preencha as opções de campo
Configuração básica
- Rótulo do campo – O título exibido acima do campo de tempo.
- Descrição/Texto de Ajuda – Orientações adicionais para usuários
- Campo obrigatório – Tornar a seleção de horário obrigatória
- Texto de exemplo – Texto de dica exibido antes que os usuários selecionem um horário.
Configurações de formato de hora
- Mostrar Formato
- Relógio de 24 horas (14:30)
- Relógio de 12 horas com AM/PM (2h30)
Precisão e intervalos
- Intervalos de tempo
- Todo minuto
- A cada minuto 5
- A cada minuto 10
- A cada 15 minutos (mais popular)
- A cada minuto 30
- Toda hora
Exibir segundos – Adicione um campo de segundos para exibir o horário exato (HH:MM:SS)
Restrições de tempo
- Horário mínimo permitido (minutos) – Os usuários não podem selecionar horários anteriores a este.
- Horário limite permitido (máximo) – Os usuários não podem selecionar horários posteriores a este.
Valores padrão
- Seleção do horário de início
- Nenhum horário pré-selecionado (em branco)
- Hora atual (dinâmica – carrega quando o formulário é aberto)
- Horário personalizado (horário específico que você define)
Horário de início personalizado – Selecione o horário específico a ser preenchido automaticamente (quando “Personalizado” estiver selecionado).
Lógica Condicional
- Ativar lógica condicional – Mostrar/ocultar com base em condições
- Tipo de lógica
- Todas as condições devem ser atendidas (E)
- Qualquer condição pode ser satisfeita (OU)
- Regras de Condição
- Mostrar/Ocultar – Ação a ser tomada
- Campo – Qual campo verificar
- Operador – Igual a, Diferente de, Contém, Maior que, Menor que, Vazio, Não vazio
- Valor – Valor de comparação
- Múltiplas Condições – Adicione regras ilimitadas
Opções avançadas
- Modo de campo oculto – Usar como campo oculto com valor predefinido
- Classes CSS personalizadas – Aplique estilos personalizados
- Atributos de acessibilidade – Rótulos e descrições ARIA
Por que escolher nosso campo de tempo?
✅ Intuitivo – Os seletores nativos do navegador proporcionam experiências familiares
✅ Flexível – Os formatos de 12 ou 24 horas atendem às preferências do usuário.
✅ Preciso – Intervalos personalizados de minuto a hora
✅ Inteligente – Restrições de tempo mínimo/máximo impedem seleções de tempo inválidas
✅ Dinâmico – A lógica condicional cria formulários adaptáveis
✅ Fácil de usar – Ativação com um clique em qualquer lugar para uma melhor experiência do usuário
✅ Otimizado para dispositivos móveis – Seletores de hora nativos e fáceis de usar com toque
✅ Totalmente integrado – Funciona perfeitamente com todos os recursos de formulário.
Perguntas frequentes
P: Qual a diferença entre o formato de 12 horas e o de 24 horas?
O formato de 12 horas exibe os horários com AM/PM, como 14h30. O formato de 24 horas usa horários como 2h30 e é comum internacionalmente.
P: Como funcionam os intervalos de tempo?
Os intervalos definem o nível de detalhamento das opções de tempo. Por exemplo, um intervalo de 15 minutos mostra 9:00, 9:15, 9:30 e assim por diante.
P: Posso restringir o horário apenas ao horário comercial?
Sim. Defina os horários de início e término, como das 9h às 17h, e os usuários poderão escolher apenas dentro desse intervalo.
P: O que significa a opção “Hora Atual” por padrão?
Quando ativado, o campo é preenchido automaticamente com a hora atual do usuário assim que o formulário é carregado.
P: Preciso do campo de segundos?
Geralmente não. Habilite apenas quando precisar de horários precisos, como entradas HH:MM:SS para eventos ou dados técnicos.
P: Como funciona o seletor de horário no celular?
Cada dispositivo usa sua interface de usuário nativa. O iOS geralmente usa um seletor em forma de roda, enquanto o Android usa um seletor em formato de relógio.
P: Posso usar lógica condicional com campos de tempo?
Sim. Você pode mostrar ou ocultar campos com base em horários selecionados, usando condições como "Igual a", "Maior que" ou "Menor que".
P: O que acontece se os usuários tentarem selecionar horários inválidos?
Horários fora do intervalo permitido são bloqueados pela validação do navegador e não podem ser selecionados.
P: Posso preencher previamente um horário específico?
Sim. Escolha “Personalizado” para o horário padrão e selecione qualquer valor que desejar pré-carregar.
P: O campo de hora funciona em todos os navegadores?
Todos os navegadores modernos suportam campos de entrada de tempo HTML5 com seletores integrados. Navegadores mais antigos utilizam entrada de texto com validação.
P: Posso formatar o campo de tempo para que combine com o meu site?
Sim. O seletor usa a interface nativa do usuário, mas o campo de entrada pode ser estilizado com classes CSS.
P: Qual o formato utilizado para o envio do horário?
Os valores de tempo são sempre enviados no formato de 24 horas, garantindo dados consistentes para processamento.
