osdemo

Widgets de formulaire

Cette page présente les widgets de formulaire du module Ot_form. La première section montre un formulaire standard (non réactif). Les sections suivantes montrent les widgets réactifs.

Formulaire standard

Un formulaire standard présentant tous les types d'entrées HTML. Les valeurs sont lues à la soumission.

Résultat:

reactive_input

Un champ texte réactif. La valeur est affichée en dessous en temps réel.

Valeur: hello

reactive_textarea

Une zone de texte avec redimensionnement automatique. Essayez de taper plusieurs lignes.

Valeur:

debounced_input

Le signal brut se met à jour à chaque frappe. Le signal debounced se met à jour après 0.5s d'inactivité. Utilisez ça par exemple pour des champs de recherche.

Brut:

Différé:

password_input

Un champ mot de passe avec un bouton pour afficher/masquer.

Visible: faux

reactive_select

Un élément select avec suivi réactif.

Sélectionné: fr

reactive_toggle_button

Un bouton qui alterne entre les états on/off.

État: OFF

checkbox

Cases à cocher avec différents styles.

reactive_checkbox

Une case à cocher réactive. L'état est suivi via un signal.

Coché: faux

Changé manuellement: faux

radio_buttons

Un groupe de boutons radio avec sélection réactive.

Sélection: 0

int_input / optional_int_input

Champs entiers avec boutons +/-.

int_input:

Valeur: 42

optional_int_input:

Valeur: 10

reactive_date_input

Un champ date HTML5 avec signal réactif.

Date: 2025-06-15

reactive_time_input

Un champ heure HTML5 avec signal réactif.

Heure: 14:30

disableable_button

Un bouton qui peut être désactivé réactivement. Utilisez le toggle ci-dessus pour le contrôler.

prevent_double_submit

Ce bouton se désactive pendant l'exécution de l'action (2 secondes). Essayez de cliquer rapidement.

input_validation_tools

Tapez un nombre. Erreur de validation (affichée après perte du focus) si non pair.

Résultat: Ok :

reactive_fieldset

Un fieldset qui peut être désactivé réactivement. Tous les éléments à l'intérieur sont désactivés.

Contenu du fieldset :

lwt_bound_input_enter

Appuyez sur Entrée pour déclencher l'action. La valeur soumise est affichée en dessous.

Soumis: