Popis tlačítka. Tlačítko html: aplikace, výroba. Vezměte prosím na vědomí: „pokud tlačítko nemá platný href, je to jen prvek“

Používáte to, ehm... no, když chcete na stránku umístit tlačítko, na které může uživatel kliknout, že? Bohužel, věci jsou trochu složitější. V zásadě se to blíží pravdě, ale pojďme si problematiku nastudovat hlouběji.

Samotný prvek vypadá takto:

Dělej něco

Jaký je nejčastější výsledek kliknutí na něco na webu? Přejděte na novou adresu URL, jako byste klikli na odkaz ( prvek ).

Živel sám o sobě to nemůže udělat. Hodně se mluvilo o povolení „href všude“, ale nikdy z toho nic nebylo.

Po kliknutí na tlačítko se skutečně provedou určité akce, pokud je použit příslušný kontext...

Tlačítko je prvek formuláře

Webové formuláře mohou obsahovat tlačítka pro provedení (potvrzení) akcí. Možná si myslíte, že to vypadá nějak takto:

Obalový prvek

, ve výchozím nastavení se chová přesně tak, jak je uvedeno výše.

Předložit

Formuláře však mohou mít také tlačítka pro zrušení. Typ akce tlačítka můžete duplikovat změnou výchozího chování z provedení (potvrzení) akce ke zrušení:

Klepnutím na toto tlačítko odstraníte všechna ostatní vstupní pole (a textové oblasti) z nadřazeného bloku .

Tlačítka mohou obsahovat obsah

Hlavní důvod použití prvku

spočívá v tom, že obsahuje otevírací i uzavírací značky ( ). To znamená, že jej lze odlišit od jakéhokoli jiného kódu. V praxi často nastává následující situace:

Potvrdit

Dokud přetrvává, bude se tento smíšený obsah zobrazovat na obrazovce.

Pokud mohu říci, neexistují žádná zvláštní omezení na to, co můžete do tlačítka umístit, takže si tam můžete dát, co chcete, a vytvořit tak opravdu luxusní tlačítka. Je také možné použít pseudo prvky.

Nechme zatím téma stylů , Ačkoli různé prohlížeče obvykle mají speciální styly, které se vztahují na tlačítka. Pokud chcete, můžete ponechat styly použité v prohlížečích, nebo je můžete úplně odstranit, a pak váš výchozí styl přepíše styly prohlížečů.

Vezměte prosím na vědomí: „pokud tlačítko nemá platný href, je to jen prvek“

Pamatujte, že toto téma jsem psal dříve dělá mi opravdovou radost. To je to, co mě inspirovalo k napsání tohoto článku. Představoval jsem si, jakou radost budu mít při pohledu na různé příhody. Jako:

Už je mi z těch tlačítek špatně.

S největší pravděpodobností výše uvedený kód znamená něco jako: Kliknutím na tlačítko udělám něco s JavaScriptem. V každém případě se to zdá lepší než použití běžného

, protože ve výchozím nastavení získáte možnost změnit vzhled kurzoru a všechny ostatní styly.

Mimo

Jsem k ničemu.

nicméně pořád se to zdá lepší

Dokonce venku nic nedělá , tento prvek je podle mého názoru stále vhodnější pro jiné akce, které nevyžadují přechod na jinou stránku. Pokud něco, jsou lepší než falešné odkazy.

Pokuta. Vložíme nějaký JavaScript

Toto je pravděpodobně Nejlepší rozhodnutí. Pokud je pro jakoukoli akci kliknutí vyžadován JavaScript, pak prvek

V zásadě se obejdete bez spuštění JS.

Ale můžeme udělat následující:

// 1. Vytvořte tlačítko var button = document.createElement("button"); button.innerHTML = "Udělejte něco"; // 2. Umístěte jej var body = document.getElementsByTagName("body"); body.appendChild(tlačítko); // 3. Přidejte zpracování akce button.addEventListener ("click", function() ( alert("něco udělal"); ));

Můžete to snadno udělat" tlačítko přidat» součástí pracovního postupu JavaScriptu.

Kdy je nejlepší používat odkazy?

Pokud máte nějaké hypertextové přechody na jiné stránky, pak je smysluplnější je naformátovat pomocí odkazu, abyste mohli použít kotvu. I když jeho chování změníte pomocí JavaScriptu.

Toto je progresivní zlepšení v celé své kráse. Například:

• Tlačítko vyhledávání obvykle způsobí spuštění vyhledávacích skriptů Ajax – zatímco odkaz může jednoduše ukazovat na vyhledávací stránku;
• Tlačítko "publikovat" spustí další krok publikování něčeho, co uživatel potřebuje - ale odkaz může jednoduše vést na stránku /publikovat/;
• Otevře se tlačítko s miniaturou obrázku samostatný panel, která zobrazí obrázek v větší velikost— a odkaz může být jednoduše URL na tento větší obrázek.

Pokud vše ostatní selže, vložte tlačítko s JavaScriptem.

Související problémy

Možná skončíte s něčím podobným, co jsem udělal já!

Tlačítka jsou jedním z nejpřehlednějších a nejintuitivnějších prvků rozhraní. Podle jejich vzhledu je okamžitě jasné, že jedinou akcí, kterou s nimi lze provést, je kliknout na ně. Díky této funkci se tlačítka často používají ve formulářích, zejména při jejich odesílání a čištění.

Tlačítko na webové stránce lze vytvořit dvěma způsoby – pomocí značky a tag

.

Nejprve zvažte přidání tlačítka přes a jeho syntaxi.

Atributy tlačítka jsou uvedeny v tabulce. 1.

Vytvoření tlačítka je znázorněno v příkladu 1.

Příklad 1: Přidání tlačítka

HTML5 IE Cr Op Sa Fx

Mezery ve štítku na tlačítku, na rozdíl od HTML text, jsou zohledněny, takže můžete vložit libovolný počet mezer, které v konečném důsledku ovlivní šířku tlačítka. Výsledek příkladu je na Obr. 1.

Rýže. 1. Zobrazení tlačítka

Druhý způsob vytvoření tlačítka je založen na použití značky

. Jeho akce se podobá výsledku získanému pomocí značky . Na rozdíl od něj ale nabízí pokročilé možnosti tvorby tlačítek. Například na takové tlačítko můžete umístit jakékoli HTML prvky včetně obrázků a tabulek. Na Obr. 2 znázorněno odlišné typy tlačítka získaná pomocí .

Rýže. 2. Tlačítka vytvořená pomocí

Syntaxe pro vytvoření takového tlačítka je následující.

Štítek na tlačítku

Atributy jsou uvedeny v tabulce. 1, ale na rozdíl od tlačítka atribut value určuje pouze hodnotu odeslanou na server, nikoli popisek na tlačítku. Pokud chcete na tlačítku zobrazit obrázek, pak značku se přidává dovnitř , jak je ukázáno v příkladu 2.

Příklad 2. Kreslení na knoflík

HTML5 IE Cr Op Sa Fx

Tlačítko s textem Tlačítko s obrázkem

V v tomto příkladu ukazuje vytvoření běžného tlačítka s textem a také tlačítka s současné použití text a kresba. Velikost tlačítka závisí na obsahu nádoby , ale mezery jsou ignorovány, takže jednoduché zvětšení jejich množství, jako v případě použití , šířku tlačítka nelze změnit.

Tlačítko Odeslat

Je určeno k odesílání dat na server speciální tlačítko Předložit. Její vzhled se neliší od běžná tlačítka, ale když na něj kliknete, spustí se serverový program, specifikováno akční atributštítek

. Tento program, nazývaný také form handler, přijímá data zadaná uživatelem do polí formuláře, provádí s nimi potřebné manipulace a výsledek pak vrací ve formě HTML dokumentu. Co přesně handler dělá, závisí na autorovi webu, podobná technologie se například používá k vytváření průzkumů, fór, testů a mnoha dalších věcí.

Syntaxe vytvoření Tlačítka Odeslat záleží na použité značce nebo

.

Štítek na tlačítku

Atributy jsou stejné jako u běžných tlačítek (příklad 3).

Příklad 3: Odeslání dat na server

HTML5 IE Cr Op Sa Fx

Atribut name pro tento typ tlačítka lze vynechat. Pokud nezadáte hodnotu , prohlížeč automaticky přidá text, který se liší v závislosti na prohlížeči. Firefox tedy píše „Odeslat žádost“, IE - „Odeslat žádost“, Opera a Chrome - „Odeslat“. Samotný text nápisu nijak neovlivňuje funkčnost tlačítka.

Tlačítko reset

Když stisknete tlačítko Resetovat data formuláře se vrátí na svou původní hodnotu. Toto tlačítko se obvykle používá k vymazání informací zadaných do polí formuláře. Pro velké formy od použití Resetovací tlačítka Je lepší odmítnout úplně, abyste na něj omylem neklikli, protože pak budete muset formulář vyplnit znovu.

Syntaxe pro vytvoření zadaného tlačítka je jednoduchá a podobná jako u jiných tlačítek.

Štítek na tlačítku

Příklad 4 ukazuje formulář s jedničkou textové pole, který již obsahuje předem zadaný text pomocí atributu value značky . Po změně textu a kliknutí na tlačítko „Vymazat“ se hodnota pole obnoví a znovu se v něm objeví nápis „Zadejte text“.

Příklad 4. Tlačítko pro vymazání formuláře

HTML5 IE Cr Op Sa Fx

Hodnota tlačítka Reset se nikdy neodešle na server. Pokud vynecháte popisek na tlačítku, jinými slovy nenastavíte atribut value, bude k tlačítku standardně přidán text „Clear“.