Sada formulára html. HTML formuláre. Viacriadkové textové pole – tag

Dobrý deň, milí čitatelia blogu. Pokračujeme v našej štúdii a prejdeme k zváženiu formulára a vstupných značiek s ich atribútmi (), pomocou ktorých môžete vytvoriť širokú škálu formulárov pre web.

Bez ohľadu na tému a obsah konkrétneho webového zdroja bude s najväčšou pravdepodobnosťou obsahovať formuláre v tej či onej forme: textové polia, rozbaľovacie ponuky, rôzne tlačidlá alebo prepínače. Mimochodom, v jednej z publikácií som už hovoril o prvkoch, ktoré pomáhajú diverzifikovať formy.

Aký je praktický účel celej rozmanitosti možných foriem? V prvom rade sú potrebné na odoslanie užívateľom zadaných údajov na server za účelom ďalšieho spracovania pomocou špeciálne vytvoreného skriptu (handler).

HTML formuláre – ako sa vytvárajú pomocou formulára a vstupu

Ako som povedal na začiatku, na každom viac či menej rozvinutom webe musí byť prítomný nejaký webový formulár, alebo aj niekoľko naraz. Aby ste pochopili, aké dôležité sú vo svetle súladu webového zdroja s modernými požiadavkami, stačí vám poskytnúť tri objekty, ktoré používajú formuláre založené na formulárových a vstupných značkách, ktoré už len svojím názvom nenechajú nikoho na pochybách o ich nevyhnutnosť pre projekt jedného alebo druhého smeru:

Ak sa budete riadiť napríklad odkazom na článok o vytváraní spätnej väzby (umožniť všetkým používateľom posielať správy administrácii stránky), potom HTML kód s formulárom, ktorý má otvor (

) a zatváranie (

) Časť:

Toto je miesto, kde formulár zohráva dôležitú úlohu, pretože iniciuje inštaláciu webového formulára. Samotný nezobrazuje oblasť na webovej stránke, ale slúži ako kontajner obsahujúci ďalšie značky.

V našom prípade (pozri snímku obrazovky vyššie) ich zahŕňa niekoľko vstup(táto značka HTML je jednoduchá, inými slovami, nemá uzatváraciu zložku) a tiež textarea s rôznymi súbormi atribútov. Každý z nich definuje svoj vlastný prvok zahrnutý vo formulári.

16. Automatické zaostrovanie(bez parametrov) je logický atribút, ktorý nastaví zameranie poľa ihneď po načítaní webovej stránky, vďaka čomu môžete zadávať údaje bez toho, aby ste naň klikali. Nedá sa použiť iba na input type="hidden".

17. Zakázané(bez hodnôt) - zakáže používateľovi prvok formulára, do ktorého bol pridaný. Najčastejšie sa používa v spojení so skriptami, kde sú špecifikované podmienky, za ktorých sa aktivuje neprístupný prvok.

18. Formulár— priradí prvok k formuláru, keď sa nachádza mimo kontajnera

. Pre prepojenie sa do značky formulára pridá atribút globálneho id a do vstupnej značky sa pridá atribút formulára, ktorého hodnoty sú rovnaké (napríklad id="data" a form="data" ).

19. Viacnásobné(bez parametrov) - sady možnosť výberu z viacerých možností pre používateľa a používa sa len v spojení s type="file" a type="email".

Ak použijete pole na nahranie súboru, pomocou klávesov Ctrl alebo Shift môžete z počítača vybrať niekoľko súborov naraz. Ak sa zobrazí pole na zadanie e-mailovej adresy (type="email"), e-maily by sa mali zadávať oddelené čiarkami.

20. Požadovaný(žiadne hodnoty) – aktivuje požiadavku, aby používateľ zadal údaje. Preto prehliadač zablokuje odoslanie webového formulára, ak požadované pole zostane prázdne, a zobrazí zodpovedajúcu správu o potrebe vyplniť.

Tento atribút sa nepoužíva pre grafické a štandardné tlačidlá (type="button | image"), ako aj pre skryté vstupné polia (type="hidden").

21. Veľkosť— určuje šírku textového poľa v znakoch (vhodné len pre prvky typu s parametrami "email | heslo | vyhľadávanie | tel | text | url"). Predvolená hodnota je 20 znakov.

Ďalšie štyri atribúty (22-25) pre vstupný tag nesú takmer rovnakú funkcionalitu ako pre , ale pre úplnosť ich v krátkosti spomeniem.

22. Maximálna dĺžka— stanovuje obmedzenie maximálneho počtu znakov, ktoré je možné zadať pri vypĺňaní textového poľa. Ak sa pokúsite prekročiť tento limit, ďalší vstup bude zablokovaný. Tento atribút je použiteľný len pre textové prvky s type="email | heslo | vyhľadávanie | tel | text | url".

23. Minimálna dĺžka— stanovuje obmedzenie minimálneho počtu znakov, ktoré je potrebné zadať do textovej oblasti. Pri pokuse o odoslanie údajov s menším počtom znakov sa zobrazí krátka správa o potrebe doplnenia obsahu formulára a informácia o počte už zadaných znakov. Podmienky používania sú úplne rovnaké ako v prípade maxlength.

24. Zástupný symbol— priamo do textového poľa môžete umiestniť nápovedu (bude slúžiť ako parameter), ktorá zmizne v momente, keď užívateľ začne zadávať znaky. Len pre polia, ktoré sú vytvorené pomocou parametrov email, heslo, vyhľadávanie, text, tel, url typ atribútu vstupnej značky.

25. Iba na čítanie(bez parametrov) - označuje, že text predtým zadaný do poľa je k dispozícii len na čítanie a kopírovanie. Zvyčajne sa používa v spojení so skriptami, kde sú špecifikované podmienky, ktorých splnenie môže aktivovať tento formulárový prvok.

A na záver ešte niekoľko atribútov, ktoré dopĺňajú funkčnosť rôznych prvkov formulára:

26. Vzor— ako jeho hodnota odráža regulárny výraz, na základe ktorého sa stanovujú pravidlá pre zadávanie informácií. V tomto prípade sa odporúča dodatočne pridať globálny atribút názvu, ako parameter, ktorého môžete pridať vysvetľujúci text, ktorý používateľom pomôže vyplniť polia. Vzor sa použije iba na prvky e-mailu, hesla, vyhľadávania, textu, tel. Pochopme to na príklade. Tu je kód pre zjednodušený registračný formulár (s ):

Prihlásiť sa heslo

Prihlásiť sa heslo

Pre prihlasovacie pole (type="text") je ako hodnota vzoru zadaný regulárny výraz (5,), ktorý znamená použitie latinských znakov, pričom je potrebné zadať aspoň päť znakov.

Vo vzťahu k textovej oblasti pre heslo (type="password") je hodnota nastavená na (8,), čo určuje zadávanie výlučne latinských znakov v každom prípade (veľké a malé písmená), ako aj číslice, pričom celkový počet všetkých znakov by nemal byť menší ako osem.

Ak dôjde k porušeniu zadaných vstupných podmienok, prehliadač vám nedovolí odosielať údaje a zobrazí príslušné varovanie:

27. Src— definuje cestu k obrázku (URL, čo je jeho hodnota) pre zobrazenie grafického tlačidla „image“ (pozri tabuľku parametrov typu vstupu vyššie).

28. Krok— nastavuje krok pre prvky, ktoré poskytujú výber číselných hodnôt (input type="date | datetime-local | mesiac | číslo | rozsah | tel | čas | týždeň.").

Ako parameter môže mať akékoľvek celé číslo alebo zlomkové číslo. Predvolený krok = "1". Na nastavenie konečného rozsahu vstupu môžete opäť použiť atribúty min a max uvedené vyššie. Pre prehľadnosť zahrnieme do testovacieho formulára 2 prvky type="number". Pre prvý nastavte step="2" a pre druhý krok="0,1":

Zadajte hodnotu medzi 0 a 1:

Zadajte hodnotu od -10 do 10: Zadajte hodnotu medzi 0 a 1:

29. Hodnota— nastavuje hodnotu prvku formulára, ktorý sa odovzdá obsluhe. Pár názov-parameter sa odošle na server, kde názov je určený atribútom name vstupnej značky a parameter je určený atribútom value. Navyše pre rôzne tvarové prvky hodnota bude hrať rôzne úlohy:

• for type="button | reset | submit" - nastaví textový štítok na tlačidlách;
• for type="checkbox | radio | image" - identifikuje každé zaškrtávacie políčko, prepínač alebo grafické tlačidlo pri odosielaní a spracovaní údajov na serveri;
• for type="password | text" - ihneď pri načítaní formulára zobrazí v poli predbežný text, ktorý môže užívateľ zmeniť alebo úplne vymazať;
• for type="file" (nahratie súboru) neplatí, pretože neovplyvňuje tento prvok.

Príklad použitia pre každú z vyššie uvedených možností:

Vyberte CMS: W.P. Joomla

Vyberte CMS: W.P. Joomla

Tu hodnota atribút hodnota definuje nasledujúce komponenty každého prvku: zobrazí textový fragment pre pole type="text" ("Vaše meno"), identifikuje každý prepínač ("1" a "2") nastavený pomocou type="radio", a tiež aktivuje nápis na tlačidle ("Odoslať").

Príklad vytvorenia krásneho HTML formulára

Ďalej sa vám pokúsim predstaviť vzorový webový formulár, ktorého kód obsahuje nielen kombinácie vstupných typov s rôznymi hodnotami, ktoré tvoria štandardné textové polia a tlačidlá, ale napríklad aj tie, ktoré umožňujú iniciovať zameranie na prvok nielen priamym kliknutím myši, ale aj kliknutím na text.

Upozorňujeme, že na získanie jedinečného dizajnu sú vložené jednotlivé komponenty formulára, z ktorých každý obsahuje súpravu:

Späť (max-width:350px; margin:50px auto 0; padding:20px; background:#f3ebe1; font-family:"Oswald", sans-serif;) .form-1, .form-2, .form-3 , .form-4 (padding:15px; border:4px double #909090) .form-1, .form-2, .form-3 (border-bottom:none) .form-1 input (display:block; margin- bottom:10px; width:100%) .in (padding-left:40px) .in input (width:100%) ..png) no-repeat;background-position:10px 10px) ..png) no-repeat; background-position:10px 10px) .form-4 input (display:block; height:50px; font-size:24px; width:100%; kurzor: pointer)

Výsledkom je, že takýto webový formulár má nasledujúci obrys:

Podrobnejšie informácie o vytvorení tohto špecifického formulára nájdete na táto strana(mimochodom, tam si môžete nielen otestovať funkčnosť jednotlivých textových oblastí zadávaním údajov do nich, ale aj experimentovať s webovým formulárom úpravou HTML kódu a/alebo vlastností CSS, úplne alebo čiastočne zmeniť jeho vzhľad).

Mojím cieľom bolo predstaviť vám algoritmus na používanie rôznych hodnôt atribútu type a značky formulára na vytváranie rôznych formulárov HTML na stránke. Dúfam, že úloha je splnená. V každom prípade sa podeľte o svoje myšlienky na túto rôznorodú tému v komentároch.

Prirodzene, v nasledujúcich publikáciách budem pokračovať v popise hlavných značiek hypertextového označenia, takže sa nezabudnite prihlásiť na odber aktualizácií blogu prostredníctvom e-mailu. Aby ste to posilnili, pozrite si ďalšiu lekciu Evgenija Popova o vytváraní kontaktného formulára.

Popis

HTML tag

vytvorí formulár HTML, ktorý sa používa na odoslanie vstupu používateľa na server.

Pretože samotný formulár neposkytuje žiadne prostriedky pre vstup používateľa vo vnútri prvku obsahujú ďalšie prvky, ktorých účelom je poskytnúť používateľovi rôzne spôsoby zadávania údajov:

Okrem týchto prvkov môžete vo formulári použiť akékoľvek ďalšie prvky HTML.

Štandardne sa formulár na webovej stránke nijako nezobrazuje, viditeľné sú len prvky nachádzajúce sa v ňom, ale pomocou CSS môžete formuláru dodať ľubovoľný vzhľad.

Atribúty

accept-charset: Určuje kódovanie znakov alebo zoznam sád znakov oddelených medzerami pre vstup formulára odoslaný na server na spracovanie. Ak údaje obsahujú znaky, ktoré zadané kódovanie nepodporuje, prehliadač sa pre ne pokúsi určiť vhodné kódovanie. Ak nie je možné určiť vhodné kódovanie, potom sa znaky zakódujú do číselných kódov.

Predvolená hodnota je rezervovaný reťazec "UNKNOWN" (prehliadače interpretujú túto hodnotu ako kódovanie znakov identické s kódovaním dokumentu obsahujúceho prvok ). akcia: Uvádza adresu na odoslanie údajov z vyplneného formulára, kde budú tieto informácie spracované. automatické dopĺňanie: Určuje, či sa má povoliť alebo zakázať automatické dopĺňanie formulárov. Keď je automatické dopĺňanie povolené, prehliadač automaticky vyplní hodnoty, ktoré používateľ zadal pri predchádzajúcom použití formulára. Možné hodnoty atribútov:

• na: prehliadač automaticky zobrazuje hodnoty, ktoré predtým zadal používateľ (predvolená hodnota).
• vypnuté: Používateľ musí zadať hodnoty pre každé pole pri každom použití formulára. Predtým zadané hodnoty sa nezobrazia.

Poznámka: Prehliadač Opera nepodporuje atribút automatického dopĺňania.

Enctype: Určuje, ako sú údaje formulára kódované pri odosielaní na server. Dá sa použiť iba v spojení s atribútom method="post". Možné hodnoty:

• application/x-www-form-urlencoded: predvolené: všetky znaky sú pred odoslaním zakódované (medzery sa skonvertujú na znaky „+“ a špeciálne znaky sa skonvertujú na hodnoty ASCII HEX).
• multipart/form-data: znaky nie sú zakódované. Používa sa na prvky , ktorého atribút type je nastavený na "file".
• text/obyčajný: medzery sa skonvertujú na znak „+“, ale nekódujú špeciálne znaky, ako sú apostrofy, do hexadecimálnych hodnôt.

metóda: Určuje metódu prenosu údajov HTTP, ktorá sa použije pri odosielaní údajov formulára. Možné hodnoty:

• získať:Údaje sa odosielajú do panela s adresou prehliadača ako páry názov=hodnota ich pripojením na koniec adresy URL. Ako oddeľovač medzi hlavnou URL a prenášanými údajmi sa používa otáznik (?) a na oddelenie prenášaných údajov od seba znak ampersand (&). Táto metóda sa používa pri odosielaní malých dát.
• príspevok:údaje sa neposielajú ako súčasť URL, ale ako obsah požiadavky prehliadača. Táto metóda sa používa na odosielanie veľkého množstva údajov.

Ak atribút metódy nie je zadaný, štandardne sa použije metóda GET. názov: Určuje názov formulára. Názov možno použiť v JavaScripte na odkazovanie na prvok podľa názvu alebo na odkazovanie na údaje formulára po jeho odoslaní. Ak sa v jednom dokumente používa viacero formulárov, ich názvy by sa nemali opakovať a ako hodnota atribútu by nemal zostať prázdny reťazec. novalidate: Označuje, že údaje zadané do formulára nebudú pred odoslaním overené. Možné hodnoty pre boolovský atribút novalidate:

Poznámka: Atribút novalidate nie je podporovaný v IE9 a starších verziách a Safari.

Cieľ: Definuje názov rámca alebo kľúčové slovo, ktoré určuje, kde sa má zobraziť odpoveď prijatá po odoslaní formulára.

• _blank: otvorí dokument v novom okne alebo karte.
• _self: otvorí dokument v rovnakom adresári, kde sa nachádza odkaz (predvolené).
• _rodič: otvorí dokument v nadradenom rámci.
• _top: otvorí dokument v celej šírke okna.
• frame_name: otvorí dokument v prvku iframe, ktorého názov bol zadaný ako hodnota.

Tag podporuje aj globálne atribúty a udalosti

Predvolený štýl

formulár ( display: block; margin-top: 0em; )

Príklad

Názov:
Priezvisko:

Používateľ pri prechádzaní webovými stránkami väčšinou iba kliká odkazy na navigáciu na webových stránkach.

Je ale jasné, že používateľ si občas potrebuje poskytnúť svoje vstupné polia. Tieto typy interakcií zahŕňajú:

• registrácia a prihlásenie na webových stránkach;
• zadanie osobných údajov (meno, adresa, informácie o kreditnej karte atď.);
• filtrovanie obsahu (pomocou rozbaľovacích zoznamov, začiarkavacích políčok atď.);
• vykonanie vyhľadávania;
• sťahovanie súborov.

Na uspokojenie týchto potrieb ponúka HTML interaktívnosť ovládacie prvky formy:

• textové polia (pre jeden alebo viac riadkov);
• spínače;
• začiarkavacie políčka;
• rozbaľovacie zoznamy;
• widgety na sťahovanie;
• tlačidlá odoslať.

Tieto kontroly zahŕňajú rôzne značky HTML, ale väčšina z nich používa značku . Pretože ide o samozatvárací prvok, typ poľa je určený jeho atribútom type:

Element

je prvok bloku, ktorý definuje interaktívnečasť webovej stránky. Výsledkom je, že všetky ovládacie prvky (ako napr , alebo <button>) musí byť <i>vnútri</i> element <form> .</p><p>Dva atribúty HTML <b>nevyhnutné</b>:</p><ul><li>akcia obsahuje adresu, ktorá určuje <i>Kde</i> budú odoslané informácie o formulári;</li><li>metóda môže byť buď GET alebo POST a určuje, či <i>Ako</i> Informácie o formulári budú odoslané.</li> </ul><p>Informácie formulára sa zvyčajne odosielajú na <b>server</b>. <i>Ako</i> tieto údaje budú následne spracované nad rámec tohto návodu.</p><p>Formulár si predstavte ako zbierku ovládacích prvkov, ktoré spolupracujú na dosiahnutí <b>jeden</b> prevádzka. Ak ste napísali prihlasovací formulár pre web, možno áno <b>tri</b> polia:</p><ul><li>pole email <input type="email"> </li><li>pole pre heslo <input type="password"> </li><li>tlačidlo odoslať <input type="submit"> </li> </ul><p>Tieto tri HTML elementy budú obsiahnuté v jednom formulári <span><form action="/login" method="POST"> </span>.</p><p>Podobne môžete pridať registračný formulár na rovnakú stránku HTML v samostatnom prvku <form> .</p><h2>Textové polia</h2><p>Takmer všetky formy vyžadujú <b>text</b> vstup od používateľov na zadanie ich mena, e-mailovej adresy, hesla, adresy atď. Textové polia formulára majú rôzne možnosti.</p><p>Hoci sú tieto polia veľmi podobné a umožňujú používateľom zadávať akýkoľvek druh textu (aj nesprávne), ich typ poskytuje špecifické <b>sémantika</b> pre vstup, určenie, aké informácie pole <b>musieť</b> obsahujú.</p><p>Prehliadače môžu následne mierne zmeniť rozhranie ovládacieho prvku, aby sa zlepšili <i>interaktivita</i> alebo navrhnite, aký obsah sa očakáva.</p><p>Napríklad pole pre heslo zobrazuje namiesto symbolov bodky. A číselné pole umožňuje zvýšiť/znížiť hodnotu pomocou kláves hore a dole.</p><h2>zástupný symbol</h2><p>Môžu sa zobraziť textové polia <b>sugestívne</b> text, ktorý zmizne hneď po zadaní nejakého textu.</p><p> <input type="text" placeholder="Zadajte svoje meno"> </p><p>Ak začnete niečo písať, text „Zadajte svoje meno“ zmizne.</p><h2><label></h2><p>Keďže samotné prvky formulára nie sú veľmi popisné, zvyčajne im predchádza text. <b>štítok</b>.</p><p> <label>Email</label> <input type="email"> </p><p>Zatiaľ čo zástupný symbol už poskytuje určitý náznak toho, aký obsah sa očakáva, štítky majú tú výhodu, že zostávajú stále viditeľné a možno ich použiť spolu s inými typmi prvkov formulára, ako sú začiarkavacie políčka alebo prepínače.</p><p>Aj keď môžete použiť krátke odseky na popis prvkov formulára, pomocou <label>je sémanticky správnejšie, pretože existujú len vo formách. <label>môžu byť tiež spojené s konkrétnym prvkom formulára pomocou atribútu for zodpovedajúceho hodnote id poľa.</p><p> <label for="first_name">názov</label> <input id="first_name" type="text"> </p><p>Keď kliknete na štítok, zameranie prejde na textové pole a umiestni kurzor do neho. Zatiaľ sa tento balík zdá byť zbytočný, ale bude sa hodiť so začiarkavacími políčkami a prepínačmi.</p><h2>Začiarkavacie políčka</h2><p><b>Začiarkavacie políčka</b>- Toto sú prvky formulára, ktoré majú iba dva stavy: zapnuté alebo vypnuté. V podstate umožňujú používateľovi povedať niečomu „áno“ alebo „nie“.</p><p> <input type="checkbox">Pamätáš si ma</p><p>Keďže môže byť ťažké kliknúť na malé začiarkavacie políčko, odporúča sa umiestniť začiarkavacie políčko a jeho popis dovnútra <label> .</p><p> <label> <input type="checkbox">Súhlasím s podmienkami</label> </p><p>Kliknutím na text „Súhlasím s podmienkami“ môžete začiarkavacie políčko prepnúť.</p><p>V predvolenom nastavení je začiarkavacie políčko vypnuté. Môžete ho označiť ako povolený jednoducho pomocou atribútu začiarknuté.</p><p> <label> <input type="checkbox" checked>Použiť moju fakturačnú adresu</label> </p><h2>Prepínače</h2><p>Môžete poskytnúť používateľovi <b>zoznam možností</b> voliteľné pomocou spínačov.</p><p>Aby tento prvok formulára fungoval, musí váš kód HTML <b>skupina</b> zoznam prepínačov spolu. To sa dosiahne použitím rovnakej hodnoty pre atribút name:</p><p> <label>Rodinný stav</label> <label> <input type="radio" name="status">Slobodný</label> <label> <input type="radio" name="status">Ženatý</label> <label> <input type="radio" name="status">Rozvedeny</label> <label> <input type="radio" name="status">Vdovec</label> </p><p>Pretože všetky prepínače používajú rovnakú hodnotu pre atribút name (v tomto prípade hodnotu status ), výber jednej možnosti prepíše všetky ostatné. Prepínače sú <b>vzájomne sa vylučujú</b>.</p><h3>Rozdiel medzi prepínačmi a zaškrtávacími políčkami</h3><p>Hoci začiarkavacie políčko existuje <b>sám</b>, prepínače sa môžu objaviť iba vo formulári <b>zoznam</b>(čo znamená aspoň dve možnosti).</p><p>Okrem toho kliknutím na začiarkavacie políčko je <b>svojvoľný</b>, pričom je vybraté jedno z prepínačov <b>povinné</b>. To je dôvod, prečo nie je možné vypnúť prepínač, ak vyberiete najbližšiu možnosť. Nakoniec sa vždy vyberie jeden z prepínačov.</p><h2>Rozbaľovacie ponuky</h2><p>Ak počet možností na výber zaberá príliš veľa miesta, môžete použiť rozbaľovacie ponuky <select> .</p><p>Fungujú podobne ako vypínače, len rozloženie je iné.</p><p> <select> <option>januára</option> <option>februára</option> <option>marca</option> <option>apríla</option> <option>Smieť</option> <option>júna</option> <option>júla</option> <option>augusta</option> <option>septembra</option> <option>októbra</option> <option>novembra</option> <option>December</option> </select> </p><h3>Viacnásobný výber z rozbaľovacej ponuky</h3><p>Ak pridáte atribút multiple, môžete poskytnúť možnosť výberu viacerých možností.</p><p> <label>Aké prehliadače používate?</label> <select multiple> <option>Google Chrome</option> <option>internet Explorer</option> <option>Mozilla Firefox</option> <option>Opera</option> <option>Safari</option> </select> </p><p>Vyberte viacero možností podržaním klávesu Ctrl (alebo ⌘) a kliknutím. Môže to byť dobrá alternatíva k použitiu viacerých začiarkavacích políčok na riadok.</p><h2>Príklad: úplný registračný formulár</h2> <form action="/signup" method="POST"> <p> <label>Príťažlivosť</label> <label> <input type="radio" name="title" value="Pán">Pán.</label> <label> <input type="radio" name="title" value="Pani">Pani.</label> </p> <p> <label>názov</label> <input type="text" name="first_name"> </p> <p> <label>Priezvisko</label> <input type="text" name="last_name"> </p> <p> <label>Email</label> <input type="email" name="email"> </p> <p> <label>Telefón</label> <input type="tel" name="phone"> </p> <p> <label>heslo</label> <input type="password" name="password"> </p> <p> <label>Potvrďte heslo</label> <input type="password" name="password_confirm"> </p> <p> <label>Krajina</label> <select name="country"> <option>Kanada</option> <option>Francúzsko</option> <option>Nemecko</option> <option>Taliansko</option> <option>Japonsko</option> <option>Rusko</option> <option>Veľká Británia</option> <option>USA</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Suhlasim s podmienkami pouzivania</label> </p> <p> <button>Registrovať</button> </p> </form> <p>Dostupné sú aj ďalšie prvky formulára, no my sme sa pozreli na tie najpoužívanejšie.</p> <p><b>HTML tagy, ktoré definujú HTML formuláre na stránke</b></p> <p><b>Vytvárame webové stránky a jednotlivé stránky na internete</b> komunikovať s návštevníkmi.</p> <p><b>HTML formuláre</b> sa používajú na registráciu návštevníkov na stránke, na interaktívne prieskumy a hlasovanie, umožňujú vám posielať správy, nakupovať atď. <b>HTML</b> Formulár je vytvorený na jeden účel: zhromažďovanie a následný prenos informácií na spracovanie pomocou softvérového skriptu alebo prostredníctvom e-mailu.</p> <i> </i><h2>Príklad HTML formulára | Zadajte lokalitu</h2> <p>Značky, atribúty a hodnoty</p> <ul><li><form> </form>- určiť tvar.</li> <li>name="" - definuje názov formulára.</li> <li>method="" - definuje spôsob odosielania údajov z formulára. Hodnoty: "get" (predvolené) a "post" . Často sa používa metóda „post“, pretože umožňuje prenášať veľké množstvo dát.</li> <li>action="" - definuje adresu URL, na ktorú sa odosielajú údaje na spracovanie. V našom prípade - enter_data.php ..</li> <li><input />- definovať také prvky formulára, ako sú tlačidlá, prepínače, textové polia na zadávanie údajov.</li> <li>type="text" - definuje textové pole pre zadávanie údajov.</li> <li>type="password" - definuje pole pre zadanie hesla, pričom text sa zobrazuje vo forme hviezdičiek alebo krúžkov.</li> <li>type="checkbox" - definuje prepínač.</li> <li>type="hidden" - definuje skrytý prvok formulára - používa sa na prenos dodatočných informácií na server.</li> <li>size="25" - dĺžka textového poľa v znakoch.</li> <li>maxlength="30" - maximálny povolený počet zadaných znakov.</li> <li>value="" - definuje hodnotu, ktorá sa odošle na spracovanie, ak sa týka prepínačov alebo prepínačov. Hodnota tohto atribútu ako súčasti textového poľa alebo tlačidla sa vo vyššie uvedenom príklade zobrazí ako napríklad Vasya alebo Login.</li> </ul><h2>Príklad HTML formulára | Komentáre na stránke</h2> <table class="jsexam"><tr><td> <span> <title>Príklad HTML formulára</title><br> </head><br> <body><br> <form action="http://сайт/comments.php" method="post" name="commentform" id="commentform"><br> <p><input type="text" name="author" id="author" value="" size="25" /><br> <small>názov</small><br></p><br> <p><input type="text" name="email" id="email" value="" size="25" /><br> <small>Mail</small><br></p><br> <p><textarea name="comment" id="comment" cols="48" rows="8">

Značky, atribúty a hodnoty

• action="http://site/comments.php" - definuje url, na ktorý sa budú odosielať údaje z formulára.
• id="" - definuje názov a identifikátor prvku formulára.
• name="" - definuje názov prvku formulára.
• - definovať textové pole ako súčasť formulára.
• cols="" - určuje počet stĺpcov textového poľa formulára.
• rows="" - definuje počet riadkov textového poľa formulára.

Ak medzi umiestnite text, zobrazí sa vo vnútri poľa ako príklad, ktorý možno ľahko odstrániť.

Príklad HTML formulára | Rozbaľovací zoznam

Prvá pozícia Druhá pozícia Tretia pozícia Štvrtá pozícia

Značky, atribúty a hodnoty

• - definujte zoznam s pozíciami na výber.
• size="" - určuje počet viditeľných pozícií zoznamu. Ak je hodnota 1, máme čo do činenia s rozbaľovacím zoznamom.
• - určiť pozície (položky) zoznamu.
• value="" - obsahuje hodnotu, ktorá bude odoslaná formulárom na zadanú url na spracovanie.
• selected="selected" - zvýrazní položku zoznamu ako príklad.

Príklad HTML formulára | Zoznam s posúvačom

Zvýšením hodnoty atribútu size="" dostaneme zoznam s posuvnou lištou:

Prvá pozícia Druhá pozícia Tretia pozícia Štvrtá pozícia

Prvá pozícia Druhá pozícia Tretia pozícia Štvrtá pozícia

Pre túto možnosť použite príznak multiple="multiple", ktorý umožňuje vybrať viacero pozícií. Jeho absencia umožňuje vybrať iba jednu položku.

type="submit" - definuje tlačidlo.

type="reset" - definuje tlačidlo reset.

value="" - definuje označenie na tlačidle.

Pozri dodatočne:

HTML formulár je nástroj, pomocou ktorého dokáže HTML dokument poslať nejaké informácie do nejakého vopred určeného bodu vo vonkajšom svete, kde budú informácie nejakým spôsobom spracované.

Je dosť ťažké hovoriť o formulároch v návode venovanom HTML. Dôvod je veľmi jednoduchý: vytvorenie HTML formulára je oveľa jednoduchšie ako vytvorenie „bodu vo vonkajšom svete“, do ktorého bude HTML formulár posielať informácie. Vo väčšine prípadov je takýmto „bodom“ program napísaný v jazyku Perl alebo C.

Programy, ktoré spracúvajú údaje odoslané formulármi, sa často nazývajú skripty CGI. Skratka CGI znamená Common Gateways Interface. Písanie CGI skriptov vo väčšine prípadov vyžaduje dobrú znalosť príslušného programovacieho jazyka a možností operačného systému Unix.

V súčasnosti sa trochu rozšíril jazyk PHP/FI, ktorého návod je možné vložiť priamo do HTML dokumentov (dokumenty sa ukladajú ako súbory s príponou *.pht alebo *.php).

Formuláre HTML odovzdávajú informácie obslužným programom vo forme párov [názov premennej]=[hodnota premennej]. Názvy premenných by sa mali uvádzať latinkou. Obslužné programy považujú premenné hodnoty za reťazce, aj keď obsahujú iba čísla.

Ako funguje HTML formulár

Formulár sa otvorí pomocou značky

a končí značkou

. HTML dokument môže obsahovať niekoľko formulárov, ale formuláre by nemali byť umiestnené jeden v druhom. HTML text vrátane značiek je možné umiestniť do formulárov bez obmedzení.

Tag

môže obsahovať tri atribúty, z ktorých jeden je povinný. Toto sú atribúty:

Povinný atribút. Určuje, kde sa nachádza obslužný program formulára.

Určuje, ako (inými slovami, pomocou ktorej metódy protokolu prenosu hypertextu) sa údaje z formulára prenesú do handlera. Platné hodnoty sú METHOD=POST a METHOD=GET. Ak hodnota atribútu nie je nastavená, štandardne sa predpokladá METHOD=GET.

Určuje, ako budú údaje z formulára HTML kódované na prenos do obsluhy. Ak hodnota atribútu nie je nastavená, predvolená hodnota je ENCTYPE=application/x-www-form-urlencoded .

Najjednoduchší HTML formulár

Na spustenie procesu prenosu údajov z formulára k handlerovi je potrebná určitá kontrola. Vytvorenie takéhoto kontrolného orgánu je veľmi jednoduché:

Keď prehliadač narazí na takýto riadok vo formulári, nakreslí na obrazovku tlačidlo s nápisom Odoslať (čítaj „odoslať“ s dôrazom na druhú slabiku, z anglického „odoslať“), po kliknutí sa zobrazia všetky údaje dostupné v formulár sa prenesie na handler definovaný v tagu .

Menovka na tlačidle môže byť nastavená na čokoľvek, čo chcete, zadaním atribútu VALUE="[Label]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:!}

Teraz vieme dosť na to, aby sme napísali jednoduchý HTML formulár (príklad 11). Nebude zbierať žiadne údaje, ale jednoducho nás vráti k textu tejto kapitoly.

Najjednoduchšia forma

Nápis umiestnený na tlačidle môže byť v prípade potreby odovzdaný obsluhe vložením atribútu NAME=[meno] do definície tlačidla (čítaj „meno“, z angličtiny „meno“), napríklad:

Keď kliknete na takéto tlačidlo, handler spolu so všetkými ostatnými údajmi dostane premennú button s hodnotou Poďme! .

Formulár môže mať viacero tlačidiel na odoslanie s rôznymi názvami a/alebo hodnotami. Obsluha tak môže konať odlišne v závislosti od toho, na ktoré tlačidlo odoslania používateľ klikol.

Ako formulár HTML zhromažďuje údaje

Existujú aj iné typy prvkov . Každý prvok musí obsahovať atribút NAME=[name], ktorý špecifikuje názov prvku (a podľa toho aj názov premennej, ktorá bude odovzdaná handleru). Názov musí byť špecifikovaný len latinkou. Väčšina položiek musí obsahovať atribút VALUE="[hodnota]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} A , tento atribút je však voliteľný, pretože hodnotu zodpovedajúcej premennej môže zadať používateľ pomocou klávesnice.

Základné typy prvkov :

TYPE=text

Definuje okno na zadávanie riadku textu. Môže obsahovať ďalšie atribúty SIZE=[číslo] (šírka vstupného okna v znakoch) a MAXLENGTH=[číslo] (maximálna povolená dĺžka vstupného reťazca v znakoch).

Príklad:

Definuje 20-znakové okno na zadávanie textu. Štandardne sa v okne nachádza text Ivan, ktorý môže používateľ upravovať. Upravený (alebo neupravený) text sa odovzdá obsluhe v používateľskej premennej.

TYPE=heslo

Definuje okno na zadanie hesla. Úplne podobný typu textu, len namiesto symbolov zadávaného textu zobrazuje na obrazovke hviezdičky (*). Príklad:

Definuje 20-znakové okno na zadanie hesla. Maximálna povolená dĺžka hesla je 10 znakov. Zadané heslo sa odovzdá obsluhe v premennej pw.

TYPE=rádio

Definuje prepínač. Môže obsahovať ďalší začiarknutý atribút (označuje, že tlačidlo je začiarknuté). V skupine prepínačov s rovnakými názvami môže byť len jeden označený prepínač.

Príklad:

9600 bps
14400 bps
28 800 bps

Definuje skupinu troch prepínačov označených 9600 bps, 14400 bps a 28800 bps. Prvé z tlačidiel je pôvodne označené. Ak používateľ nezaškrtne iné tlačidlo, premenná modemu s hodnotou 9600 bude odovzdaná handleru. Ak používateľ zaškrtne iné tlačidlo, obsluhe sa odovzdá premenná modemu s hodnotou 14400 alebo 28800.

TYPE=zaškrtávacie políčko

Definuje štvorec, v ktorom je možné vytvoriť značku. Môže obsahovať ďalší začiarknutý atribút (označuje, že štvorec je začiarknutý). Na rozdiel od prepínačov môže mať skupina štvorcov s rovnakým názvom viacero označených štvorcov.

Príklad:

Osobné počítače
Pracovné stanice
Lokálne sieťové servery
Internetové servery

Definuje skupinu štyroch štvorcov. Druhý a štvrtý štvorec sú na začiatku označené. Ak používateľ neurobí žiadne zmeny, obsluhe sa odovzdajú dve premenné: comp=WS a comp=IS .

TYPE=skryté

Definuje skrytý dátový prvok, ktorý nie je viditeľný pre používateľa pri vypĺňaní formulára a je odovzdaný handlerovi nezmenený. Niekedy je užitočné mať takýto prvok na formulári, ktorý je z času na čas prerobený, aby obsluha vedela, s ktorou verziou formulára má čo do činenia. Ďalšie možné využitie ľahko vymyslíte sami.

Príklad:

Definuje premennú skrytej verzie, ktorá sa odovzdá obsluhe s hodnotou 1.1.

TYPE=resetovať

Definuje tlačidlo, ktoré po kliknutí vráti HTML formulár do pôvodného stavu. Keďže pri používaní tohto tlačidla sa do obsluhy neodovzdávajú žiadne údaje, tlačidlo reset nemusí mať atribút názvu.

Príklad:

Definuje tlačidlo Vymazať polia formulára, ktoré po kliknutí vráti formulár HTML do pôvodného stavu.

Okrem prvkov , HTML formuláre môžu obsahovať ponuky a polia na zadávanie textu .</p> <p>Ponuka <SELECT>z n prvkov vyzerá asi takto:</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[hodnota 1]">[text 1] <OPTION VALUE="[hodnota 2]">[text 2] ... <OPTION VALUE="[hodnota n]">[text n]</SELECT> </p><p>Ako vidíte, ponuka začína značkou <SELECT>a končí značkou</SELECT>. Tag <SELECT>obsahuje povinný atribút NAME, ktorý určuje názov premennej, ktorú ponuka generuje.</p> <p>Tag <SELECT>môže obsahovať aj atribút MULTIPLE, ktorého prítomnosť naznačuje, že z ponuky je možné vybrať viacero položiek. Väčšina prehliadačov zobrazuje menu <SELECT MULTIPLE>vo forme okna, v ktorom sa nachádzajú položky menu (výšku okna v riadkoch je možné nastaviť atribútom SIZE=[číslo]). Ponuka <SELECT>vo väčšine prípadov sa zobrazuje ako rozbaľovacia ponuka.</p> <p>Tag <OPTION>definuje položku ponuky. Požadovaný atribút VALUE nastavuje hodnotu, ktorá bude odovzdaná obsluhe, ak je vybratá táto položka ponuky. Tag <OPTION>môže obsahovať začiarknutý atribút označujúci, že prvok je štandardne kontrolovaný.</p> <h3>Pozrime sa na malý príklad:</h3> <SELECT NAME="selection"> <OPTION VALUE="možnosť 1" checked>možnosť 1 <OPTION VALUE="možnosť2">Možnosť 2 <OPTION VALUE="možnosť 3">Možnosť 3</SELECT> <p>Tento fragment definuje ponuku troch prvkov: možnosť 1, možnosť 2 a možnosť 3. Štandardne je vybratá položka Option 1. Obsluhe bude odovzdaná výberová premenná, ktorej hodnota môže byť option1 (predvolená), option2 alebo option3.</p> <p>Po všetkom, čo sme sa už naučili, živel <TEXTAREA>sa môže zdať celkom jednoduché. Napríklad:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50>A tu je tvoja adresa...

Všetky atribúty sú povinné. Atribút NAME definuje názov, pod ktorým bude obsah okna prenesený do handlera (v príklade - adresa). Atribút ROWS nastavuje výšku okna v riadkoch (v príklade 5). Atribút COLS nastavuje šírku okna v znakoch (v príklade 50).

Text umiestnený medzi značkami A, predstavuje predvolený obsah okna. Používateľ ho môže upraviť alebo jednoducho vymazať.

Je dôležité vedieť, že v okne sú ruské písmená keď sú odovzdané obsluhe, môžu byť prevedené na im zodpovedajúce znakové objekty.</p> <h3>Príklad:</h3> <p>Aby som demonštroval použitie HTML formulárov, napísal som malý program v PHP, ktorý sa nachádza na adrese:</p><p>Http://206.31.82.215/hp/nc/fd-win.pht</p><p>Zdrojové údaje budú prenesené do tohto programu pomocou formulára opísaného v príklade 12:</p><p> <HTML> <HEAD> <TITLE>Príklad 12</TITLE> </HEAD> <H1>Trochu zložitejšia forma</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Povedz nám niečo o sebe...</H2> <P>Nie je potrebné uvádzať pravdivé informácie. Na demonštračné účely sú celkom vhodné aj fiktívne.</P> <P>Názov: <INPUT TYPE=text SIZE=40 NAME=fn><BR>Priezvisko: <INPUT TYPE=text SIZE=40 NAME=ln><BR>poschodie: <INPUT TYPE=radio NAME=gender VALUE="Muž" checked>Muž <INPUT TYPE=radio NAME=gender VALUE="Žena">Žena <BR>Vek: <INPUT TYPE=text SIZE=5 NAME=age>rokov <BR> <INPUT TYPE=submit VALUE="Run handler"></P> </FORM> </BODY> </HTML> </p><p>Vyplňte HTML formulár, kliknite na tlačidlo a uvidíte, čo sa stane...</p> <p><b>Malý trik <br>alebo ako odoslať formulár poštou</b></p><p>To všetko je skvelé, povedia si skeptici, ale prečo do pekla ľudia potrebujú HTML formuláre, ktoré ich nemajú čím spracovať? Čiastočne je to pravda, ale len čiastočne.</p> <p>HTML poskytuje pomerne výkonný mechanizmus na odosielanie obsahu formulárov prostredníctvom e-mailu. Takto to vyzerá v praxi.</p> <p>Povedzme, že sme mierne zmenili Príklad 12. Namiesto reťazca</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>vstúpili sme do radu</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Upozorňujeme, že sme zmenili kódovací algoritmus na text/plain , to znamená, že sme kódovanie v skutočnosti úplne vypli.</p> <p>Predpokladajme teraz, že používateľ uviedol krstné meno Ivan, priezvisko Petrov, mužské pohlavie a vek 22 rokov. Otázka teraz znie: čo sa stane, ak používateľ klikne na tlačidlo Run Handler?</p> <p>Odpoveď je jednoduchá. Nasledujúca správa bude automaticky odoslaná na adresu user@mail.box e-mailom:</p><p>Fn=Ivan ln=Petrov pohlavie=muž vek=22</p><p>Bohužiaľ, nie všetci používatelia budú môcť použiť tento HTML formulár. Faktom je, že všetku prácu pri vytváraní správy a spustení e-mailového programu na jej odoslanie v skutočnosti preberá prehliadač používateľa. To znamená, že konfigurácia prístupu na internet používateľa musí zabezpečiť súčasné fungovanie Hypertext Transfer Protocol a Outgoing Mail Delivery Protocol. Nie vždy je to možné. Avšak aj keď je to nemožné, nič fatálne sa nestane. Prehliadač jednoducho zobrazí chybové hlásenie.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="data"> <div class="data__top clearfix"> <div class="data__print"> <a href='javascript:window.print(); void 0;'>Tuleň</a> </div> </div> <div class="data__bottom clearfix"> <div class="data__share"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,evernote,whatsapp,skype"></div> </div> </div> </div> <div class="navi"> <a href="https://comuedu.ru/sk/internet/kak-poluchit-dopolnitelnyi-dohod-dopolnitelnyi-zarabotok-v.html" class="navi__prev"></a> <!-- /next_post --> <a href="https://comuedu.ru/sk/smartphone/ishchem-imya-dlya-druga-s-iskusstvennym-intellektom-kakoi-mehanizm-mozhno-nazvat.html" class="navi__next"></a> <!-- /next_post --> </div> </div> </div> <div class="news-blocks clearfix"> <div class="news-block"> <div class="papers"> <div class="papers__title">Tiež zaujímavé:</div> <div class="papers__items"> <style> </style> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/windows/kak-skachivat-istorii-iz-instagram-i-vkontakte-osvaivaem-prodvinutyi.html"><img src="/uploads/0f93c8357b955935a038c77baea804da.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/sk/windows/kak-skachivat-istorii-iz-instagram-i-vkontakte-osvaivaem-prodvinutyi.html">Zvládnutie úrovne pokročilých používateľov: ako stiahnuť príbeh z Instagramu Stiahnite si príbeh z Instagramu od používateľa</a> </div> <div class="papers__category"> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/android/samsung-ue40j6200au-tehnicheskie-harakteristiki-samsung-ue40j6200au-harakteristiki-cena-otzyvy-na.html"><img src="/uploads/d841454a74bd008f1294713f18d74a36.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/sk/android/samsung-ue40j6200au-tehnicheskie-harakteristiki-samsung-ue40j6200au-harakteristiki-cena-otzyvy-na.html">Špecifikácie Samsung ue40j6200au</a> </div> <div class="papers__category"> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/solutions/instrukciya-po-ekspluatacii-plansheta-samsung-galaksi-tab-3-chitat.html"><img src="/uploads/9d35c0a3d659a965971176e1ae0580b5.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/sk/solutions/instrukciya-po-ekspluatacii-plansheta-samsung-galaksi-tab-3-chitat.html">Práca s juhokórejskými tabletovými zariadeniami</a> </div> <div class="papers__category"> </div> </div> </div> </div> </div> </div> <div class="news-block"> <div class="papers"> <div class="papers__title">Odporúčame prečítať:</div> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/routers/vosstanovlenie-zhestkogo-diska-posle-akronisa-vosstanovlenie.html"> <img width="50" height="50" src="/uploads/dc67b13e261c85a40c7860b4ff25f832.jpg" class="attachment-50 size-50 wp-post-image" alt="Obnova zmazaných údajov z pevného disku" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-04-14 00:05:59</div> <div class="papers__name"> <a href="https://comuedu.ru/sk/routers/vosstanovlenie-zhestkogo-diska-posle-akronisa-vosstanovlenie.html">Obnova zmazaných údajov z pevného disku</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/apple/intel-i5-i-i7-sravnenie-chto-luchshe-dlya-igr-intel-core-i5-ili-intel-core-i7-poslednie-bukvy-u-q-h.html"> <img width="50" height="50" src="/uploads/ceca8f305e7db8e6d8ce26a52f698421.jpg" class="attachment-50 size-50 wp-post-image" alt="Čo je lepšie pre hranie hier intel core i5 alebo intel core i7" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-04-14 00:05:59</div> <div class="papers__name"> <a href="https://comuedu.ru/sk/apple/intel-i5-i-i7-sravnenie-chto-luchshe-dlya-igr-intel-core-i5-ili-intel-core-i7-poslednie-bukvy-u-q-h.html">Čo je lepšie pre hranie hier intel core i5 alebo intel core i7</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/modems/stilus-dlya-risovaniya-na-ekrane-stilusy-vvod-teksta-na-ekrannoi.html"> <img width="50" height="50" src="/uploads/14409bb637a8281950e3e7861858d7df.jpg" class="attachment-50 size-50 wp-post-image" alt="Stylus na kreslenie na obrazovku" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-04-14 00:05:59</div> <div class="papers__name"> <a href="https://comuedu.ru/sk/modems/stilus-dlya-risovaniya-na-ekrane-stilusy-vvod-teksta-na-ekrannoi.html">Stylus na kreslenie na obrazovku</a> </div> </div> </div> </div> </div> </div> </div> <div class="rate clearfix"> <div class="papers__title">Pokračovanie v téme:</div> </div> <div class="rate clearfix"> <div class="rate__img"> <a href="https://comuedu.ru/sk/the-device/verhnyaya-zapyataya-na-angliiskoi-klaviature-kak-postavit-zapyatuyu.html"> <img width="150" height="150" src="/uploads/6ac5019bac7cb2d29775ec0c4c161114.jpg" class="attachment-alm-thumbnail size-alm-thumbnail wp-post-image" alt="Ako dať čiarku navrch: metódy a odporúčania" sizes="(max-width: 150px) 100vw, 150px" / loading=lazy loading=lazy> </a> </div> <div class="rate__ovh"> <div class="rate__label"> <span>Zariadenia</span> </div> <div class="rate__name"> <a href="https://comuedu.ru/sk/the-device/verhnyaya-zapyataya-na-angliiskoi-klaviature-kak-postavit-zapyatuyu.html">Ako dať čiarku navrch: metódy a odporúčania</a> </div> <div class="rate__description"> <p>Ako dať pri písaní čiarku hore? Na túto otázku sa pokúsime odpovedať ďalej. Ide o to, že písanie textov rukou nespôsobuje také problémy ako...</p> </div> </div> </div> <!-- /next_post --> </div> <div class="button-menu"></div> <div class="page__right"> <div class="menu"> <div class="menu__exit">×</div> <ul> <li><a href="https://comuedu.ru/sk/category/wi-fi/" class="link-catalog">WiFi</a> </li> <li><a href="https://comuedu.ru/sk/category/linux/" class="link-catalog">Linux</a> </li> <li><a href="https://comuedu.ru/sk/category/windows/" class="link-catalog">Windows</a> </li> <li><a href="https://comuedu.ru/sk/category/different/" class="link-catalog">Zmiešaný</a> </li> <li><a href="https://comuedu.ru/sk/category/network/" class="link-catalog">siete</a> </li> <li><a href="https://comuedu.ru/sk/category/smart-tv/" class="link-catalog">Smart TV</a> </li> <li><a href="https://comuedu.ru/sk/category/solutions/" class="link-catalog">Riešenia</a> </li> <li><a href="https://comuedu.ru/sk/category/android/" class="link-catalog">Android</a> </li> </ul> </div> <div id="husevi1" style="height:400px;width:290px;" align="center"></div> <div class="page__hidden-mobile"> <div class="papers"> <div class="papers__tabs"> <div class="active" data-eq="0">Nové články</div> <span>/</span> <div data-eq="1">Populárne</div> </div> <div class="papers__blocks"> <div class="papers__block active"> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/routers/posle-udaleniya-amigo-ne-rabotaet-internet-kak-polnostyu.html"> <img width="50" height="50" src="/uploads/4ac8b12eb68b6d19266a111ba8dc87c5.jpg" class="attachment-50 size-50 wp-post-image" alt="Ako úplne odstrániť Amigo z počítača" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-04-13 00:05:49</div> <div class="papers__name"> <a href="https://comuedu.ru/sk/routers/posle-udaleniya-amigo-ne-rabotaet-internet-kak-polnostyu.html">Ako úplne odstrániť Amigo z počítača</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/sk/category/routers/">Smerovače</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/different/kak-mozhno-zaryadit-telefon-bez-zaryadki-vykruchivaemsya-podruchnymi-sredstvami.html"> <img width="50" height="50" src="/uploads/e045e0e885b7781ee04ceb6b055a2aa2.jpg" class="attachment-50 size-50 wp-post-image" alt="Je možné nabíjať batériu bez nabíjačky priamo na batériu telefónu?" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-04-13 00:05:49</div> <div class="papers__name"> <a href="https://comuedu.ru/sk/different/kak-mozhno-zaryadit-telefon-bez-zaryadki-vykruchivaemsya-podruchnymi-sredstvami.html">Je možné nabíjať batériu bez nabíjačky priamo na batériu telefónu?</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/sk/category/different/">Zmiešaný</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/network/kak-izmenit-setevoi-profil.html"> <img width="50" height="50" src="/uploads/810cc65a68eef1107435771018ee3df9.jpg" class="attachment-50 size-50 wp-post-image" alt="Ako zmeniť profil siete" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-04-12 00:06:36</div> <div class="papers__name"> <a href="https://comuedu.ru/sk/network/kak-izmenit-setevoi-profil.html">Ako zmeniť profil siete</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/sk/category/network/">siete</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/different/zakazat-dopolnitelnyi-internet-na-mts-kak-zakazat-megabaity-na.html"> <img width="50" height="50" src="/uploads/7be01afc5c9a8119fbf6f57d1e55865e.jpg" class="attachment-50 size-50 wp-post-image" alt="Ako objednať megabajty na MTS" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-04-12 00:06:36</div> <div class="papers__name"> <a href="https://comuedu.ru/sk/different/zakazat-dopolnitelnyi-internet-na-mts-kak-zakazat-megabaity-na.html">Ako objednať megabajty na MTS</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/sk/category/different/">Zmiešaný</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/windows/chto-takoe-gadzhety-i-vidzhety-i-kak-ih-ustanovit-v-windows-vidzhet.html"> <img width="50" height="50" src="/uploads/73ba904879bdc5a1ca311b5d81be0501.jpg" class="attachment-50 size-50 wp-post-image" alt="Čo sú miniaplikácie a miniaplikácie a ako ich nainštalovať do systému Windows" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-04-12 00:06:36</div> <div class="papers__name"> <a href="https://comuedu.ru/sk/windows/chto-takoe-gadzhety-i-vidzhety-i-kak-ih-ustanovit-v-windows-vidzhet.html">Čo sú miniaplikácie a miniaplikácie a ako ich nainštalovať do systému Windows</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/sk/category/windows/">Windows</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/sk/computer/kak-vybrat-noutbuk---sovety-ekspertov-kak-vybrat-idealnyi.html"> <img width="50" height="50" src="/uploads/1d27561d8a6e683865271e942ec00558.jpg" class="attachment-50 size-50 wp-post-image" alt="Ako si vybrať dokonalý notebook: od kancelárie až po hry" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-04-12 00:06:36</div> <div class="papers__name"> <a href="https://comuedu.ru/sk/computer/kak-vybrat-noutbuk---sovety-ekspertov-kak-vybrat-idealnyi.html">Ako si vybrať dokonalý notebook: od kancelárie až po hry</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/sk/category/computer/">Počítač</a> </div> </div> </div> </div> </div> <div class="papers__block"> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/sk/smartphone/obzor-akkumulyatora-xiaomi-mi-power-bank-pro-s-bystroi-zaryadkoi-power-bank-s.html"> <img width="50" height="50" src="/uploads/04119bc9d57a5380dd5d4c1fac74f395.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Powerbanka s rýchlym nabíjaním Najlepšia power banka so solárnou batériou" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/sk/smartphone/obzor-akkumulyatora-xiaomi-mi-power-bank-pro-s-bystroi-zaryadkoi-power-bank-s.html">Powerbanka s rýchlym nabíjaním Najlepšia power banka so solárnou batériou</a> </div> <div class="papers__category"><a href="https://comuedu.ru/sk/category/smartphone/" rel="tag">Smartfón</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/sk/smartphone/trehpolosnaya-akustika-v-avtomobil-samodelnaya-trehpolosnaya-akustika.html"> <img width="50" height="50" src="/uploads/5c65427f2e5a85afe3bbdea902d6697f.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Domáci trojpásmový reproduktorový systém na reproduktoroch Dayton Audio Domáci trojpásmový reproduktorový systém" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/sk/smartphone/trehpolosnaya-akustika-v-avtomobil-samodelnaya-trehpolosnaya-akustika.html">Domáci trojpásmový reproduktorový systém na reproduktoroch Dayton Audio Domáci trojpásmový reproduktorový systém</a> </div> <div class="papers__category"><a href="https://comuedu.ru/sk/category/smartphone/" rel="tag">Smartfón</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/sk/internet/forma-obratnoi-svyazi-dlya-lendinga-forma-otpravki-pisma-bez.html"> <img width="50" height="50" src="/uploads/29acdddaf586e4fcc20e2c36fa2e387c.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Formulár na odoslanie listu bez opätovného načítania vstupnej stránky" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/sk/internet/forma-obratnoi-svyazi-dlya-lendinga-forma-otpravki-pisma-bez.html">Formulár na odoslanie listu bez opätovného načítania vstupnej stránky</a> </div> <div class="papers__category"><a href="https://comuedu.ru/sk/category/internet/" rel="tag">internet</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/sk/different/total-commander-skachat-besplatno-russkaya-versiya-total-commander-skachat-besplatno-russkaya.html"> <img width="50" height="50" src="/uploads/6e10fe78f573af448151d8f942a05a92.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Total Commander na stiahnutie zadarmo Ruská verzia Stiahnite si celkovú ponuku" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/sk/different/total-commander-skachat-besplatno-russkaya-versiya-total-commander-skachat-besplatno-russkaya.html">Total Commander na stiahnutie zadarmo Ruská verzia Stiahnite si celkovú ponuku</a> </div> <div class="papers__category"><a href="https://comuedu.ru/sk/category/different/" rel="tag">Zmiešaný</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/sk/apple/tehnologiya-parallelnyh-vychislenii-hyper-threading-chto-takoe-hyper-threading-kak-vklyuchit.html"> <img width="50" height="50" src="/uploads/896f8e30daeda65fa1f422de8251da69.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Čo je to Hyper Threading?" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/sk/apple/tehnologiya-parallelnyh-vychislenii-hyper-threading-chto-takoe-hyper-threading-kak-vklyuchit.html">Čo je to Hyper Threading?</a> </div> <div class="papers__category"><a href="https://comuedu.ru/sk/category/apple/" rel="tag">Apple</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/sk/internet/kak-poluchit-dopolnitelnyi-dohod-dopolnitelnyi-zarabotok-v.html"> <img width="50" height="50" src="/uploads/8207dc9ab830639e56ecb651ee21ee0b.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Ďalší príjem vo voľnom čase" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/sk/internet/kak-poluchit-dopolnitelnyi-dohod-dopolnitelnyi-zarabotok-v.html">Ďalší príjem vo voľnom čase</a> </div> <div class="papers__category"><a href="https://comuedu.ru/sk/category/internet/" rel="tag">internet</a></div> </div> </div> </div> </div> </div> </div> <div class="comments"> <div id="husevi2" class="husevi-sticky" style="height:500px;width:254px;" align="center"></div> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="footer__top"> <div class="cnt"> <div class="footer__nav"> <ul> <li><a href="https://comuedu.ru/sk/feedback.html">Kontakty</a></li> <li><a href="">Reklama</a></li> <li><a href="">O stránke</a></li> </ul> </div> <div class="footer__counter"> </div> <div class="footer__logo1" align="right"> <img style="max-height:60px;" src="/assets/logo.png" alt="" loading=lazy loading=lazy> </div> </div> </div> <div class="footer__bottom"> <div class="cnt"> <div class="footer__copyright">© comuedu.ru 2024 Webová stránka o výpočtovej technike</div> </div> </div> </div> <a href="#top" class="up"></a> </div> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/jquery-1.12.0.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/owl.carousel.min.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/mousewheel.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/jscrollpane.min.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/scripts.js?v=8"></script> <!--[if lt IE 10]> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/placeholder.js"></script> <![endif]--> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-ajaxify-comments/js/wp-ajaxify-comments.min.js?ver=1.5.0'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-polls/polls-js.js?ver=2.73.8'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp_testme/js/testme.js?ver=1.1'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-2", "margin_top" : 10, "margin_bottom" : 112, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['cb_widget-2'] } ; </script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9'></script> </body> </html>