Ako vytvoriť formuláre HTML. Vytvorenie formulárov v HTML. Animované hľadanie vstupu

HTML Forms - Komplexné prvky rozhrania. Patrí medzi ne rôzne funkčné prvky: vstupné polia a , zoznamy <select> , Tipy atď. Celkový kód formulára je prvok <form> .</p> <p>Väčšina informácií o webovom formulári sa prenáša pomocou položky. <input> . Ak chcete zadať jeden riadok textu, aplikuje sa prvok <input type="text"> , pre niekoľko riadkov - prvok <textarea> . Element <select> Vytvorí rozbaľovací zoznam.</p> <p>Element <label> Vytvorí nápisy na vytvorenie polí. Existujú dva spôsoby, ako zoskupovať nápisy a polia. Ak je pole vo vnútri prvku <label> Nemusíte špecifikovať pre atribút.</p><p> <label for="lastname">Priezvisko.</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Priezvisko.</label> <label>Priezvisko. <input type="text" name="lastname"></label> </p><p>Formové polia môžu byť rozdelené do logických blokov pomocou položky. <fieldset> . Každá sekcia môže byť priradená menom pomocou položky. <legend> .</p><p> <fieldset> <legend>Kontaktné informácie</legend> <label>názov <input type="text" required></label> <label>E-mail <input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy> Obr. 1. Zoskupenie pole</p><p>Ak chcete vytvoriť formulár zrozumiteľnejším pre používateľov, text obsahujúci príklad zadania údajov sa pridá do polí formulára. Tento text sa nazýva zástupný znak a je vytvorený pomocou atribútu place.</p> <p>Povinné polia na vyplnenie tejto oblasti by sa mali prideliť. Pred vznikom HTML5 sa použil symbol ozubeného kolesa * nainštalovaný v blízkosti názvu poľa. V novej špecifikácii sa objavil špeciálny požadovaný atribút, ktorý vám umožní všimnúť si povinné pole na úrovni značky. Tento atribút vám udáva indikáciu prehliadača (za predpokladu, že podporuje HTML5), ktorá neodosiela dáta po stlačení tlačidla stlačenia používateľa, kým nie sú vyplnené zadané polia.</p><p> <input type="text" required placeholder="Tvoje meno"> </p><p>Ak chcete zmeniť vzhľad textového poľa, keď sa dosiahnete zaostrenie, používa sa trieda Pseudo-trieda. Môžete napríklad vytvoriť pozadie aktuálneho poľa s tmavším alebo pridať farebný rám, aby sa medzi ostatnými odlíšili:</p><p>Vstup: Focus (pozadie: # #aeaea;)</p><p>Ďalším užitočným atribútom HTML5 je atribút Autofocus. Umožňuje automaticky nainštalovať zaostrenie na požadované počiatočné pole pre položky. <input> a <textarea> (Iba jeden prvok každej formy).</p> <h2>Príklad vytvárania registračného formulára</h2> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>prihlásiť sa</h1> </div> <form method="post" action="form.php"> <div> <label for="name">názov</label> <input type="text" name="name" required> </div> <div class="radio"> Podlaha <label> <input type="radio" name="sex" value="muž">muž <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="Žena">Žena <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Krajina</label> <select name="country"> <option>Vyberte si krajinu ubytovania</option> <option value="Rusko">Rusko</option> <option value="Ukrajina">Ukrajina</option> <option value="Bielorusko">Bielorusko</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Poslať</button> </form> </div> <p><b>Poznámka</b><br> Action \u003d "form.php" - odkaz na súbor s obsluhou formulára. Vytvorte súbor v kódovaní UTF-8, stiahnite ho na server a vymeňte akciu \u003d "form.php" na ceste k súboru na vašom serveri.</p> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy> Obr. 2. Vzhľad predvoleného formulára <p>Ako je možné vidieť z výkresu, každý prvok formy má predvolené štýly prehliadača. Čisté štýly a umiestnite prvky formulára.</p><p> Form-Wrap (Šírka: 550px; pozadie: # FFD500; Border-Radius: 20px;) .Form-Wrap * (prechod: .1s lineárny) .PROFILE (šírka: 240px; plavák: vľavo; text-align: centrum; polstrovanie : 30PX) Forma (pozadia: biela; Plavák: vľavo; šírka: výpočet (100% - 240 pixelov), padding: 30PX, border-radius: 0 20 pixelov 20 pixelov 0; Farba: # 7B7B7B) .form-Wrap: Po, Forma Div: Po (Obsah: "", Displej: Tabuľka; CLEAR: Obaja;) Forma DIV (okoren-dno: 15px; poloha: relatívna;) H1 (veľkosť písma: 24px; font-hmotnosť: 400; poloha: relatívny Ringin-Top: 50px;) H1: Po (Obsah: "F138", font-veľkosť: 40px; font-tvár: fontawesome; pozícia: absolútna; TOP: 50PX; vľavo: 50%; Transformácia: Translatex (-50 %);) / ********************** Stylizácia prvkov formulárov ******************** * ** / štítku, rozpätie (display: block; font-size: 14px; margin-bottom: 8px), vstupu (šírka okraja: 0; Osnova: none; margin: 0; šírka: 100%; padding: 10px 15px; Background: # E6E6E6) VSTUP: Focus, Input: zaostrenie (Box-Sha Dow: INSET 0 0 0 0 2px RGBA (0,0,0, 0,2); ) .Radio štítok (pozícia: relatívna; polstrovanie vľavo: 50px; kurzor: ukazovateľ; šírka: 50%; plavák: vľavo; výška linky: 40px;) .Dadio vstup (pozícia: absolútna; nepriehľadnosť: 0;) .Radio -Regulační (pozícia: absolútna; top: 0; zľava: 0; výška: 40px; šírka: 40px; background: # E6E6E6, border-radius: 50%; text-align: centrum;) .male: Pred (obsah " \\ F222 "; font-family: FontAwesome; font-weight: Bold) .female: Pred: font-family: FontAwesome; font-weight: Bold) rádiová Label :. Hover Input ~ Radio-Control, .Radiol Input Focus ~ rádiová-Control (Box-Shadow: vložka 0 0 0 2px RGBA (0,0,0, 0,2);) rádiová Vstup: Kontroloval ~ rádiové-Control (Farba: červená) SELECT (šírka: 100%; Cursor: Pointer; Výplň: 10px 15px; Outline: 0; Border: 0; Background: # E6E6E6; color: # 7B7B7B; -webkit-Vzhľad: none; / * Čistý kliešť v WebKit -Buizers * / -moz -Appearance: none; / * Čistý kliešť v prehliadači Mozilla Firefox * /) Vyberte :: - MS-expand (display: none; / * Odstránenie políčka v IE * /) .Select-šípka (pozícia: absolútna; Top: 38px; Právo: 15px; šírka: 0; Výška: 0; Ukazovateľ-Events: none; / * Aktivácia zobrazenie zoznamu kliknutím na šípky * / border-style: Solid; Hranica šírky: 8PX 5PX 0 5PX; Farba pohraničky: # 7B7B7B transparentná transparentná transparentná; ) Tlačidlo (polstrovanie: 10px 0; hraničná šírka: 0; displej: blok; šírka: 120px; okraj: 25px auto 0; pozadie: # 60E6C5; Farba: biela, písma-veľkosť: 14px; obrys: Žiadna; Text-transformácia : veľké písmená) / ********************** doplnok prispôsobivosť ********************* * ** / @media (Max-šírka: 600px) (.form-Wrap (Margin: 20px auto; max-width: 550px; šírka: 100%) .profile, Form (Float: Žiadne; šírka: 100%; ) H1 (margin-top: auto; padding-bottom: 50 pixelov) forma (Border Polomer: 0 0 20 pixelov 20 pixelov;))</p><p><b>Forma Form.php.</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>"." R n "; $ hlavičky. \u003d" BCC: your_email "." R n "; ak (! Prázdne ($ name) &&! Prázdne ($ sex) &&! Prázdne ($ Country) && Filter_var ($ Email, Filter_Validate_email)) (Mail (Email $, $ predmet, $ msg, $ hlavičky); echo "Ďakujeme! Boli ste úspešne zaregistrovaný.")?\u003e</p><p><b>Poznámka</b><br> V premennej $ subjektu zadajte text, ktorý sa zobrazí ako hlavička listov; <br> Vlastné - tu môžete zadať názov, ktorý sa zobrazí v poli ", odkiaľ"; <br> URL_BER_SYTA Nahraďte adresu stránky registračným formulárom; <br> Your_email vymeňte svoju e-mailovú adresu; <br> $ Hlavičky. \u003d "BCC: your_email". "r \\ n"; Odošle skrytú kópiu na vašu e-mailovú adresu.</p> <p>Formuláre sú najdôležitejšie interaktívne HTML prvky, ktoré umožňujú interaktívne interaktívne s návštevníkmi pre vývojárov. Pomocou ich pomoci môže užívateľ vrátiť komentáre o návšteve špecifického uzla, odosielať požiadavky alebo registrovať. Vývojár nastaví otázky, vytváranie formulára a používateľ ich odpovie na ich vyplnenie. Obsah formulára sa prenáša buď skriptom CGI, alebo e-mailom je odoslaný príjemcovi. Proces vytvárania formulára sa skladá z dvoch stupňov. Prvým z nich je vytvoriť formu formulára sám a druhá obsahuje vytvorenie skriptu CGI na serveri. Formulár sa vytvorí pomocou rôznych značiek a atribútov uzavretých v páre. <FORM></FORM>:</p> <p>Element <FORM> Je to predpoklad pre všetky formy. Môže mať tieto atribúty:</p> <p>metóda Tento atribút definuje spôsob odosielania údajov do skriptu CGI. Tu Get Protocol vyberie štandardne, ale vo väčšine prípadov vývojári používajú post protokol, ktorý vám umožní prenášať veľké množstvá dát.</p> <p>akcia Tento atribút definuje cestu k skriptu CGI alebo e-mailovú adresu.</p> <p>encype Tento atribút definuje spôsob kódovania obsahu formulára. Inými slovami, informuje prehliadač o spôsobe kódovania informácií pred odoslaním servera. V predvolenom nastavení sa používa hodnota x-www-formulár.</p> <p>Formulár syntaxe pre scenár:</p> <p><FORM method="get" или "post" action="URL сценария" ></FORM></p> <p>Syntax tvaru pošty: <FORM method="get" или "post" action="mailto:адрес" ></FORM></p> <p>Element <INPUT> je základný pre všetky prvky formulára. Používa sa na vkladanie tlačidiel, grafických obrázkov, príznakov, prepínačov, hesiel a textových polí. Napriek vonkajším rozdielom foriem, všetky odosielajú údaje CGI skript vo forme párov mena: Hodnota. Prvok môže mať osem atribútov určených ako typ:</p> <p>Textové jednorazové textové pole sa používa na zadanie informácií, ktoré nemôžu byť podávané v žiadnom z ostatných prvkov formulára. Tu sú mená, adresy, pozície, telefónne čísla, záľuby a údaje z takmer akéhokoľvek typu. Prvok môže mať atribúty:</p> <p>Syntax: <INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Nakupovanie."></p> <p>Heslo Jedno-riadkové pole, v ktorom sa hviezdy zobrazia namiesto zadaných znakov. Prvok môže mať atribúty:</p> <p>maximálna dĺžka. Určuje maximálnu prípustnú dĺžku namontovanej hodnoty v znakoch.</p> <p>veľkosť. Určuje maximálnu prípustnú dĺžku poľa v znakoch.</p> <p>hodnotu. Určuje predvolenú hodnotu, ktorú možno zmeniť.</p> <p>Syntax: <INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20"></p> <p>HIDDENA jeden typ skrytých vstupných informácií. Umožňuje odosielať informácie na scenáre, ktoré užívateľ nemožno zmeniť. Niektoré programy CGI používajú skryté polia na prenos informácií z jednej stránky do druhej, napríklad názov alebo číslo. Tento prístup značne uľahčuje prácu používateľa, eliminuje ho od potreby znova zadať údaje. Napríklad, pre posielanie zdrojového kódu HTML, používa sa nasledujúci návrh: <INPUT type="HIDDEN" name="file" value="anyfile.html."></p> <p>Značka začiarkavania sa používajú na zabezpečenie schopnosti reagovať monosyllary: áno / žiadna pravda / leží viac / menej, atď. Vyzerá to zvyčajne vo forme kríža alebo vtáka. Prvok môže mať atribúty:</p> <p>skontrolovať. Určuje počiatočný stav predvoleného príznaku.</p> <p>hodnotu. Určuje predvolenú hodnotu, ktorú možno zmeniť.</p> <p>Syntax: <INPUT type="checkbox" name="send_mail" value="Áno" checked></p> <p>Rádiové spínače sú do značnej miery pripomínajúce schránky, ktoré sa líšia len širšou funkčnosťou voľby. V skupine prepínačov je možné zvoliť len jeden. Pre každý spínač je špecifikovaný samostatný vstupný prvok.</p> <p>Odoslať Kliknite na toto tlačidlo vedie k obsahu obsahu scenára, ktorý bol stanovený atribútom akcie v prvom <FORM>. Pomocou tlačidiel môžete vypočítať počet, nahrať stránky, odosielať údaje, hodnoty poklesu. Syntax:</p> <p><FORM method="get" или "post" action="mailto: Этот адрес e-mail защищен от спам-ботов. Чтобы увидеть его, у Вас должен быть включен Java-Script "> <INPUT type="submit" value="poslať"></FORM></p> <p>Tlačidlo Reset sa používa na obnovenie predvolených hodnôt. Ak nie je predvolená hodnota poskytnutá, jednoducho sa resetuje. Šírka tlačidla sa môže líšiť v závislosti od iných prvkov. Má tiež atribút hodnoty.</p> <p>Syntax: <INPUT type="reset" value="Čistenie"></p> <p>Obrázok je do značnej miery podobný tlačidlu Odoslať, ako tlačidlo sa používa len obrázok. Jednou z výhod je schopnosť preniesť súradnice kliknúť na kliknutie používateľa, čo vám umožňuje usporiadať mapu obrázkov. Prvok môže mať atribúty:</p> <p>src. Určuje súbor URL s obrázkom.</p> <p>zarovnať. Určuje nastavenie obrazu vzhľadom na text pomocou horných, stredných a dolných hodnôt.</p> <p>názov. Určuje názov karty, ktorý posiela aj skript spolu so súradnicami.</p> <p>Syntax: <INPUT type="image" src="knopka.gif"></p> <p>Tlačidlo vytvorí ďalšie tlačidlo, používateľské prehliadače môžu používať hodnotu atribútu hodnoty ako názvu zdroja.</p> <p>Syntax: <INPUT type="button"value="tlačidlo"></p> <p>Súbor vytvára správu súborov s výberom súborov. Syntax: <INPUT type="file"></p> <p>AccessKey Určuje tlačidlo, keď je pole stlačené. Syntax: <INPUT accesskey="a"></p> <p>Veľkosť Nastaví šírku prvku v pixeloch. Syntax: <INPUT size="число"></p> <p>Zakázané Zakáže možnosť zmeniť obsah poľa alebo polohu tlačidla. Syntax: <INPUT disabled"></p> <p>Element <TEXTAREA> Pomocou tohto prvku je oblasť vytvorená pre zadanie a prezeranie textu. Môže sa použiť a nie ako súčasť formulára, ale ako samostatná detaily stránky. Vstupná oblasť pomáha ušetriť priestor z dôvodu posúvacích pruhov. Môžu mať atribúty:</p> <p>názov. Určuje kľúčové slovo, na ktoré môže skript prístup k jeho obsahu.</p> <p>riadky. Určuje výšku oblasti v riadkoch.</p> <p>cols. Určuje šírku oblasti v znakoch.</p> <p>Syntax:</p> <p><FORM><H3>Zadajte text <TEXTAREA name="ключевое слово" rows=5 cols=30>Oblasť zadávania textu

Element Môže mať formu rozbaľovacieho zoznamu alebo menu prvkov. Má vnorenú značku a atribúty:

názov. Určuje názov.

veľkosť. Určuje maximálny počet položiek zoznamu súčasne zobrazený na obrazovke.

viac. Určuje schopnosť súčasne vybrať viacero hodnôt.

Elementry Určuje možné možnosti výberu ponuky

Syntax: hodnota

Má atribúty:

vybraný. Určuje pôvodne vybrané slovo.

hodnotu. Nastaví hodnotu vybraného slova pre skript.

Element Používa sa na logické zoskupovacie prvky Vnútri Taga Má atribút označenia:

Syntax:

Vyberte:

najprv

Druhý

Tretia Štvrtý

Element Toto je najjednoduchší prvok, ktorý vám umožní vytvoriť formu formulára a vstupovať reťazec obsahujúci text a generovanie požiadavky.

Príklad: Predpokladajme, že aktuálna adresa URL je zadaná na aktuálnej stránke pomocou položky Potom, ak užívateľ vstúpi do kľúčových slov v Slovo, aby vyhľadať Word1, Word2, Word3, potom prehliadač bude tvoriť a nasadiť požiadavku pre vyhľadávač vyhľadávačov: http: // www. Poznámka. Dometer /? Word1 + Word2 + Word3 Ak program vyhľadávania servera podporuje syntax štandardného dotazu pomocou značiek? a +, vyhľadávanie bude implementované.

Element Je to alternatívny prvok S bohatšími možnosťami - napríklad s úlohou alternatívneho textu. Syntax:

názov Určuje položku názvu.

hodnota nastaví hodnotu k položke.

zadajte, keď sa používa ako tlačidlo, vyberie hodnoty: Tlačidlo: Odoslanie a resetovanie.

zakázané robí túto položku neprístupné

tabindex určuje polohu v prechodovej sekvencii záložky, zakázané polia formulárov nie sú zapojené do sekvencie.

accessKey Určuje prístupový kľúč.

Element Používa sa na alternatívne informácie pre polia kontroly informácií. Podporuje atribút, ktorý viaže prvok S iným prvkom formulára a hodnota atribútu musí zodpovedať atribútu atribútu príslušného riadiaceho prvku.

Element