Rubrika: HTML

Pořadí inputů při přeskakování TABem pomocí tabindex

Pokud v přeskakování mezi jednotlivými inputy/selecty/checkboxy používáte především tabulátor, někdy Vás překvapí, když automaticky vybrané další pole je jiné, než to, jaké následuje v kódu.

Chování se prohlížeč od prohlížeče různí, proto neexistuje jednoduché vysvětlení, jak jdou za sebou inputy…

Máte-li ale zájem o vytvoření předem nadefinovaného pořadí inputů, je to zcela jednoduché. Navíc to bude fungovat všude, protože není potřeba nic jiného, než jen klasické HTML, dokonce i bez JavaScriptu si dnes vystačíme.

Pořadí inputů při přeskakování určuje vlastnost tabindex. Do kódu ji zanesete stejně jednoduše jako třeba value, nebo length.

<input type="text" name="jmeno" tabindex="1"><br>

Důležitá je zde zvýrazněná hodnota tabindex=“?“. Čísla uvádějte vždy v posloupnosti a vždy ve vzestupném pořadí, jak chcete mezi poli/inputy přeskakovat. Například zde

<form>
  Jméno (první vybrané pole):
  <input type="text" name="jmeno" tabindex="1"><br>
  Telefon (třetí vybrané pole):
  <input type="text" name="telefon" tabindex="3"><br> 
  E-mail (druhé vybrané pole):
  <input type="text" name="email" tabindex="2"><br>
</form>

Jsou inputy uvedeny v HTML v pořadí

  1. Jméno
  2. Telefon
  3. E-mail

Ale jelikož je u každého inputu uveden také tabindex, tak pořadí v HTML nemá žádný vliv. Podle tabindexu bude tedy přeskakování mezi inputy pomocí tabu následovné

  1. Jméno (tabindex=“1″, ačkoliv pořadí v HTML je 1.)
  2. E-mail (tabindex=“2″, ačkoliv pořadí v HTML je 3.)
  3. Telefon (tabindex=“3″, ačkoliv pořadí v HTML je 2.)

Jednoduché, že? 🙂

Horní a dolní index textu – značky sup a sub

Nedávno jsem potřeboval na jeden web vložit značku metrů čtverečních, tedy m2. Té dvojce jsem ale potřebpval nastavit horní index (je odsazena výše). Dnes si ukážeme, jak na to…

Kapitoly:

 

Horní index

Horní index si můžeme představit třeba takto: nějaký text v horním indexu. Uplatnění najdeme především v aritmetice a geometrii, kde chceme zapsat metry čtvereční, nebo třeba metry krychlové.

Pro zápis horního indexu použijeme párovou značku <sup> a </sup>, kterou obalíme potřebné znaky, které chceme vyvýšit a zmenšit jim trochu velikost písma – font-size v CSS jistě znáte :-)

Kompletní názorná ukázka pro 28 metrů čtverečních by mohla vypadat třeba takhle:

Obývací pokoj má 28 m<sup>2</sup>.

Tímto zápisem nám vznikne tato věta:

Obývací pokoj má 28 m2.

 

Dolní index

Využití dolního indexu již není tak časté, ale lze jej zapsat velmi podobnou párovou značkou <sub> a </sub>. Pozor, zde je rozdíl pouze v jediném písmenku – sub a sup! Já si to často pletu… Ukázka dolního indexu by vypadala například takto:

Píšeme text a najednou potřebujeme <sub>dolní index</sub>.

Ukázka výsledku:

Píšeme text a najednou potřebujeme dolní index.

 

Závěrečná ukázka

Záverečné shrnutí:

  • Pro horní index používáme párovou značku <sup>
  • Pro dolní index používáme párovou značku <sub>

Živá ukázka

Kotvy a odkazování na ně

Občas se hodí používat kotvy (jak třeba u tohoto článku). Je to jednoduché.

U místa, na které chceme odkazovat kotvou uvedeme identifikátor id=““. Většinou se uvádí u nadpisů h1, h2, h3 a h4, nebo třeba u <p> či divů. Takže nějak takto:

<h3 id="kotva">Nadpis</h3>

Na tento text následně budeme odkazovat kotvou:

<a href="#kotva">Odkaz na kotvu</a>

Pokud odkazujeme na jiný soubor, ve kterém je definována kotva, uvedeme i název souboru:

<a href="soubor.html#kotva">Odkaz na kotvu</a>