# Zkrášlujte formulářové prvky, snadno pomocí setOption

Mám rád, když zjistím něco nového. Ten pocit dočasného prozření, že jsem něco nědělal úplně správně.

Objevil jsem Ameriku v podobě "setOption()". Snažím se s pomocí JavaScriptu sem tam zlepšit ovládání nějakých klasických prvků. Tak si vemte třeba klasický input type password. Standardně velmi "nudný" formulářový prvek. Co ho tak okořenit o možnost vygenerovat náhodné heslo, zobrazit sílu zadaného hesla, nebo si místo hvězdiček nechat zobrazit heslo v čitelné podobě.

Do včerejška jsem tyto "zlepšováky" řešil pomocí css tříd nebo data atributů. Dnes je vše jinak. Již po několikáté jsem se spálil s používáním Nette Html Elementu. Nevím proč, asi to je tím, že tuto třídu zas tak aktivně nepoužívám a žiju si ve světe, kde druhý řádek *vrátí* hodnotu. Ale tak to není <https://api.nette.org/2.4/Nette.Utils.Html.html#_data>, asi zlozvyk z jQuery světa <https://api.jquery.com/data/>.

```
$htmlElement->data('generator', TRUE);
$htmlElement->data('generator'); // vrací Html Element, nikoliv hodnotu data-generator
```

Dalším bodem úrazu je pro mě pravidelně zaměnění getControl <https://api.nette.org/2.4/Nette.Forms.Controls.BaseControl.html#_getControl> vs getControlPrototype... <https://api.nette.org/2.4/Nette.Forms.Controls.BaseControl.html#_getControlPrototype>

```
$input = $form->addPassword('password', "Password:")->getControlPrototype();
$input->data('generator', 'init');
$input->data('strength', 'init');
$input->data('switcher', 'init');
```

No když se na to kouknete tak je to takové ... makové ;-) No a teď se podíváme na "ameriku" `setOption()`

```
$form->addTextarea('content', "Content:")
    ->setOption('generator', TRUE)
    ->setOption('strength', TRUE)
    ->setOption('switcher', TRUE);
```

Prostě lahoda pro oči ;-)

V šabloně se kód také píše lépe. Z původního:

```
{if isset($input->control->attrs['data-generator'])}...{/if}
```

a nová verze

```
{if $input->getOption('generator')}...{/if}
```

K čemu to třeba používám? Tak třeba náhled obrázku u input file, nebo pro nápovědu, co by prvek měl obsahovat. Fantazii se meze nekladou.

No a jako další krok vidím směr vlastních formulářových prvků. Tak se pak rád podělím o zkušenosti.

PS: takhle pak může vypadat šablona

```
<div class="form-field">
    {label $input class=>"label--main"}

    {input $input}

    {if $input->getOption('generator')}
        <a class="generator" href="#">generate</a>
    {/if}
    {if $input->getOption('strength')}
        <div class="strength">strength: <span class="indicator">...</span></div>
    {/if}
    {if $input->getOption('forgot')}
        {if $input->getOption('loginCounter') > 2}
            <a n:href="Recovery:" class=”huge”>Forgot password?</a>
        {else}
            <a n:href="Recovery:" class=”small”>Forgot password?</a>
        {/if}
    {/if}
</div>
```

Ukázka v gifu: \[ <https://cldup.com/qTMvqIHaCw.gif> ]


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://book.honzacerny.com/nette-framework/zkraslujte-formularove-prvky-snadno-pomoci-setoption.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.