Posted in: Tvorba webových stránek, Web design & Web development, Webová grafika

UI elementy – formulářové prvky HTML 5

Written by admin

Vybrané UI prvky, tvořené značkami HTML pro FORM (formulář).

Kompletní seznam najdete například zde: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

Vzhled UI elementů je ovlivněn zde přítomným wordpressovým tématem.
Testovat základní vzhled v různých prohlížečích a experimentovat s vlastními styly můžete zde : https://codepen.io/vacpav/pen/jOeqYOo.

Select / Option

Tad dodělat nějaký popis ……

<select>
  <option>První</option>
  <option>Druhá</option>
  <option>Třetí</option>
</select>

Text

input type=“text“
Textové pole, do kterého může uživatel zadávat textový vstup, například jméno nebo e-mailovou adresu.

<label for="name">Jméno (4 až 8 znaků):</label>

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

Checkbox

input type=“checkbox“
Umožňuje uživateli zaškrtnout nebo odškrtnout políčko na webové stránce.
V rámci elementu checkbox je možné zaškrtnout více voleb.

<fieldset>
    <legend>Zvolte vlastnosti vaší příšery:</legend>

    <div>
      <input type="checkbox" id="supiny" name="supiny" checked>
      <label for="supiny">Šupiny</label>
    </div>

    <div>
      <input type="checkbox" id="rohy" name="rohy">
      <label for="rohy">Rohy</label>
    </div>
</fieldset>

Zvolte vlastnosti vaší příšery:

Radio button

input type=“radio“
Vytvoření výběru, možnosti jsou zobrazeny jako malé kruhové tlačítko. Slouží k výběru pouze jedné možnosti z více možností, například pro výběr způsobu platby.

<fieldset>
    <legend>Vyberte specialistu:</legend>

    <div>
      <input type="radio" id="honza" name="specialista" value="honza"
             checked>
      <label for="honza">Honza</label>
    </div>

    <div>
      <input type="radio" id="dalibor" name="specialista" value="dalibor">
      <label for="dalibor">Dalibor</label>
    </div>

    <div>
      <input type="radio" id="lukas" name="specialista" value="lukas">
      <label for="lukas">Lukáš</label>
    </div>
</fieldset>
Vyberte specialistu:

Textarea

<textarea>
Slouží k vytvoření většího textového pole, do kterého může uživatel zadávat více textu (např. popis nebo komentář).

<label for="pribeh">Řekněte nám Váš příběh:</label>

<textarea id="pribeh" name="pribeh"
          rows="5" cols="33">
Byla tmavá a bouřlivá noc...
</textarea>

Button

<input type=“button“>
Tlačítko, které se používá na webových stránkách pro spouštění určitých akcí nebo skriptů po kliknutí uživatelem.

<input type="button"
       value="Přidat k oblíbeným">

Submit

<input type=“submit“>
Tlačítko, které se používá na webových formulářích pro odeslání formulářových údajů na server po kliknutí uživatelem.

<input type="submit" value="Odeslat požadavek" />

Color

<input type=“color“>
Značka používaná pro vytvoření barevného výběru, který umožňuje uživateli vybrat barvu na webové stránce pomocí barevného dialogového okna.

<p>Vybete barvy vaší příšery:</p>

<div>
    <input type="color" id="hlava" name="hlava"
           value="#e66465">
    <label for="hlava">Hlava</label>
</div>

<div>
    <input type="color" id="telo" name="telo"
            value="#f6b73c">
    <label for="telo">Tělo</label>
</div>

Vybete barvy vaší příšery:

Password

<input type=“password“>
Textové pole, které zobrazuje zadaný text jako hvězdičky nebo tečky, například pro zadávání hesla.

<div>
    <label for="username">Uživatelské jméno:</label>
    <input type="text" id="username" name="username">
</div>

<div>
    <label for="pass">Heslo (min. 8 znaků):</label>
    <input type="password" id="pass" name="password"
           minlength="8" required>
</div>

<input type="submit" value="Přihlásit">

Search

<input type=“search“>
Textové pole pro vyhledávání na webové stránce, které může obsahovat specifické funkce pro vyhledávání, jako je například zobrazování návrhů hledaných výrazů.

<label for="prohledat">Hledat na tomto webu:</label>
<input type="search" id="prohledat" name="q">

<button>Hledat</button>

Range

<input type=“range“>
Posuvník, který umožňuje uživateli vybrat hodnotu z určitého rozsahu hodnot, například pro nastavení hlasitosti nebo maximální ceny.

<p>Nastavení zvuku:</p>

<div>
  <input type="range" id="hlasitost" name="hlasitost"
         min="0" max="11">
  <label for="hlasitost">Hlasitost</label>
</div>

<div>
  <input type="range" id="kravsky-zvonec" name="kravsky-zvonec" 
         min="0" max="100" value="90" step="10">
  <label for="kravsky-zvonec">Kravský zvonec</label>
</div>

Nastavení zvuku:

Back to Top