Campo temporale
Raccogli il tempo con precisione e semplicità. Dalla pianificazione degli appuntamenti alla selezione dei turni con eleganti selettori di orario nativi, intervalli intelligenti e formattazione flessibile, il campo Ora offre convalida, personalizzazione e un'esperienza utente fluida.
Raccolta intelligente del tempo con convalida integrata
Perfetto per:
Funzionalità potenti per ogni caso d'uso
🕐 Formati di orario flessibili
Display da 24 o 12 ore
Scegli il formato più adatto al tuo pubblico. Utilizza il formato militare a 24 ore (14:30) per gli utenti internazionali o il formato a 12 ore con AM/PM (2:30) per una maggiore familiarità.
Conversione automatica del formato
Il campo gestisce automaticamente la conversione del formato: gli utenti visualizzano il loro formato preferito mentre il sistema riceve dati coerenti.
Esempi:
- Ore di lavoro: 9:00 – 5:00 (12 ore)
- Programmazione internazionale: 09:00 – 17:00 (24 ore)
- Appuntamenti medici: 14:30 (precisione 24 ore)
⏰ Intervalli di tempo intelligenti
Precisione di selezione del controllo
Imposta il livello di granularità della selezione oraria. Scegli tra intervalli di minuti o orari, in base alle tue esigenze.
Intervalli disponibili:
- Ogni minuto (12:00, 12:01, 12:02…) – Massima precisione
- Ogni 5 minuti (12:00, 12:05, 12:10…) – Appuntamenti standard
- Ogni 10 minuti (12:00, 12:10, 12:20…) – Prenotazioni rapide
- Ogni 15 minuti (12:00, 12:15, 12:30…) – Più comune
- Ogni 30 minuti (12:00, 12:30, 1:00…) – Fasce orarie di mezz’ora
- Ogni ora (12:00, 1:00, 2:00…) – Selezione semplice
Perché è importante:
Meno opzioni = selezione più rapida. Adatta gli intervalli alle tue esigenze di pianificazione per una migliore esperienza utente.
🎯 Restrizioni di intervallo di tempo
Imposta l'orario più vicino e più lontano
Limita gli orari disponibili in base all'orario di lavoro, al programma degli eventi o alle finestre operative. Gli utenti non possono selezionare orari al di fuori dell'intervallo definito.
Validazione intelligente
La convalida a livello di browser impedisce invii non validi prima che gli utenti facciano clic su Invia.
Casi d'uso:
- Orari di apertura: solo dalle 9:00 alle 6:00
- Eventi serali: solo dopo le 5:00
- Fasce orarie mattutine: solo prima delle 12:00
- Turno di notte: dalle 10:00 alle 6:00
Esempi:
- Prenotazioni al ristorante: min 11:00, max 10:00
- Corsi di ginnastica: min 6:00 AM, max 9:00 PM
- Orari di supporto: min 8:00, max 5:00
🔧 Opzioni di tempo predefinite
Tre valori di partenza intelligenti:
1. Vuoto (nessun valore predefinito)
Gli utenti iniziano con un campo vuoto: è preferibile quando l'ora è sempre univoca.
2. Ora attuale
Si compila automaticamente con l'ora corrente al caricamento del modulo: perfetto per i campi "ora dell'incidente" o timestamp.
3. Ora personalizzata
Preseleziona un orario specifico, ad esempio "9:00", per gli orari degli appuntamenti suggeriti o per le selezioni più comuni.
Quando utilizzare ciascuno:
- Vuoto – Orari di inizio dell'evento, programmi personali
- Corrente – Segnala timestamp, orari di check-in
- Personalizzato: orari di riunione suggeriti, orari predefiniti
⚡ Precisione in secondi (facoltativo)
Aggiungi secondi quando necessario
Abilita il campo dei secondi (HH:MM:SS) per un monitoraggio preciso del tempo. Perfetto per prove a tempo, cronometri e timestamp esatti.
Esempi di formato:
- Senza secondi: 14:30 o 2:30
- Con secondi: 14:30:45 o 2:30:45
Ideale per:
- Cronometraggio sportivo e risultati di gara
- Esperimenti scientifici
- Sistemi di registrazione precisi
- Invii per prove a cronometro
🔀 Logica condizionale
Campi temporali dinamici
Mostra o nascondi il campo orario in base ad altri valori del modulo. Crea moduli intelligenti che si adattano all'input dell'utente.
Regole logiche avanzate:
- Logica AND: tutte le condizioni devono essere soddisfatte
- Logica OR: qualsiasi condizione può attivare l'azione
- 8 operatori: uguale, diverso, maggiore, minore, contiene, è vuoto e altro ancora
Casi d'uso:
- Mostra "Orario di chiamata preferito" solo quando è selezionato "Contatta telefonicamente"
- Visualizza "Ora di inizio evento" quando il tipo di evento è uguale a "Evento personalizzato"
- Nascondi "Tempi di consegna" quando il metodo di consegna è "Spedizione standard"
- Mostra "Ora della riunione" quando il tipo di riunione è "Di persona"
🎨 Esperienza utente migliorata
Attivazione Click-Anywhere
Fare clic in un punto qualsiasi del campo per aprire il selettore di tempo nativo: area di destinazione più ampia, migliore usabilità.
Selettori di orario nativi
Utilizza il selettore orario integrato nel browser con interfacce familiari e ottimizzate per la piattaforma (rotellina iOS, orologio Android, menu a discesa sul desktop).
Mobile ottimizzato
Selezione dell'ora tramite touch screen con tastiere e selettori mobili nativi.
Caratteristiche aggiuntive:
- Classi CSS personalizzate per lo stile
- Modalità campo nascosto per i tempi di sistema
- Supporto per l'accessibilità (etichette ARIA)
- Pulsante Clear per un facile ripristino
- Validazione del campo obbligatorio
- Supporto per testo segnaposto
Configurazione semplice in 3 passaggi
Prepara il tuo Time Field in pochi minuti
Aggiungi il campo Ora
Trascina e rilascia il campo Ora dalla sezione Campi di base nel tuo modulo.
Configura formato e intervalli
Scegli il formato 12 ore o 24 ore, imposta gli intervalli di tempo (ogni 15 minuti, 30 minuti, ecc.) e, facoltativamente, aggiungi restrizioni di tempo minimo/massimo.
Imposta ora predefinita
Scegli se il campo deve iniziare vuoto, con l'ora corrente o con un orario personalizzato specificato. Abilita i secondi se hai bisogno di un tempo preciso.
."🎉 Ecco fatto! Il tuo campo orario è pronto con formattazione e convalida intelligenti.
Applicazioni del mondo reale
Servizi e prenotazioni
* Orari di manutenzione del veicolo
* Programmi di visione delle proprietà
* Orari di prenotazione del tour
* Slot di prenotazione della struttura
Prenotazione di lezioni e attività
* Orari delle lezioni di fitness
* Pianificazione delle sessioni di allenamento
* Fasce orarie per le attività di gruppo
* Preferenze di orario delle lezioni
Operazioni affaristiche
* Orari di inizio/fine turno
* Invio del programma di lavoro
* Coordinamento degli orari delle riunioni
* Selezione del tempo di disponibilità
Prenotazione appuntamenti
* Pianificazione degli appuntamenti medici
* Prenotazioni per saloni e spa
* Selezione dell'orario di consultazione
* Richieste di appuntamento per il servizio
Evento di registrazione
* Orari di inizio/fine dell'evento
* Preferenze di tempo della sessione
* Fasce orarie del workshop
* Selezione del programma della conferenza
Consegna e ritiro
* Fasce orarie di consegna del cibo
* Orari di ritiro in negozio
* Pianificazione del ritiro sul marciapiede
* Preferenze per la fascia oraria di consegna
Completa le opzioni del campo
Configurazione di base
- Etichetta del campo: il titolo mostrato sopra il campo dell'ora
- Descrizione/Testo di aiuto – Ulteriori indicazioni per gli utenti
- Campo obbligatorio: rendere obbligatoria la selezione dell'ora
- Testo segnaposto: testo di suggerimento prima che gli utenti selezionino un orario
Impostazioni del formato dell'ora
- Formato di visualizzazione
- Orologio di 24 ore (14:30)
- Orologio da 12 ore con AM/PM (2:30)
Precisione e intervalli
- Intervalli di tempo
- Ogni minuto
- Ogni minuto 5
- Ogni minuto 10
- Ogni 15 minuti (il più popolare)
- Ogni minuto 30
- Ogni ora
Mostra secondi: aggiungi il campo secondi per l'ora precisa (HH:MM:SS)
Restrizioni temporali
- Orario più vicino consentito (minuti) – Gli utenti non possono selezionare orari precedenti a questo
- Ultimo orario consentito (max) – Gli utenti non possono selezionare orari successivi a questo
Valori standard
- Selezione dell'ora di inizio
- Nessun orario preselezionato (vuoto)
- Ora corrente (dinamica – caricata all'apertura del modulo)
- Ora personalizzata (ora specifica impostata da te)
Ora di inizio personalizzata: seleziona l'ora specifica da precompilare (quando è selezionato "Personalizzato")
Logica condizionale
- Abilita logica condizionale: mostra/nascondi in base alle condizioni
- Tipo logico
- Tutte le condizioni devono essere soddisfatte (E)
- Qualsiasi condizione può essere soddisfatta (OR)
- Regole di condizione
- Mostra/Nascondi – Azione da intraprendere
- Campo – Quale campo controllare
- Operatore – Uguale, Non uguale, Contiene, Maggiore di, Minore di, È vuoto, Non è vuoto
- Valore – Valore di confronto
- Condizioni multiple: aggiungi regole illimitate
Opzioni avanzate
- Modalità campo nascosto: utilizzare come campo nascosto con valore preimpostato
- Classi CSS personalizzate: applica stili personalizzati
- Attributi di accessibilità: etichette e descrizioni ARIA
Perché scegliere il nostro campo temporale?
✅ Intuitivo: i selettori nativi del browser offrono esperienze familiari
✅ Flessibile: i formati da 12 o 24 ore si adattano alle preferenze dell'utente
✅ Preciso: intervalli personalizzati da ogni minuto a ogni ora
✅ Intelligente: le restrizioni Min/Max impediscono selezioni di tempo non valide
✅ Dinamico: la logica condizionale crea forme adattive
✅ Facile da usare: attivazione con un clic ovunque per una migliore esperienza utente
✅ Ottimizzato per dispositivi mobili: selettori di orario nativi touch-friendly
✅ Completamente integrato: funziona perfettamente con tutte le funzionalità del modulo
Domande frequenti
D: Qual è la differenza tra il formato a 12 ore e quello a 24 ore?
Il formato a 12 ore mostra gli orari con la dicitura AM/PM, ad esempio 14:30. Il formato a 24 ore usa orari come 2:30 ed è comune a livello internazionale.
D: Come funzionano gli intervalli di tempo?
Gli intervalli definiscono il livello di dettaglio delle scelte temporali. Ad esempio, un intervallo di 15 minuti mostra le 9:00, le 9:15, le 9:30 e così via.
D: Posso limitare gli orari solo all'orario lavorativo?
Sì. Imposta l'orario minimo e massimo, ad esempio dalle 9:00 alle 5:00, e gli utenti potranno scegliere solo all'interno di tale intervallo.
D: Cosa significa l'impostazione predefinita "Ora corrente"?
Se abilitato, il campo si compila automaticamente con l'ora corrente dell'utente quando il modulo viene caricato.
D: Ho bisogno del campo dei secondi?
Di solito no. Abilitalo solo quando hai bisogno di tempi precisi, ad esempio voci HH:MM:SS per eventi o dati tecnici.
D: Come funziona il selettore di orario sui dispositivi mobili?
Ogni dispositivo utilizza la propria interfaccia utente nativa. iOS in genere utilizza un selettore a rotella, mentre Android utilizza un selettore a forma di orologio.
D: Posso usare la logica condizionale con i campi temporali?
Sì. È possibile mostrare o nascondere i campi in base agli orari selezionati utilizzando condizioni quali "Uguale a", "Maggiore di" o "Minore di".
D: Cosa succede se gli utenti provano a selezionare orari non validi?
Gli orari al di fuori dell'intervallo consentito vengono bloccati dalla convalida del browser e non possono essere selezionati.
D: Posso precompilare con un orario specifico?
Sì. Scegli "Personalizzato" come orario predefinito e seleziona il valore che desideri precaricare.
D: Il campo ora funziona in tutti i browser?
Tutti i browser moderni supportano l'inserimento dell'orario in HTML5 con selettori integrati. I browser più vecchi utilizzano invece l'inserimento di testo con convalida.
D: Posso personalizzare lo stile del campo orario in modo che corrisponda a quello del mio sito?
Sì. Il selettore utilizza l'interfaccia utente nativa, ma il campo di input può essere formattato con classi CSS.
D: Quale formato viene utilizzato per l'orario inviato?
I valori temporali vengono sempre inviati nel formato 24 ore, garantendo dati coerenti per l'elaborazione.
