From 756d1df9a06bd3d49d04ba7928505601d60198e0 Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Tue, 13 May 2025 15:36:53 +0200 Subject: [PATCH] docs(html): add detailed documentation for HTML forms --- app/libs/navigation.ts | 4 - app/pages/docs/html/formulaires/+Page.mdx | 97 ++++++++++++++++ app/pages/docs/html/formulaires/tabs.tsx | 135 ++++++++++++++++++++++ 3 files changed, 232 insertions(+), 4 deletions(-) create mode 100644 app/pages/docs/html/formulaires/tabs.tsx diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts index 295e54c..8e160de 100644 --- a/app/libs/navigation.ts +++ b/app/libs/navigation.ts @@ -117,10 +117,6 @@ export const navigation: NavigationSection[] = [ { title: "Balise ", href: "/docs/html/balise-head" }, { title: "Balises de base", href: "/docs/html/balises-de-base" }, { title: "Attributs", href: "/docs/html/attributs" }, - { - title: "Intégrations et médias", - href: "/docs/html/integrations-medias", - }, { title: "Formulaires", href: "/docs/html/formulaires" }, ], }, diff --git a/app/pages/docs/html/formulaires/+Page.mdx b/app/pages/docs/html/formulaires/+Page.mdx index f9ec930..5803e7f 100644 --- a/app/pages/docs/html/formulaires/+Page.mdx +++ b/app/pages/docs/html/formulaires/+Page.mdx @@ -5,4 +5,101 @@ tags: [] --- import Callout from "@/components/Callout"; +import tabs from "./tabs"; +Les formulaires sont une partie essentielle du développement web, permettant aux utilisateurs d'interagir avec les pages en soumettant des données. + +Dans cet article, nous allons explorer comment créer des formulaires interactifs à l'aide de HTML et aborder les éléments clés, les types d'entrées et la validation des données. + +## 📝 Introduction aux formulaires HTML + +La balise `
` en HTML est utilisée pour regrouper un ou plusieurs éléments de formulaire. +Ces éléments peuvent inclure des champs de texte, des cases à cocher et bien plus encore. + +Pour créer un formulaire simple en HTML, il suffit d'ajouter la balise `` autour des éléments du formulaire. + + + +## 🖱️ Éléments de formulaire HTML + +Il existe plusieurs éléments clés qui facilitent la création de formulaires interactifs en HTML. +Voici quelques-uns des éléments les plus courants : + +### Champs de texte + +Les champs de texte permettent aux utilisateurs d'entrer du texte dans un formulaire. La longueur et le format du texte peuvent être précisés à l'aide des attributs HTML tels que `maxlength` et `pattern`. + + + +### Boutons radio + +Les boutons radio permettent aux utilisateurs de sélectionner une seule option parmi un gropue d'options. +Chaque bouton radio doit avoir le même attribut `name` pour qu'ils soient regroupés et que l'utilisateur ne puisse en sélectionne qu'un seul parmi eux. + + + +### Cases à cocher + +Les cases à cocher reprennent le même principe que les boutons radio, mais elles permettent aux utilisateurs de sélectionner plusieurs options. +Chaque case à cocher doit avoir un attribut `name` unique pour identifier la sélection de l'utilisateur. + + + +### Menu déroulant + +Les menus déroulants permettent aux utilisateurs de choisir une ou plusieurs options parmi une liste de valeurs prédéfinies. +Chaque option est spécifiée à l'aide d'une balise `