# Űrlapbővítmény

A `@tailwindcss/forms` az eredeti űrlapbővítmény 1:1 arányú PHP átvétele. Véleményalapú alapstílusokat biztosít az űrlapvezérlőkhöz — szövegmezőkhöz, szövegterületekhez, legördülő listákhoz, jelölőnégyzetekhez és választógombokhoz —, egységes alapállapotot teremtve (megjelenés alaphelyzetbe állítása, szegély, belső térköz, fókuszgyűrű, egyéni legördülő nyíl, valamint jelölőnégyzet- és választógombikonok), amelyet ezután segédosztályokkal felülírhat.

## Használat

Töltse be a bővítményt a `@plugin` használatával, és importálja a segédosztályok rétegét:

```php
use TailwindPHP\tw;

$css = tw::generate(
    '<input class="form-input"><select class="form-select"></select>',
    '@plugin "@tailwindcss/forms"; @import "tailwindcss/utilities.css";'
);
```

## Stratégiák

A `strategy` beállítás szabályozza a stílusok alkalmazásának módját:

| Stratégia | Működés |
|----------|----------|
| `base` | Globálisan formázza a natív űrlapelemeket, például a `[type='text']`, `textarea` és `select` szelektorokkal. |
| `class` | Csak a kifejezetten megadott `form-*` osztályokat formázza, az osztály nélküli elemeket érintetlenül hagyva. |

Ha a `strategy` nincs megadva, **mindkét** stratégia érvényesül: a natív elemek megkapják az alapstílusokat, és a `form-*` osztályok is használhatók. Egyetlen stratégia beállításával kikapcsolhatja a másikat:

```css
@plugin "@tailwindcss/forms" {
    strategy: "class";
}
```

## Osztálystratégia

A `class` stratégia vagy az alapértelmezett beállítás esetén kifejezetten alkalmazza ezeket az osztályokat a formázni kívánt elemekre:

| Osztály | Elem |
|-------|---------|
| `form-input` | Szövegszerű beviteli mezők |
| `form-textarea` | `<textarea>` |
| `form-select` | `<select>` |
| `form-multiselect` | `<select multiple>` |
| `form-checkbox` | `<input type="checkbox">` |
| `form-radio` | `<input type="radio">` |

```php
$css = tw::generate(
    '
        <input class="form-input">
        <textarea class="form-textarea"></textarea>
        <select class="form-select"></select>
        <select class="form-multiselect" multiple></select>
        <input type="checkbox" class="form-checkbox">
        <input type="radio" class="form-radio">
    ',
    '
        @plugin "@tailwindcss/forms" {
            strategy: "class";
        }
        @import "tailwindcss/utilities.css";
    '
);
```

Minden osztály alaphelyzetbe állítja a vezérlő megjelenését, beállítja a szegélyt, a belső térközt és a fókuszgyűrűt; a `form-select` nyilat ábrázoló háttérképet ad hozzá, a `form-checkbox`/`form-radio` pedig a bejelölt állapot ikonjait adja hozzá. Ezeket bármelyik szokásos segédosztállyal felülírhatja (például: `class="form-input rounded-lg border-gray-300"`).

Az `@plugin` direktíváról és a betöltés részleteiről lásd a [Bővítmények](https://tailwindphp.inline0.dev/hu/docs/plugins) oldalt.