Veidlapas izveide HTML valodā. Kā tiek izveidots nolaižamais saraksts html? Veidlapu sarakstu nolaižamo elementu grupu izveide

Sveiki, dārgie emuāra vietnes lasītāji. Sarežģītību izpētes ietvaros kā nākamo uzdevumu mēs turpināsim analizēt informāciju par veidlapu izveidi vietnē, izmantojot atbilstošās.

Šodien mēs iemācīsimies izveidot nolaižamie (nolaižamie) saraksti, tostarp ar atbilžu variantiem, izmantojot atlasi un opciju, kā konstruēt teksta lauks izmantojot textarea, kā arī runāt par iespēju paplašināt formu funkcionalitāti, izmantojot tagus lauku kopa, etiķete un leģenda.

Atgādināšu, ka jebkura lapā esošā veidlapa ir izveidota, izmantojot un ir paredzēta, lai ievadītu jebkādu informāciju no lietotāja un nosūtītu to serverim (piemērs -).

Diemžēl hiperteksta iezīmēšanas valodas rīki neļauj mums tieši apstrādāt šo informāciju, tāpēc ar HTML mēs veidojam tikai formas izskatu, un nepieciešamie dati tiek nosūtīti apstrādei. Šim nolūkam tīmekļa serverī tiek mērķtiecīgi izveidots īpašs fails, kas rakstīts vienā no servera valodām (visbiežāk PHP). Teiksim, lai saņemtu atsauksmes, varat izveidot mail.php failu, kas būs apstrādātājs.

Praktiski izmantojot šajā publikācijā saņemto informāciju, neaizmirstiet, kā tai vajadzētu izskatīties, kur visu redzamo lapas elementu, tostarp veidlapu, kodi vienmēr atrodas body tagā.

Šī informācija ir būtiska, jo pat tad, ja izmantojat visus mūsdienu iebūvētos izstrādātāju rīkus (atgādinu, ka pirmā pazīme šīs funkcionalitātes ieviešanā bija), jums skaidri jāsaprot galveno tagu izmantošanas mehānisms, pēc tam rediģējot HTML. kods, kura nepieciešamība rodas ik pa laikam, pārvēršas par jautru nodarbi.

2. vairākas- šis atribūts, kuram nav parametru, ļauj atlasīt vairākkārt, atšķirībā no iepriekš minētā piemēra, kur var atlasīt tikai vienu elementu (rindu). Mēģiniet atlasīt vairākas rindas šajā sarakstā vienlaikus ar peli (pa vienai jebkurā vietā, turot nospiestu taustiņu Ctrl vai izmantojot Shift, kas seko pēc kārtas):

3. Izmērs- iestata nolaižamā saraksta augstumu, t.i., parādīto rindu skaitu. Ja ir vairāku atribūts un izmērs nav norādīts (kā iepriekš minētajā piemērā), tad pēc noklusējuma tiek parādītas četras rindas, un, piemēram, ar izmēru="5" būs redzami pieci:

Opcija Textarea Label Fieldset Legend

4. Obligāti(nav parametru) - norāda, ka izvēle ir jāizdara pirms datu nosūtīšanas apstrādātājam. Ja elements no saraksta nav atlasīts, veidlapas dati netiks nosūtīti:

Opcija Textarea Label Fieldset Legend

5. autofokuss(nav svarīgi) iestata fokusu uz sarakstu uzreiz pēc lapas ielādes. Turklāt, ja lietotājs ir pieradis veikt lielāko daļu darbību ar taustiņiem, tad tieši šāda iepriekš konfigurēta fokusēšana palīdzēs izdarīt izvēli no saraksta, izmantojot tastatūras bultiņas, neizmantojot peli:

6. Atspējots(nav parametru) - bloķē piekļuvi sarakstam (atspējo to). Praksē to parasti izmanto kopā ar skriptiem gadījumos, kad nolaižamais saraksts ir jāiespējo tikai tad, ja ir izpildīti noteikti nosacījumi:

7. Veidlapa— saista sarakstu ar vienu vai vairākām formām, kurām tas pieder, bet atrodas ārpus konteinera

. Tajā pašā laikā parametrs tiek ierakstīts formas atribūta vērtības lomā globālais id atribūts, kas tiek pievienots formas tagam:

Sarakstā atlasiet opciju Textarea Label Fieldset Legend

Nejauciet atlases taga atribūtu ar galveno veidlapas izveides tagu. Iepriekš minētajā piemērā atribūts id="data" ir pievienots formas tagam, bet atribūts form="data" ir pievienots atlases tagam, kas ļāva saistīt nolaižamo sarakstu ar noteiktu veidlapu.

opciju taga atribūti

1. vērtību- nosaka vērtību no nolaižamā saraksta, kas tiks nosūtīta serverim (veidlapu apstrādātājam). Faktiski nosaukums tiek nosūtīts apstrādātājam, ko iestata atlases taga atribūts name un vērtību(šim piemēram - 1, 2, 3, 4, 5), kas atbilst atlasītajai nolaižamā saraksta rindai:

Opcija Textarea Label Fieldset Legend

2. Atspējots— bloķē atlasei nolaižamā saraksta elementu.

Opcija Textarea Label Fieldset Legend

Kā redzams piemērā, rinda "Opcija" ir neaktīva un to nevar atlasīt.

3. etiķete- parāda viena vai otra saraksta elementa teksta saturu (kas ir tā vērtība). Ja ir etiķete, tiek parādīta virkne, kas ir identiska šī atribūta vērtībai, un teksta saturs opcijas tagā tiek ignorēts. Tas pats notiek, ja saturs starp pilnībā nav.

Textarea tag Label tag Fieldset tag Legend tag

Skat. Iepriekš sniegtajā piemērā pirmā opcijas rindiņa kodā ir tukša (tabulas kreisajā pusē), bet ir norādīts parametrs label="Option tag", kā rezultātā šis teksts parādījās sarakstā (uz labajā pusē). Otrajā koda rindā kā opcijas taga saturs ir teksts "Textarea Tag", bet labajā pusē esošajā nolaižamajā sarakstā ir redzams vārds "Textarea", kas atbilst etiķetes = "Textarea" vērtībai.

4. Atlasīts- izceļ pašreizējo nolaižamā saraksta vienumu:

Opcija Textarea Label Fieldset Legend

Ja ir vairāki atribūti, var atlasīt vairāk nekā vienu elementu:

Opcija Textarea Label Fieldset Legend

optgroup taga atribūti

Ja nolaižamais saraksts ir kaut kā jāsakārto, piemēram, jāsadala grupās, tad katrai no šīm grupām tiek izmantots konteiners, kas sastāv no sākuma un noslēguma optgroup tagiem, kurā ir daļa no nolaižamā saraksta vienumiem. Tomēr šāda nolaižamā saraksta pielāgošanai ir divi atribūti.

1. etiķete- kā parametru iestata katras grupas nosaukumu:

Opcija Textarea Label Fieldset Legend

Tas pats, bet ar atlases taga vairākiem un size="7":

Opcija Textarea Label Fieldset Legend

2. Atspējots(bez vērtībām) - bloķē tās grupas elementu atlasi, attiecībā uz kuru tas ir iestatīts, turklāt neaktīvie vienumi parasti ir pelēkā krāsā:

Opcija Textarea Label Fieldset Legend

Šeit ļoti noderētu īss video:

Teksta lauks formā, izmantojot teksta apgabalu

Vēl viens vietnes formas elements, ko mēs apsvērsim, ir lauks ar iespēju tajā ievadīt vairāku rindiņu tekstu. To var izveidot, izmantojot teksta apgabala tagu. Bez noklusējuma atribūtiem šī taga lietošana nodrošinās šādu rezultātu:

Ievadiet tekstu:

Ievadiet tekstu:

Laukā varat veikt rindiņu pārtraukumus, savukārt teksts tiks pārsūtīts uz servera apstrādātāju, ņemot vērā veiktās izmaiņas. Lauku var izstiept platumā un garumā, ar peli satverot apakšējo labo stūri, kas atzīmēts ar divām diagonālām svītrām.

Tagad mēģināsim oriģinālajam kodam pievienot vairākus atribūtus ar parametriem:

1. Vārds- Norāda teksta apgabala nosaukumu kā vērtību, lai to identificētu pēc veidlapas datu iesniegšanas, kad tie tiek apstrādāti serverī.

2. Kols- lauka platums, kuru kā parametru nosaka identisku rakstzīmju skaits, kas stāv blakus, novietotas horizontāli. Noklusējuma vērtība ir 20.

3. Rindas- teksta lauka augstums, ko nosaka rindu skaits. Ja lietotāja ievadīto teksta rindiņu skaits ir lielāks par šī atribūta norādīto vērtību, labajā pusē parādīsies vertikāla ritjosla.

4. Maksimālais garums- Norāda maksimālo rakstzīmju skaitu, ko var ievietot teksta laukā. Ja limits tiek pārsniegts, turpmāka ievade nebūs iespējama.

Zemāk ir piemērs ar visiem iepriekš minētajiem atribūtiem, kuru ietekmi varat pārbaudīt pats, teksta apgabalā vienkārši ievietojot vajadzīgo burtu un rindiņu skaitu (vienu un to pašu rakstzīmi var ievadīt vairākas reizes):

Ievadiet tekstu:

Ievadiet tekstu:

5. mingarums- Norāda minimālo rakstzīmju skaitu, kas jāievada teksta apgabalā. Ja lietotājs mēģina iesniegt tekstu ar mazāku rakstzīmju skaitu, pārlūkprogramma parādīs īsu ziņojumu ar informāciju, kurā būs minēts, ka ir nepieciešams aizpildīt veidlapas saturu un cik rakstzīmes jau ir ievadītas.

7. Tikai lasīt(bez parametriem) - ja šis atribūts ir pievienots teksta apgabalam, tad teksta lauks lietotājiem nebūs pieejams un būs tikai lasāms. Bet jūs varat uz to koncentrēties (pārvietot kursoru uz lauku un noklikšķiniet ar peles kreiso taustiņu), kā arī atlasīt un kopēt (daļēji vai pilnībā) tekstu:

Vēl daži atribūti, kas ievieš papildu funkcionalitāti, aizpildot laukus:

8. Automātiskā pabeigšana- norāda, vai pārlūkprogrammai ir jādod mājieni, kad lietotājs aizpilda veidlapu, pamatojoties uz iepriekš ievadītajiem datiem, un dod iespēju automātiski ievietot atbilstošo tekstu.

Ir kopsumma divi parametri: ieslēgts(ieslēgts) un izslēgts(izslēgts). Šeit ir koda piemērs:

Ievadiet tekstu:

Šis atribūts, kas iestatīts uz "ieslēgts", darbojas tikai tad, ja lietotāja tīmekļa pārlūkprogrammā ir iespējoti veidlapas automātiskās aizpildīšanas lauki.

9. Aptinums- iestata pārlūkprogrammas rindu aplaušanas noteikumus teksta apgabalā, izmantojot trīs vērtības:

Mīksts- rakstzīmju kopa, kas neiederas laukā platumā, tiek automātiski aplauzta jaunā rindā. Tajā pašā laikā procesors teksts tiks nosūtīts kā viena rinda. Gadījumā, ja lietotājs aplauza tekstu jebkurā vēlamajā vietā, izmantojot taustiņu "Enter", tad šāds aplauzums tiek saglabāts, iesniedzot tīmekļa veidlapu.

Ievadiet tekstu:

Ievadiet tekstu:

Grūti- defise tiek veikta automātiski, ja teksts neiederas laukā platumā, un, nosūtot apstrādātājam, šādas defises vietas tiks saglabātas. Šis iestatījums tiek izmantots tikai saistībā ar atribūtu cols:

Ievadiet tekstu:

Ievadiet tekstu:

Izslēgts- atspējot rindiņu pārtraukumus. Ja drukājat teksta fragmentu bez mehāniskas pārsūtīšanas, izmantojot taustiņu "Enter", viss teksts tiks ievietots vienā rindā un parādīsies horizontāla ritjosla:

Ievadiet tekstu:

Ievadiet tekstu:

10. autofokuss(bez parametriem) — aktivizē fokusu uz teksta lauku, kad tiek ielādēta lapa ar veidlapu.

11. Atspējots- atšķirībā no tikai lasāmā atribūta (kas arī aizliedz lauka satura rediģēšanu, bet ļauj tam koncentrēties), tas pilnībā bloķē piekļuvi teksta apgabalam, kas parasti ir nokrāsots pelēkā krāsā:

Sveiciens visiem mana emuāra lasītājiem. Šodien es jums pastāstīšu, kā izveidot nolaižamo sarakstu html, kādi tagi un atribūti ir jāizmanto, kā arī kādiem nolūkiem tas var būt nepieciešams.

Atlasīt tagu un izveidot nolaižamo sarakstu

Tātad nolaižamais saraksts HTML tiek izveidots, izmantojot pārī savienotu atlases tagu, kurā tiek ievietoti pārī savienotie opciju tagi. Tieši tajās tiek ierakstītas visas iespējas, kas tiks piedāvātas, noklikšķinot uz saraksta. Piemērs:

Izvēlieties dzīvnieku

Šajā gadījumā ekrānā redzēsit to, kas tiek parādīts starp opcijas sākuma un aizvēršanas daļu, un vērtības atribūtā ietvertā vērtība tiks nosūtīta uz serveri vai apstrādāta, izmantojot skriptu.

Saraksts HTML formātā var būt parasts un ar atbilžu variantiem. Lai būtu iespējams atlasīt vairākus vienumus, atlasei jāpievieno tukšs vairāku atribūts. Lai atlasītu vairākas vērtības, turiet ctrl un nospiediet peles kreiso pogu.

Vēl viens noderīgs atribūts ir izmērs. Tas ļauj jums izvēlēties, cik rindu rādīt nolaižamajā sarakstā.

Cits atribūts ir atspējots. Tas padara sarakstu nepieejamu, lai noklikšķinātu un skatītu vienumus, bet tajā pašā laikā tas ir redzams lapā.

Nepieciešams html5 atribūts. Ja tā ir iestatīta, veidlapa netiks iesniegta, ja vien nolaižamajā sarakstā netiks atlasīta vērtība. Kopumā tā kļūst par obligātu izvēli. Lai gan atribūts nedarbojas visās pārlūkprogrammās.

opciju taga atribūti

Faktiski Select kalpo tikai kā konteiners saraksta vienumiem, tie paši tiek iestatīti, izmantojot opciju tagu. Tam ir vērtības parametrs, kā mēs jau esam noskaidrojuši, bet bez šī ir arī citi. Piemēram:
Atspējots — padara saraksta vienumu nepieejamu atlasei. Tas tiks parādīts, bet jūs nevarat uz tā noklikšķināt.

Atlasīts — elements tiks atlasīts pēc noklusējuma. Parastā sarakstā šo atribūtu bez vērtības var iestatīt tikai vienam vienumam, vairāku sarakstā - vairākiem.

Svarīgs precizējums pareizai darbībai

Ja atlases rezultāts būs jānosūta uz serveri vai jāapstrādā, izmantojot skriptus, tad ievietojiet atlasi formā, lai nerastos kļūdas. Fakts ir tāds, ka nolaižamais saraksts sākotnēji tika izveidots tieši kā viens no formas elementiem.

Kam ir atlasīts?

Parasti tas var būt noderīgi, ja reģistrējaties savā vietnē vai vēlaties veikt aptauju. Elementam ir trūkums - tas ļoti labi nemaina izskatu caur css.

Pēc noklusējuma, noklikšķinot uz saraksta, tiek parādīts zils rāmis, un saraksta vienumi, virs kuriem virza kursoru, ir iezīmēti tādā pašā krāsā. Lai, noklikšķinot, rāmis neparādītos vai tiktu iezīmēts citā krāsā, varat ierakstīt šādu atlasītāju:

select:focus(
kontūra: 1 px ciets oranžs;
}

Rāmis tagad būs oranžs.

Opciju var arī veidot stilu, taču, virzot kursoru virs vienuma, tā fons kļūst zils, un tas nez kāpēc nemainās caur stiliem.

Opcija(
krāsa: brūna
fons: ūdens;
}

Starp citu, varbūt kāds no jums zina, kā mainīt fona krāsu, virzot kursoru virs preces, izmantojot css?

Faktiski tas viss attiecas uz atlasīto tagu un tā lietojumu. Tam nav paredzētas nekādas papildu funkcijas html. Visas pārējās darbības ar to var veikt, izmantojot javascript un php. Piemēram, ja jums ir nepieciešams izveidot sarakstu dzimšanas gada izvēlei un var būt 80-100 dažādu iespēju, vai jūs tos rakstītu manuāli?

Šim nolūkam jums ir jāizmanto programmēšana, proti, cilpa. Nu, labi, šī ir tēma citai sarunai, bet šodien šī ir visa informācija, ko es gribēju jums pastāstīt. Ar citiem pamata tagiem var iepazīties html.

HTML opcijas tags tiek izmantots, lai izveidotu nolaižamo sarakstu, kas ļauj lietotājam atlasīt vienu opciju no iepriekš noteiktas vērtību kopas.

Lietotājam redzamais teksts var atšķirties no vērtības atribūtā norādītā teksta. Lūk, kā izveidot nolaižamo sarakstu:

  • Nolaižamais saraksts tiek izveidots, izmantojot tagu definējiet izvēles iespējas, izmantojot tagu
  • Tagā

Varat arī iestatīt CSS klasi, nevis izmantot ID, lai veidotu nolaižamo izvēlni.

Nākamajā sadaļā es parādīšu piemērus, kā izmantot HTML nolaižamo sarakstu JavaScript/JQuery. Piemēri arī parādīs, kā veidot stilu

Izmantojot vērtības atribūtu

Kā minēts iepriekš, vērtības atribūta vērtība var atšķirties no lapā redzamā teksta. Piemēram, varat lietotājiem parādīt valstu nosaukumus vai krāsas un vērtības atribūtā izmantot īskodus.

Nākamajā piemērā mēs izveidosim nolaižamo sarakstu ar vērtības atribūtu:

Skatiet tiešsaistes demonstrāciju un kodu

Atzīmei

Piemērs, kā piekļūt atlasītajai opcijai JavaScript

Tagad izveidosim piemēru, kā piekļūt atlasītās opcijas vērtībai un veikt dažas darbības. To pašu sarakstu kā iepriekš minētajā piemērā mēs veidojam ar krāsu izvēli. Kad tas ir atlasīts, noklikšķiniet uz pogas, lai dokumentam lietotu šo krāsu:

Skatiet tiešsaistes demonstrāciju un kodu

HTML opcijas vērtība izmanto šādu kodu:

Lai piekļūtu opcijas vērtības atribūta vērtībai, JavaScript tiek izmantota šāda koda rinda vērtība atšķiras no teksta. Kad esat izvēlējies krāsu, jQuery parāda brīdinājumā redzamo tekstu. Tag kods

Lūk, kā šai vērtībai tiek piekļūts HTML atlases opcija atlasīta JavaScript:

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

Varat arī piekļūt vērtībai, izmantojot jQuery $.val() metodi:

var atlasītā krāsa = $("#jqueryselect").val();

Aizstājiet šo rindiņu iepriekš minētajā piemērā, un kods redzamā teksta vietā atribūtā value parādīs īskoda/krāsas vērtību.

Piemērs vērtības iegūšanai PHP skriptā

Šajā nolaižamajā sarakstā atlasītās opcijas vērtības iegūšanas piemērā veidlapa tiek izveidota, izmantojot tagu

Lūk, kā PHP skripts tiek izmantots, lai iegūtu HTML atlases opcijas vērtību:

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

Ja veidlapai ir GET metode, izmantojiet PHP masīvs $_GET[""].

Nolaižamo stilu noteikšana, izmantojot CSS

Tagad apskatīsim, kā veidot nolaižamā saraksta stilu.

Šajā piemērā mēs atzīmējam

Pārlūkprogrammā tas izskatās šādi:

Izvēlnes vienumu grupēšana

Apskatīsim šādu tagu A, ko izmanto saistīto datu grupēšanai nolaižamajā sarakstā name="melns&balts"> label="baltais saraksts">

Šajā piemērā esam atlasījuši 2 grupas ar tagu . Elementa etiķetes atribūts treknrakstā norāda atlasītās grupas nosaukumu:

Nākamajā piemērā, izmantojot atspējoto Būla atribūtu, mēs atspējosim vienu grupu (" B grupa"):

</span> HTML taga atspējota atribūta izmantošanas piemērs <optgroup><span>

Mūsu piemēra rezultāts:

Saraksta un vairāku atlases atspējošana

</span> Atspējotie un vairāki taga atribūti <select><span>

Šajā piemērā mēs esam izveidojuši divus nolaižamos sarakstus. Pirmajā sarakstā mēs izmantojām atspējotu atribūtu, kas neļauj mijiedarboties ar sarakstu (to atspējo).

Otrajam sarakstam izmantojām vairāku atribūtu, kas norāda, ka sarakstā ir atļauts atlasīt vairākas opcijas vienlaikus (izmantojot ctrl operētājsistēmā Windows un caur tām komandu operētājsistēmā Mac).

Pārlūkprogrammā tas izskatās šādi:

Teksta apgabals

Mūsu piemēra rezultāts:

Teksta apgabala atspējošana

Pēc analoģijas ar iepriekš apskatītajiem elementiem, tag


type = "iesniegt" name = "submitInfo" value = "(!LANG:submit" > !}

Šajā piemērā mēs esam izveidojuši divus teksta apgabalus (element