Vytváranie a práca s formulármi v html. Vytvorenie formulára v HTML Select, Option, Textarea, Label, Fieldset, Legend - rozbaľovacie zoznamy, textové oblasti a ďalšie prvky webového formulára

Príznaky tehotenstva po implantácii embrya

Značka voľby HTML sa používa na vytvorenie rozbaľovacieho zoznamu, ktorý umožňuje používateľovi vybrať jednu možnosť z preddefinovanej množiny hodnôt.

Text viditeľný pre používateľa sa môže líšiť od textu uvedeného v atribúte value. Tu je postup, ako vytvoriť rozbaľovací zoznam:

  • Rozbaľovací zoznam sa vytvorí pomocou značky možnosti výberu sú definované pomocou značky
  • V značke

Je tiež možné zadať triedu CSS namiesto použitia ID na úpravu rozbaľovacieho zoznamu.

V ďalšej časti ukážem príklady použitia rozbaľovacieho zoznamu HTML v JavaScript/JQuery. Príklady tiež ukážu, ako nastaviť štýly

Použitie atribútu value

Ako už bolo spomenuté, hodnota atribútu value sa môže líšiť od textu zobrazeného na stránke. Môžete napríklad používateľom zobraziť názvy krajín alebo farby a použiť krátke kódy v atribúte value.

V nasledujúcom príklade vytvoríme rozbaľovací zoznam s atribútom value:

Pozrite si online demo a kód

Pre značku

Príklad prístupu k vybranej možnosti v JavaScripte

Teraz vytvorte príklad prístupu k hodnote vybranej možnosti a vykonania niektorých akcií. Vytvárame rovnaký zoznam ako v príklade vyššie s farebnými možnosťami. Po výbere kliknutím na tlačidlo aplikujte túto farbu na dokument:

Pozrite si online demo a kód

Pre hodnotu HTML voľby sa používa nasledujúci kód:

Nasledujúci riadok kódu sa používa v JavaScripte na prístup k hodnote atribútu hodnoty možnosti význam je odlišný od textu. Po výbere farby jQuery zobrazí viditeľný text vo výstrahe. Kód značky

Tu je návod, ako získať prístup k tejto hodnote HTML vybrať možnosť vybratý JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

K hodnote môžete pristupovať aj pomocou metódy JQuery $.val():

var selectedcolor = $("#jqueryselect").val();

Nahraďte tento riadok v príklade vyššie a kód zobrazí hodnotu krátkeho kódu/farby v atribúte value namiesto viditeľného textu.

Príklad získania hodnoty v skripte PHP

V tomto príklade získania hodnoty možnosti vybratej z rozbaľovacieho zoznamu sa formulár vytvorí pomocou značky

A tu je návod, ako sa skript PHP používa na získanie hodnoty možnosti výberu HTML:

". $_POST["selfphp"].""; } ?>

Ak formulár uvádza GET metóda, potom použite PHP pole $_GET[“”].

Úprava štýlu rozbaľovacieho zoznamu pomocou CSS

Teraz sa pozrime na to, ako definovať štýly rozbaľovacieho zoznamu - definovať také prvky formulára, ako sú tlačidlá, prepínače, textové polia na zadávanie údajov.

  • type="text" - definuje textové pole pre zadávanie údajov.
  • type="password" - definuje pole pre zadanie hesla, pričom text sa zobrazuje vo forme hviezdičiek alebo krúžkov.
  • type="checkbox" - definuje prepínač.
  • type="hidden" - definuje skrytý prvok formulára - používa sa na prenos dodatočných informácií na server.
  • size="25" - dĺžka textového poľa v znakoch.
  • maxlength="30" - maximálny povolený počet zadaných znakov.
  • 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.

    • Príklad HTML formulára | Komentáre na stránke

    <a href="https://skillmaker.ru/sk/news/rassuzhdeniya-o-semantike-koda-html-s-primerami-rassuzhdeniya-o-semantike-koda/">Príklad HTML</a> formulárov




    názov



    Mail

    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

    HTML formuláre

    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

    HTML formuláre

    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:

    Vďaka štítku musí byť umiestnený vo formulári (tag

    ). Nižšie je uvedený príklad:




    Aké sú atribúty značky select?

    Tag







    Druhý atribút je povinný , s jeho pomocou môžete prehliadaču „povedať“, že zoznam je potrebné vybrať pred odoslaním formulára, inak prehliadač odoslanie formulára zakáže a zobrazí vám zodpovedajúcu správu. Vzhľad tejto správy je úplne závislý od prehliadača a používateľ ho nemôže zmeniť. Nižšie je uvedený príklad použitia povinného atribútu:




    Tretím atribútom je veľkosť , pomocou ktorého je možné určiť počet položiek zoznamu, ktoré sa majú zobraziť. Atribút size môže obsahovať iba celé číslo. Atribút size transformuje zoznam, napríklad ak sa rovná 1, potom značku








    Zdravím všetkých čitateľov môjho blogu. Dnes vám poviem, ako vytvoriť rozbaľovací zoznam v HTML, aké značky a atribúty musíte použiť a tiež na aké účely to možno budete potrebovať.

    Vyberte značku a vytvorte rozbaľovací zoznam

    Takže rozbaľovací zoznam v html sa vytvorí pomocou párovej značky výberu, v ktorej sú umiestnené párové značky možností. Práve v nich sú zaznamenané všetky možnosti, ktoré sa po kliknutí na zoznam ponúknu. Príklad:

    Vyberte si zviera

    V tomto prípade uvidíte, čo je zobrazené medzi úvodnou a záverečnou časťou možnosti na obrazovke, a hodnota obsiahnutá v atribúte value bude odoslaná na server alebo spracovaná pomocou skriptu.

    Zoznam v html môže byť bežný alebo s viacerými možnosťami výberu. Aby bolo možné vybrať viacero položiek, musíte na výber pridať prázdny viacnásobný atribút. Ak chcete vybrať viacero hodnôt, podržte ctrl a stlačte ľavé tlačidlo myši.

    Ďalším užitočným atribútom je veľkosť . Umožňuje vám vybrať, koľko riadkov sa má zobraziť v rozbaľovacom zozname.

    Ďalší atribút je zakázaný. To robí zoznam neklikateľný a neklikateľný, ale stále viditeľný na stránke.

    Povinné – atribút html5. Ak je nastavené, formulár sa neodošle bez výberu hodnoty z rozbaľovacieho zoznamu. Vo všeobecnosti sa stáva nevyhnutnou voľbou. Aj keď tento atribút nefunguje vo všetkých prehliadačoch.

    Atribúty značky Option

    Výber v skutočnosti slúži len ako kontajner pre položky zoznamu, ktoré sa určujú pomocou značky voľby. Ako sme už zistili, má parameter value, ale okrem toho existujú aj ďalšie. Napríklad:
    Vypnuté – znemožňuje výber položky zoznamu. Zobrazí sa, ale nemôžete naň kliknúť.

    Vybraté – prvok bude predvolene vybraný. V bežnom zozname môže byť tento atribút bez hodnoty priradený iba jednej položke vo viacnásobnom zozname, môže byť priradený viacerým.

    Dôležité vysvetlenie pre správnu prevádzku

    Ak je potrebné odoslať výsledok výberu na server alebo spracovať pomocou skriptov, umiestnite výber do formulára, aby sa nevyskytli žiadne chyby. Faktom je, že rozbaľovací zoznam bol pôvodne vytvorený ako jeden z prvkov formulára.

    Na čo sa výber používa?

    Zvyčajne to môže byť pre vás užitočné, ak sa zaregistrujete na svojej webovej stránke alebo chcete vykonať prieskum. Prvok má nevýhodu - nemení sa veľmi dobre vzhľad cez css.

    V predvolenom nastavení sa po kliknutí na zoznam zobrazia položky zoznamu, nad ktorými je kurzor, zvýraznené rovnakou farbou. Ak chcete zabrániť zobrazeniu rámu po kliknutí alebo jeho zvýrazneniu inou farbou, môžete napísať nasledujúci selektor:

    Select:focus(
    obrys: 1px plná oranžová;
    }

    Rám bude teraz oranžový.

    Možnosť môže byť tiež upravená, ale keď umiestnite kurzor myši na položku, jej pozadie sa zmení na modré a z nejakého dôvodu sa to prostredníctvom štýlov nezmení.

    Možnosť(
    farba: hnedá;
    pozadie: aqua;
    }

    Mimochodom, možno niektorí z vás vedia, ako zmeniť farbu pozadia pri umiestnení kurzora myši nad položku cez css?

    To je zatiaľ všetko o značke select a jej použití. žiadne pridané vlastnosti v html na to nie je žiadne ustanovenie. Všetky ostatné operácie s ním možno vykonávať pomocou pomocou javascriptu a php. Napríklad, ak potrebujete vytvoriť zoznam na výber roku narodenia a môže ich byť 80-100 rôzne možnosti, nebudeš ich písať ručne, však?

    To je presne dôvod, prečo musíte použiť programovanie, konkrétne slučku. Dobre, toto je téma na ďalší rozhovor, ale pre dnešok sú to všetky informácie, ktoré som vám chcel povedať. S ďalšími hlavnými značkami sa môžete zoznámiť v html.

    Popis

    HTML tag môže obsahovať dve alebo viac značiek

    Šírka rozbaľovacej ponuky bude určená najdlhším textom uvedeným v značke

    Atribúty

    autofocus: Určuje, že prvok by mal byť automaticky zaostrený pri načítaní webovej stránky. Možné hodnoty pre booleovský atribút automatického zaostrovania: Príklad » formulár: Definuje formulár, ku ktorému je prvok priradený. Hodnota atribútu je identifikátor prvku
    . Tento atribút vám umožňuje umiestniť prvok Príklad »

    Poznámka: kvôli rôznymi spôsobmi pri výbere viacerých položiek a dodatočnom upozornení používateľov, že sú k dispozícii viaceré možnosti, sa odporúča použiť začiarkavacie políčka namiesto rozbaľovacieho zoznamu.

    Názov: Definuje názov rozbaľovacieho zoznamu. Dá sa použiť na prístup k údajom formulára po ich odoslaní alebo na odkazovanie na prvok v JavaScripte. veľkosť: Určuje počet viditeľných možností v rozbaľovacom zozname. Ak je hodnota atribútu size väčšia ako 1, ale menšia ako celkový počet možností v zozname, prehliadač automaticky pridá posuvník, ktorý označuje, že existuje viac možností na zobrazenie.

    Publikácie na danú tému