Form dans SwiftUI : qu'est-ce que c'est, création et configuration de formulaires

Qu'est-ce que Form dans SwiftUI ?

Form est un conteneur spécialisé de SwiftUI conçu pour créer des formulaires de saisie et des écrans de paramètres. Il hérite du comportement de List mais ajoute des styles spécifiques à la plateforme : sur iOS, Form s'affiche comme un tableau groupé avec des coins arrondis pour les sections ; sur macOS, il apparaît comme une liste système standard avec des cases à cocher et des contrôles.

Contrairement à la disposition manuelle avec VStack et HStack, Form organise automatiquement l'espacement entre les éléments, ajoute des séparateurs et adapte son apparence au thème du système — clair ou sombre. Le développeur décrit uniquement la structure logique : Section pour le regroupement et les contrôles à l'intérieur. Le formulaire lui-même décide comment disposer visuellement Picker, Toggle ou Stepper sur une plateforme spécifique.

Form prend en charge tous les éléments de saisie standard de SwiftUI : TextField pour le texte, SecureField pour les mots de passe, Picker pour la sélection dans une liste, Toggle pour activer/désactiver, Slider pour les plages, Stepper pour les valeurs incrémentielles et DatePicker pour les dates. Chaque élément obtient automatiquement un style conforme aux HIG (Human Interface Guidelines) d'Apple sur la plateforme cible.

Form vs List : comparaison des conteneurs

Malgré leur similarité visuelle, Form et List résolvent des tâches différentes. List est un conteneur universel pour afficher des listes de données défilables avec des actions de balayage et l'édition de lignes. Form est un conteneur spécialisé pour la saisie de données et les paramètres, optimisé pour les styles de contrôles système.

List est adapté à l'affichage de données dynamiques : fils d'actualités, chats, catalogues de produits. Form est pour les écrans statiques avec un ensemble prévisible de champs : profil utilisateur, paramètres de l'application, formulaire d'inscription. La différence clé : les éléments de Form peuvent être des contrôles interactifs, alors que les lignes de List affichent généralement des données et répondent au toucher par une navigation ou une action.

Selon les Apple Human Interface Guidelines (2025), Form doit être utilisé pour les écrans de paramètres et de saisie où il y a de 3 à 20 contrôles sur un écran et les diviser en sections améliore l'utilisabilité.

Sections Section dans Form

Section est le bloc de construction principal de Form, permettant de regrouper des éléments logiquement liés. Chaque Section peut avoir un en-tête, un pied de page et un nombre quelconque de contrôles à l'intérieur. Le système ajoute automatiquement de l'espacement entre les sections et enveloppe chacune dans un bloc visuel avec des coins arrondis.

Utiliser Section est crucial pour la lisibilité du formulaire : les éléments groupés par sens sont plus faciles à traiter pour l'utilisateur. Par exemple, sur un écran de paramètres de profil, on peut séparer « Données personnelles », « Notifications » et « Sécurité » dans des sections individuelles. Chaque section peut contenir un pied de page avec un texte explicatif que le système affiche dans une police plus petite en dessous du groupe d'éléments.

Form {
    Section(header: Text("Profil")) {
        TextField("Nom", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("Notifications"),
            footer: Text("Désactiver pendant les réunions")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

Dans l'exemple, la première section « Profile » contient deux champs de texte sans pied de page, la deuxième section « Notifications » contient deux interrupteurs avec une explication sous le groupe. Le pied de page ajoute automatiquement un espacement et utilise le style de police caption. Une Section peut avoir un pied de page sans en-tête ou un en-tête sans pied de page.

Contrôles dans Form

Form prend en charge tous les éléments de saisie standard de SwiftUI. Picker dans Form s'affiche automatiquement comme une ligne de navigation avec transition vers un écran de sélection séparé sur iOS. Toggle apparaît comme une ligne avec un interrupteur aligné à droite. TextField obtient le style de saisie système avec un espace réservé.

Pour les valeurs numériques, on utilise Stepper (changement incrémentiel) et Slider (changement progressif dans une plage). DatePicker prend en charge plusieurs modes : date, time, dateAndTime. ColorPicker est disponible pour la sélection de couleurs. Chaque élément s'adapte à la plateforme sans code supplémentaire — sur iOS, les contrôles utilisent les styles natifs UIKit ; sur macOS, AppKit.

Pour les contrôles personnalisés dans Form, n'importe quelle SwiftUI View peut être utilisée — elles héritent du comportement standard de la section. Cependant, il est recommandé de s'en tenir aux éléments système, car ils garantissent la conformité aux HIG et prennent en charge l'accessibilité (VoiceOver, Dynamic Type) sans configuration supplémentaire.

Exemples de code Form

Créons un écran d'inscription avec Form. Le formulaire contient quatre sections : données personnelles, sélection du rôle, paramètres d'abonnement et un bouton d'envoi. On utilise Section pour le regroupement et les contrôles standard de SwiftUI.

struct RegistrationForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var role = "Developer"
    @State private var agreedToTerms = false

    let roles = ["Developer", "Designer", "Manager"]

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Informations personnelles")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

                Section(header: Text("Rôle")) {
                    Picker("Select role", selection: $role) {
                        ForEach(roles, id: \.self) { role in
                            Text(role).tag(role)
                        }
                    }
                }

                Section {
                    Toggle("Agree to terms", isOn: $agreedToTerms)
                }

                Section {
                    Button("S'inscrire") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

Le formulaire est divisé en quatre Section : données personnelles avec deux champs de texte, sélection du rôle via Picker, acceptation des conditions via Toggle et un bouton d'inscription. Le bouton est désactivé jusqu'à ce que l'utilisateur accepte les conditions — c'est un exemple de validation dans Form. NavigationStack ajoute un titre et permet à Picker d'ouvrir un écran de sélection séparé sur iOS.

Formulaire de paramètres avec sous-sections

struct SettingsForm: View {
    @State private var volume: Double = 0.5
    @State private var isDarkMode = false
    @State private var reminderDate = Date()

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Apparence")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("Volume")
                    }
                }

                Section(header: Text("Rappels"),
                        footer: Text("Vous recevrez une notification à l'heure sélectionnée")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

                Section {
                    NavigationLink("Advanced Settings",
                        destination: AdvancedSettingsView())
                }
            }
            .navigationTitle("Settings")
        }
    }
}

Cet exemple démontre une combinaison de Slider, DatePicker et NavigationLink dans Form. DatePicker utilise le mode hourAndMinute pour afficher uniquement l'heure. NavigationLink dans la dernière section crée une transition vers un écran de paramètres avancés — un motif courant pour les interfaces de type Settings. Les en-têtes et pieds de page des sections rendent le formulaire auto-documenté : l'utilisateur comprend immédiatement à quel groupe appartient chaque contrôle.