Prompt utilisé pour régénérer cette page :
Page "Forms" du theme-debugger de web-cylian-laboratory.
Catégorie : Theme Debugger — catalogue exhaustif de tous les éléments de formulaire HTML.
=== FRONT MATTER (index.md) ===
title: "Forms"
description: "Test des éléments de formulaire"
icon: "form-textbox"
tags: ["design", "css", "form"]
Pas de js ni scss — page purement statique HTML.
=== FRAGMENT LEFT (_fragment.left.md) ===
Navigation partagée du theme-debugger (identique sur toutes les pages).
Front matter : title "Navigation", weight 100, _build render/list: never.
Contenu : h5 "Theme Components" + liste de 9 liens vers les sous-pages
(Buttons, Container, Forms, Headers, Panic, Tables, Tags, Typography, Variables).
=== CONTENU HTML (index.md) — 12 sections ===
Chaque section est un <section class="section full visual">.
1. "Text Inputs" (h3) — <form> avec 7 <label> contenant chacun un input :
- text (placeholder "Placeholder text")
- email (placeholder "email@example.com")
- password (placeholder "Password")
- number (placeholder "42")
- search (placeholder "Search...")
- url (placeholder "https://example.com")
- tel (placeholder "+33 1 23 45 67 89")
2. "Date & Time Inputs" (h3) — <form> avec 5 inputs :
- date, time, datetime-local, month, week (sans placeholder)
3. "Textarea" (h3) — <form> avec un <label> contenant
<textarea placeholder="Enter your message here...">
4. "Select" (h3) — <form> avec 2 selects :
- Simple : option vide "Choose an option..." + options 1/2/3
- Multiple (attribut multiple) : options 1/2/3/4
5. "Checkbox & Radio" (h3) — <form> avec 2 <fieldset> :
- "Checkboxes" (legend) : 3 labels — normal, checked, disabled
- "Radio buttons" (legend) : 3 labels avec name="radio-group" —
normal (value="1"), checked (value="2"), disabled (value="3")
6. "Special Inputs" (h3) — <form> avec 4 inputs :
- range (min 0, max 100, value 50)
- color (value "#5eaadd")
- file (simple)
- file (multiple)
7. "Input States" (h3) — <form> avec 5 inputs :
- Normal (text, placeholder "Normal input")
- Disabled (text, placeholder "Disabled input", attribut disabled)
- Read-only (text, value "Read-only value", attribut readonly)
- Required valid (text, value "Valid value", required) + <small> helper
- Required invalid (email, value "invalid-email", required) + <small> helper
8. "Helper Text" (h3) — <form> avec un input text
placeholder "Enter username" + <small> "Your username must be 3-20 characters long"
9. "Input Group (role="group")" (h3) — <form> avec 2 <div role="group"> :
- Input search + <button type="button" class="button color-blue">Search</button>
- 2 inputs text (placeholder "First name" et "Last name")
10. "Grid Layout (form.grid)" (h3) — <form class="grid"> avec :
- Label "First name" (input text placeholder "John")
- Label "Last name" (input text placeholder "Doe")
- Label "Email" class="full-width" (input email placeholder)
- Label "Message" class="full-width" (textarea placeholder)
11. "Submit Buttons" (h3) — <form> avec 2 <div role="group"> :
- submit ("Submit"), reset ("Reset"), button ("Button")
- submit disabled ("Disabled")
12. "Complete Form Example" (h3) — <form> complet avec :
- <fieldset> "Personal Information" : nom (text, required) + email (required) avec <small>
- <fieldset> "Preferences" : select pays (France/Germany/UK) + checkbox newsletter
- <div role="group"> : submit + reset
=== OBJECTIF ===
Page de référence pour tester le rendu CSS de tous les types d'éléments
de formulaire HTML. Utilise le HTML sémantique (label wrapping input,
fieldset/legend). Aucun JavaScript, aucun style custom — s'appuie
entièrement sur les styles par défaut du thème Cylian.
Classes CSS utilisées : .section.full.visual, .button.color-blue,
.full-width (pour grid), form.grid, div[role="group"].
Page entièrement générée et maintenue par IA, sans intervention humaine.