Søger data i sql. Fuld tekstsøgning i Microsoft SQL Server

Hej kære læsere af bloggen. Som en del af vores undersøgelse af forviklinger, som den næste opgave, vil vi fortsætte med at analysere detaljerne i at oprette formularer på webstedet ved hjælp af de relevante.

I dag vil vi se på, hvordan man opretter drop-down (drop-down) lister, herunder multiple choice, ved hjælp af select og option, hvordan man konstruerer tekstfelt via tekstområde, og tal også om muligheden for at udvide funktionaliteten af ​​formularer ved at bruge tags feltsæt, etiket og forklaring.

Lad mig minde dig om, at enhver form, der findes på siden, er oprettet ved hjælp af og er beregnet til at indtaste enhver information fra brugeren og sende den til serveren (eksempel - ).

Desværre tillader hypertekst markup sprogværktøjer os ikke direkte at behandle disse oplysninger, så ved hjælp af HTML opretter vi kun udseendet af formularen, og de nødvendige data sendes til behandling. Til dette formål oprettes en speciel fil målrettet på webserveren, skrevet på et af serversprogene (oftest PHP). Lad os sige, at du for feedback kan oprette en mail.php-fil, som vil være behandleren.

Når du bruger oplysningerne fra denne publikation i praksis, så glem ikke hvordan det skal se ud, hvor koderne for alle synlige sideelementer, inklusive formularer, altid er placeret i body-tagget.

Disse oplysninger er yderst nødvendige, for selvom du bruger alle de moderne udviklerværktøjer, der er indbygget i dem (lad mig minde dig om, at det første tegn i implementeringen af ​​denne funktionalitet var), skal du klart forstå mekanismen til brug af hovedtags, så redigering af HTML-koden, hvis behov opstår fra tid til anden, vil blive til en behagelig aktivitet.

2. Mange— denne attribut, som ikke har nogen parametre, tillader flere valg, i modsætning til ovenstående eksempel, hvor du kun kan vælge ét element (linje). Prøv at markere flere linjer på denne liste med musen på én gang (en ad gangen hvor som helst, hold Ctrl-tasten nede, eller brug Shift, følg i en række efter hinanden):

3. Størrelse— indstiller højden på rullelisten, det vil sige antallet af viste linjer. Hvis multiple-attributten er til stede, og størrelsesværdien ikke er angivet (som i eksemplet ovenfor), så som standard vises fire linjer, og for eksempel med size="5" vil fem være synlige:

Option Tekstområde Label Feltsæt Legend

4. Påkrævet(har ingen parametre)—definerer, at et valg skal foretages, før data sendes til processoren. Hvis et element fra listen ikke er valgt, vil formulardataene ikke blive sendt:

Option Tekstområde Label Feltsæt Legend

5. Autofokus(gør ikke noget) - sætter fokus på listen umiddelbart efter siden er indlæst. Derudover, hvis brugeren er vant til at udføre de fleste af handlingerne ved hjælp af taster, så vil netop sådan et forudkonfigureret fokus hjælpe med at foretage valg fra listen ved hjælp af pilene på tastaturet uden brug af musen:

6. handicappet(ingen parametre) - blokerer adgang til listen (deaktiverer den). I praksis bruges det normalt i forbindelse med scripts i tilfælde, hvor du kun skal aktivere en rulleliste, når visse betingelser er opfyldt:

7. Form— formidler listen med en eller flere formularer, som den hører til, men er placeret uden for containeren

. I dette tilfælde skrives parameteren som værdien af ​​formattributten globalt attribut-id som tilføjes til formular-tagget:

Vælg Option Tekstområdelabel Feltsætforklaring fra listen

Du må ikke forveksle select tag-attributten med hovedform-tagget. I eksemplet ovenfor blev id="data"-attributten tilføjet til form-tagget, og form="data" blev tilføjet til select-tagget, hvilket gjorde det muligt at knytte rullelisten til en specifik formular.

Option Tag-attributter

1. Værdi— definerer værdien fra rullelisten, der sendes til serveren (formularprocessor). Faktisk får handleren tilsendt et navn, som er specificeret af navneattributten for select tag, og værdi værdi(for dette eksempel - 1, 2, 3, 4, 5), svarende til den valgte linje på rullelisten:

Option Tekstområde Label Feltsæt Legend

2. handicappet— blokerer valget af et rullelisteelement.

Option Tekstområde Label Feltsæt Legend

Som du kan se fra eksemplet, er "Option"-linjen inaktiv og kan ikke vælges.

3. Etiket— viser tekstindholdet (som er dets værdi) af et bestemt listeelement. Hvis etiket er til stede, udskrives en linje, der er identisk med værdien af ​​denne attribut, og tekstindholdet inde i option-tagget ignoreres. Det samme sker, hvis indholdet mellem helt fraværende.

Tag Textarea Tag Label Tag Fieldset Tag Legend

Se. I ovenstående eksempel er den første linje for valgmulighed i koden tom (i venstre side af tabellen), men parameteren label="Option Tag" er skrevet, som følge heraf vises denne særlige tekst i listen (på højre side). Den anden kodelinje indeholder teksten "Textarea Tag" som indholdet af option-tagget, men rullemenuen til højre viser ordet "Textarea" for at matche værdien af ​​label="Textarea".

4. Valgte— vælger det aktuelle rullelisteelement:

Option Tekstområde Label Feltsæt Legend

Hvis den multiple attribut er til stede, er det muligt at vælge mere end ét element:

Option Tekstområde Label Feltsæt Legend

Attributter for optgroup-tagget

Hvis rullelisten på en eller anden måde skal sorteres, f.eks. opdeles i grupper, så bruges der for hver af disse grupper en container, bestående af de åbne og afsluttende optgroup tags, som indeholder en del af rullelistens elementer. Der er dog to attributter til at opsætte en sådan rulleliste.

1. Etiket— indstiller navnet på hver gruppe som en parameter:

Option Tekstområde Label Feltsæt Legend

Det samme, men med multiple og size="7" af select-tagget:

Option Tekstområde Label Feltsæt Legend

2. handicappet(ingen værdier) - blokerer udvælgelsen af ​​elementer i gruppen i forhold til hvilken den er installeret, og inaktive elementer er normalt fremhævet med gråt:

Option Tekstområde Label Feltsæt Legend

En kort video vil være nyttig her:

Tekstfelt i en formular ved hjælp af tekstområde

Et andet formelement for webstedet, som vi vil overveje, er et felt med mulighed for at indtaste tekst med flere linjer i det. Det kan oprettes ved hjælp af tekstområde-tagget. Uden standardattributterne vil anvendelse af dette tag give følgende resultat:

Indtast tekst:

Indtast tekst:

Du kan udføre linjeskift i feltet, og teksten vil blive overført til processoren på serveren under hensyntagen til de foretagne ændringer. Feltet kan strækkes i bredden og længden ved at klikke på nederste højre hjørne, som er markeret med to diagonale striber.

Lad os nu prøve at tilføje flere attributter med parametre til den originale kode:

1. Navn- definerer navnet på tekstområdet som en værdi for at identificere det efter indsendelse af formulardata, når det behandles på serveren.

2. Cols— feltbredde, der er angivet som en parameter ved antallet af tilstødende identiske tegn placeret vandret. Standardværdien er 20.

3. Rækker— højden af ​​tekstfeltet, bestemt af antallet af linjer. Hvis antallet af tekstlinjer indtastet af brugeren er større end værdien angivet af denne attribut, vil en lodret rullepanel vises til højre.

4. Maxlængde— angiver det maksimale antal tegn, der kan placeres i tekstfeltet. Hvis grænsen overskrides, vil yderligere input ikke være mulig.

Nedenfor er et eksempel med alle ovenstående attributter, hvor effekten af ​​hver af dem kan kontrolleres selv ved blot at placere det nødvendige antal bogstaver og linjer i tekstområdet (du kan blot indtaste det samme tegn flere gange):

Indtast tekst:

Indtast tekst:

5. Minlængde— angiver det mindste antal tegn, der skal indtastes i tekstområdet. Hvis brugeren forsøger at sende en tekst med færre tegn, vil browseren vise en kort besked med information, der vil indeholde en omtale af behovet for at supplere formularens indhold, og hvor mange tegn der allerede er indtastet.

7. Læs kun(uden parametre) - hvis du knytter denne attribut til tekstområde, vil tekstfeltet ikke kunne redigeres af brugere og vil være skrivebeskyttet. Men du kan fokusere på det (flyt markøren til feltet og venstreklik), samt vælge og kopiere (delvist eller helt) teksten:

Et par flere attributter, der implementerer yderligere funktionalitet, når du udfylder felter:

8. Autofuldførelse— angiver, om browseren skal give tip, når brugeren udfylder en formular baseret på tidligere indtastede data, og giver mulighed for automatisk at indsætte passende tekst.

Har kun to parametre: på(aktiveret) og af(slukket). Her er et kodeeksempel:

Indtast tekst:

Denne attribut med værdien "on" fungerer kun, når automatisk udfyldning af formularfelter er aktiveret i en bestemt brugers webbrowser.

9. Indpakning- indstiller browserreglerne for linjeskift i tekstområdet ved hjælp af tre værdier:

Blød— et sæt tegn, der ikke passer ind i feltet i bredden, overføres automatisk til en ny linje. I dette tilfælde processoren teksten sendes som én linje. Hvis brugeren overfører tekst til et hvilket som helst ønsket sted ved hjælp af "Enter"-tasten, gemmes en sådan overførsel ved indsendelse af webformularen.

Indtast tekst:

Indtast tekst:

Hårdt— bindestreger laves automatisk, hvis teksten ikke passer ind i feltet i bredden, og når de sendes til processoren, gemmes stederne for sådanne bindestreger. Denne mulighed bruges kun i i forbindelse med attributten cols:

Indtast tekst:

Indtast tekst:

Af— deaktiver linjeskift. Hvis du udskriver et tekstfragment uden mekanisk overførsel ved hjælp af "Enter"-tasten, vil hele teksten blive placeret på én linje, og en vandret rullepanel vises:

Indtast tekst:

Indtast tekst:

10. Autofokus(har ingen parametre) - starter fokus på tekstfeltet, når siden indlæses med formularen.

11. handicappet- i modsætning til skrivebeskyttet attribut (som også forbyder redigering af feltets indhold, men gør det muligt at fokusere på det), blokerer fuldstændig adgangen til tekstområdet, som normalt er farvet gråt:

Meget ofte bliver du bedt om at gøre noget ved registrering eller opmåling på websteder valg fra rullelisten. Vælg f.eks. dit land blandt mange andre lande. Alle disse er forskellige elementer i formen, de kan designes på forskellige måder: fra enkle HTML5 til kompleks CSS3.

I dag vil vi se på et sådant eksempel på at designe et udvalgt felt ved hjælp af HTML/CSS og et ikon Font Awesome. Men vi starter som sædvanligt med dokumentmarkering.

HTML-kode

Inde i et mærke Vælg der er rullelisteelementer mulighed. Til gengæld tags Vælg Og form indlejret i en fælles beholder div. Tag form skal være til stede, hvis dataene efterfølgende skal sendes til serveren.







Placering af beholderen med klassen boks i midten af ​​vinduet.

Boks(
position: absolut;
top: 50%;
venstre: 50%;
transform: translate(-50%, -50%);
}

Vi forbinder ikonets skrifttype før det afsluttende tag på forhånd hoved.

Styling af vælgeren

Vi sætter målene for markeringsfeltet - 250x50 pixels og gør felterne til emnerne 10 pixels på alle sider.

boks vælg(
bredde: 250px;
højde: 50px;
polstring: 10px;
}

Fjernelse af rammen og streg:

Grænse: ingen;
disposition: ingen;

Vi specificerer lilla baggrundsfarve, titel, farve og skriftstørrelse for lister.

Baggrund: #ab05af;
font-family: "Russo One", sans-serif;
farve: #fff;
skriftstørrelse: 20px;

Skab en skygge omkring marken.

Box-shadow: 0 5px 20px rgba(0,0,0,.3);

Generelt vælg boks klar og virker, men det ser kedeligt ud, og trekanten, du skal ramme med musen, er meget lille. Og hvis jeg troede det, så vil designeren tænke det samme, vi skal forberede os på forhånd for forskellige muligheder.

Mest sandsynligt vil designeren erstatte den lille trekant med et ikon fra skrifttypen Font Awesome.

Det ser meget pænere ud på denne måde, men koden skal stadig skrives af en layoutdesigner. Hvad kunne løsningen være her? Vi vil ikke røre HTML-kode, og brug et pseudo-element Før.

Før pseudo-element for .box

Den første ting at gøre er at skrive ikonkoden og skrifttypenavnet ned "Font Awesome 5 Gratis". Vælg på hjemmesiden fontawesome.com det ønskede ikon, der angiver "valg", og kopier dets kode.



.box::før (
indhold: "\f150";
font-family: "Font Awesome 5 Free";
position: absolut;
top: 0;
højre: 0;
bredde: 50px;
højde: 50px;
tekst-align: center;
linjehøjde: 50px;
farve: #fff;
skriftstørrelse: 28px;
baggrund: #da00e0;
pointer-begivenheder: ingen;
}

Dernæst placerer vi det absolut, specificer dimensionerne 50x50, ikonets farve er hvid, baggrunden er lys lilla. Vi sætter en meget vigtig ejendom pointer-begivenheder: ingen. Det betyder, at pseudoelementet Før er ikke objektet for musehændelsen, men værdien ingen fortæller begivenheden "musevalg" at gå til det nederste lag og få adgang til elementet under det - den lille trekant. Trekanten er ikke forsvundet, den er lige under pseudo-elementet Før, tjener kun som dekoration. Ved at klikke på det smukke ikon virker den "grimme" trekant faktisk, og vi træffer vores valg.

Hilsen, kære læsere af blogsiden. I dag vil jeg tale om noget som HTML-formularer. Uanset motoren på dit websted (cms), vil det helt sikkert bruge formularer i en eller anden form, oprettet ved hjælp af formular- og input-tags, såvel som attributterne og parametrene Button, Checked, Value, Checkbox, Radio, Checkbox, Submit .

Nå, du kan også tilføje elementer til dette for at oprette rullelister og tekstfelter - Vælg, Valg, Tekstområde, Etiket, Feltsæt, Forklaring.

Hvorfor er der brug for formularer, og hvordan fungerer de på moderne hjemmesider?

Den samme webstedssøgningsstreng () oprettes ved hjælp af disse tags, og en søgning vil være påkrævet på dit projekt. At forstå, hvordan de er opbygget og fungerer, vil derfor overhovedet ikke hindre dig i at arbejde med designet med succes, og det vil ikke være overflødigt, hvis du selv promoverer det.

Så efter at have begrundet behovet for at studere disse elementer, tror jeg, at der ikke skulle opstå flere spørgsmål, så det er på tide at gå direkte til at studere deres mulige muligheder.

Ja, jeg vil også gerne minde dig om, at vi allerede har gennemgået en masse materialer om emnet hypertekstmarkeringssprog, for eksempel tre ) og .

I deres kerne består formularer af elementer, til oprettelsen af ​​hvilke forskellige tags indsættes fra formulartags inde i hovedbeholderen - Checked, Value, Checkbox, Radio, Checkbox, Submit osv. Vi skal blot placere dens kode i en hvilken som helst praktisk placere i webstedsskabelonen , der ved hjælp af tags og deres attributter angiver, hvordan det skal se ud.

Dette kunne være et tekstfelt med en knap til at indsende den indtastede forespørgsel, valg med radioknapper (hvor du kun kan lade en af ​​de medfølgende knapper være trykket), flere tekstfelter med en knap til at sende() og meget mere.

For eksempel, i tilfælde af "søgning" kan du ved hjælp af værdiattributten angive, hvad der præcist vil blive skrevet på knappen placeret ved siden af ​​feltet for at indtaste en forespørgsel. De data, der indtastes i formularerne, skal viderebehandles på en eller anden måde.

For eksempel, i tilfælde af feedback, vil brugeren, efter at have udfyldt feltet med sit navn, indtastet sin e-mail og teksten i beskeden og derefter klikke på send-knappen, ret til at håbe, at dataene fra formularen vil blive sendt til e-mail på webstedets forfatter. Men det er desværre ikke muligt at implementere dette ved kun at bruge ét hypertekst-markupsprog ().

Til disse formål har du brug for et specielt processorprogram, som, efter at brugeren klikker på send-knappen, tager alle data fra feedbackfelterne og sender dem via e-mail til ejeren af ​​ressourcen. Du skal angive, hvilket program der selv skal gøre dette ved at bruge Action-attributten.

Typisk er behandlingsprogrammet et script skrevet i PHP. Derfor skal du i attributten Action for Form-tagget angive stien til filen for dette script, der er placeret på din hostingserver. Lad mig give dig et eksempel på at abonnere på min blogs RSS-feed via e-mail:

Det kan virke lidt uklart i starten, men jeg tror, ​​at alt bliver klarere, efterhånden som historien fortsætter.

Formular- og input-tags til oprettelse af knapper, afkrydsningsfelter og alternativknapper

Enhver formular skal vedlægges åbnings- og lukkemærker Form. Dette er en slags beholder til deres skabelse. Dette tag har en række obligatoriske og valgfrie attributter:

  1. Navn – et unikt navn, der skal angives, hvis HTML-filen, hvor du laver noget, vil bruge flere webformularer
  2. Handling – en påkrævet attribut, der angiver stien til scriptet, hvortil dataene fra det vil blive overført til videre behandling
  3. Metode – med den kan du ændre metoden til overførsel af data fra denne webformular til handlerfilscriptet. Hvis du ikke angiver det, vil Get-metoden blive brugt som standard, som i virkeligheden hovedsageligt er beregnet til variabler og korte beskeder og også åbent at overføre data gennem browserens adresselinje. For at overføre formulardata til handlerscriptet er det stadig bedre at bruge POST metode, designet specielt til transmission af tekstbeskeder på en privat måde

Lad os se på de resterende tags, der giver dig mulighed for at oprette en række forskellige webformularer. Den mest alsidige er Input. Type-attributten skal skrives inde i den, hvilket bestemmer præcis, hvad HTML-formularen, der er oprettet ved hjælp af dette tag, vil være.

Ved at bruge Input og Type kan du oprette følgende elementer:

  1. enkeltlinjede tekstfelter (Type="Tekst")
  2. felter til at indtaste en adgangskode (Type="Password")
  3. afkrydsningsfelter (Type="Checkbox")
  4. radioknapper (Type="Radio")
  5. skjulte felter (Type="Hidden")
  6. almindelige knapper (Type="Button")
  7. knapper til at sende data til behandleren (Type="Send")
  8. knapper til at bringe webformularen til dens oprindelige tilstand (Type="Reset")
  9. felter til upload af filer til serveren (Type="File)
  10. knapper med et billede (Type="Image")

Input har ikke et afsluttende tag. Hvordan en webformular, der er oprettet ved hjælp af den, præcist vil se ud, afhænger helt af den parameter, der er angivet i Type-attributten. Hvis Type ikke er angivet, oprettes et tekstfelt som standard.

Eksempler på formularer oprettet på Input med forskellige værdier for Type

Andre input-tag-attributter og eksempler på deres brug

Lad os se på, hvad de andre attributter er nødvendige for:

  1. Navn – hvis data skal sendes til behandlerprogramscriptet, skal du angive en parameter for attributten Navn. Under dette navn vil de data, der sendes fra formularen, fremgå af informationsbehandlerprogrammet.
  2. Størrelse - dette bruges til at indstille størrelsen på feltet for den webformular, der oprettes. Værdien er angivet i antallet af tegn, der kan passe i dette felt. Hvis Størrelse ikke er angivet, vil bredden som standard være 24 tegn
  3. Maxlength - som standard er antallet af tegn, der kan indtastes i en HTML-formular, ikke begrænset, men ved at bruge Maxlength kan du indstille denne begrænsning. Du vil ikke kunne indtaste flere tegn, end der er angivet i feltet.
  4. Værdi - du kan bruge den til at angive, hvad der præcist vil blive skrevet som standard i feltet eller på knappen for indsendelse af data
  5. Markeret er en flagattribut, der kan indsættes i Input for radioknapper eller afkrydsningsfelter. I dette tilfælde vil denne alternativknap eller afkrydsningsfelt være aktiv, når siden med webformularen er indlæst (de vil allerede have et flueben)

Lad os nu se på alt eksempler på formularer med input. Udseendet af tekstfeltet ligner udseendet af adgangskodeindtastningsfeltet, så lad os kun overveje muligheden for at oprette en tekst, for eksempel for at indtaste en e-mailadresse:

Lad os nu se på at oprette en webformular med radioknapper (Radio):

Bemærk, at denne formular bruger Input-tagget to gange, én gang til at oprette hver af de to radioknapper. Desuden indeholder hver af dem attributten Navn med samme værdi (resultat), og værdien er forskellig (JA og NEJ).

Det betyder, at når du behandler det, hvis nogen af ​​switchene er valgt, vil der blive sendt en variabel, hvis navn er skrevet i Name, men værdien af ​​denne variabel vil afhænge af hvilken switch der blev valgt.

Lad os se på et eksempel på oprettelse af en webformular med afkrydsningsfelter:

Afkrydsningsfelter adskiller sig fra alternativknapper ved at give dig mulighed for at vælge flere muligheder på én gang. Navn bruges til at bestemme i handlerfilen, hvilket afkrydsningsfelt afkrydsningsfelterne er placeret i, og Value angiver den værdi, der sendes til handleren (hvis værdi ikke er angivet, vil teksten ved siden af ​​dette afkrydsningsfelt blive sendt til behandleren ).

Vælg, Option, Tekstområde, Label, Fieldset, Legend - rullelister, tekstområder og andre webformularelementer

Til at begynde med vil jeg gerne minde dig lidt om, hvad webformularer egentlig er, og hvorfor de er nødvendige på hjemmesidens sider. De er primært designet til at replikere elementer, der findes i ethvert operativsystem i en brugervenlig form: knapper, tekstindtastningsfelter, rullelister, afkrydsningsfelter, kontakter og lignende.

Alle brugere, uden nogen yderligere forklaring, forstår formålet med disse elementer, og hvis de ser en HTML-formularknap, forstår de, at de skal klikke på den.

Desuden er alle dets bestanddele (som Select, Option, Textarea, Label, Fieldset, Legend) allerede udfyldte blanks (containere), for at indsætte, som du bare skal bruge for at bruge det ønskede tag med de nødvendige attributter og parametre.

Browsere ved selv, hvordan man viser dette eller det webformularelement. Sandt nok kan visningsmulighederne for det samme element i forskellige browsere afvige lidt fra hinanden, men som regel ikke væsentligt.

At. det viser sig, at webformularer i HTML er et forsøg på at overføre nøgle elementer, der bruges i ethvert operativsystem, til hjemmesidens sider. Men hvorfor kan de være nødvendige på webstedets sider?

I princippet til samme formål, som lignende elementer bruges i operativsystemer - overførsel af data fra brugeren. I tilfælde af formularer overføres data fra brugeren til serveren, hvor de behandles af et særligt program (hypertekstmarkeringssprog tillader desværre ikke databehandling).

Selvom data kan sendes ikke kun til serveren, men også for eksempel via e-mail til den adresse, der er angivet i Action-attributten for Form-tagget. Når der sendes data fra HTML til e-mail, vil brugeren, der udfylder felterne, efter at have klikket på send data-knappen, starte standard-mail-programmet, der bruges på sin computer.

Åbningsformulartagget i dette tilfælde skulle se sådan ud:

Vælg og Option - tags på rullelisten

Alle webformularelementer, der skaber rullelistefelter, dannes på samme måde. Først indstilles containeren til kombinationsboksen ved hjælp af åbnings- og lukningsmærket Html Select. Og derefter, inde i denne container, oprettes separate containere med elementerne (elementerne) på denne liste. Dette gøres ved at åbne og lukke Option-tags.

Det viser sig noget som dette:

Men dette er et forenklet design, fordi Select og Option har en række attributter, som definerer egenskaberne og udseendet af det oprettede rullelistefelt.

  1. Navn - Du skal angive et unikt navn for dette webformularelement, der er oprettet ved hjælp af Vælg. Dette navn vil blive videregivet til serveren til datahåndteringsprogrammet som et navn for variablen. Værdien af ​​denne variabel vil være værdien af ​​attributten Værdi (indstillet i Option for hvert element) for det rullelisteelement, som brugeren vælger.
  2. Størrelse – du kan bruge den til at indstille antallet af viste elementer. Med andre ord kan du ved hjælp af Størrelse indstille højden på listen, målt i antallet af viste linjer. Hvis du ikke udtrykkeligt angiver Størrelse-værdien i Select-tagget, vil standardhøjden på rullelisten blive brugt, og den vil være anderledes, hvis Select-attributten mangler eller findes i Select-attributten:
    1. Hvis Multiple er til stede i Select, vil højden på rullelisten i webformularen som standard være lig med antallet af dens elementer. De der. Alle rullelisten med flere valgmuligheder vil blive vist. Se eksempel i flertal nedenfor. Hvis Størrelse-attributten i Vælg er indstillet til mindre end antallet af elementer, vises en rullepanel til højre.
    2. Hvis Multiple er fraværende i Select, vil højden på rullelisten i webformularen som standard være lig med én linje. De der. Kun én linje vil være synlig, og de resterende elementer vil kun være tilgængelige ved at trykke på elevatorknappen (til højre). Se eksempel nedenfor
  3. Multiple - ved at tildele denne egenskab til Select-tagget, kan du oprette en rulleliste med mulighed for at vælge flere elementer på samme tid. Læs mere om denne egenskab nedenfor.

Formularer med rullelister kan opdeles i to muligheder. I den første mulighed kan du kun vælge ét element (linje) i feltet med en rulleliste; i den anden mulighed kan du ved at holde Ctrl eller Shift nede samtidigt vælge flere af de tilgængelige elementer.

I dette tilfælde, i den anden mulighed, vil data om alle valgte elementer blive sendt til serveren. Hvilken drop-down liste, der oprettes, bestemmes af tilstedeværelsen eller fraværet af Multiple-attributten i Select-tagget.

Multiple er angivet i Vælg uden en parameter, fordi Det er simpelthen skrevet Multiple og det er det. Hvis den er til stede, vil der blive oprettet en rulleliste-webformular med mulighed for at foretage flere valg (hold Ctrl eller Shift nede).

En variant af et felt med en rulleliste, hvori der vil være flervalg muligt, vil se sådan her ud:

Til højre er et eksempel på en rullemenu med flere valg, der er baseret på koden ovenfor. Som du kan se, ved at holde Ctrl eller Shift nede kan du vælge flere elementer på samme tid.

Hvis der ikke er en Multiple-attribut i Select-tagget, kan kun ét element i denne rulleliste (række) vælges.

Et eksempel, hvor du kun kan vælge ét element, kan ses her:

Etiket Vælg SELECTED site Legend

Option Tag-attributter


I den oprettede rulleliste (ved hjælp af Vælg og Tilvalg) kan du tilføje noget som separatorer med gruppeoverskrifter, som vil adskille sig fra resten af ​​menupunkterne i skrifttypestil.

For at oprette en gruppe ud fra rullelisteelementer skal du omslutte dem i de indledende og afsluttende tags i Optgroup-formularen, og i den indledende Optgroup-tag skal du tilføje Label-attributten, som en parameter, som du skal indtaste ønsket navn på gruppen.

For eksempel sådan her:

Label Vælg
Udvalgt hjemmesideforklaring

Tekstområde - oprettelse af et tekstfelt på en formular

Der er endnu et element i webformularer, som vi ikke har overvejet - Textarea (et felt med mulighed for at indtaste tekst med flere linjer). Det er oprettet ved hjælp af det parrede HTML-tag Textarea. Desuden kan du pakke tekst i den til en ny linje, og den vil blive overført til serveren under hensyntagen til de udførte oversættelser.

Så for at oprette et tekstfelt med flere linjer skal du angive et åbnings- og lukketekstområde, og mellem dem kan du tilføje tekst, der vil være synlig, når siden med webformularen indlæses. Brugeren kan derefter slette denne tekst og skrive sin egen.

Som du kan se, er det ubrugeligt at klikke på teksten for at aktivere dette element - du skal selv klikke på det. Dette er præcis den tilstand, som Label-tagget er designet til at rette op på. Det giver dig mulighed for at gøre teksten ved siden af ​​webformularelementet klikbar, hvilket uden tvivl er vil forbedre brugervenligheden.

Men hvordan forbinder man HTML-formularelementet og teksten? For at gøre dette skal du tilføje et ID med en unik parameter til attributten, og teksten skal være omgivet af åbne og lukkede Label-tags. Og det er ikke alt. I det indledende Label-tag skal du inkludere For-attributten, hvis parameter skal være nøjagtig den samme som ID-attributten i HTML-tagget for formelementet. Det viser sig noget som dette:

Som du kan se, kan webformularelementer nu, takket være brugen af ​​Label, aktiveres ikke kun ved at klikke på det selv, men også ved at klikke på teksten ved siden af ​​det.

Fieldset og Legend - opdeling af formularen i dele

Du har sikkert ofte set, at store formularer i Html er opdelt i grupper (Fieldset), som er omgivet af en ramme, og hver sådan gruppe har sin egen titel (Legend). Dette er implementeret ved hjælp af kun to tags: Fieldset og Legend. De er parret, dvs. De skal have en åbning og en lukke.

Så for at oprette en gruppe af komponentdele skal du omslutte alle disse dele i de indledende og afsluttende Fieldset-tags. Og for at sætte en titel (Legend) for denne gruppe, skal du umiddelbart efter åbningen Fieldset skrive en konstruktion af en indledende og afsluttende Legend, mellem hvilken du skal indsætte teksten til gruppetitlen.

Her er et eksempel på oprettelse af grupper ved hjælp af Fieldset og Legend:



Held og lykke! Vi ses snart på bloggens sider

Du kan være interesseret

Vælg, Valg, Tekstområde, Etiket, Feltsæt, Forklaring - HTML-tags i form af rullelister og tekstfelter
Lister i HTML-kode - UL, OL, LI og DL tags
MailTo - hvad er det og hvordan man opretter et link i HTML for at sende en e-mail
Sådan indstilles farver i HTML- og CSS-kode, valg af RGB-nuancer i tabeller, Yandex-output og andre programmer
Hvad er hypertekstmarkeringssprog HTML, og hvordan får du vist en liste over alle tags i W3C-validatoren
Sådan indsætter du et link og et billede (foto) i HTML - IMG og A tags
Tabeller i HTML - Table, Tr og Td tags, samt Colspan, Cellpadding, Cellspacing og Rowspan til at oprette dem
Skrifttype (ansigt, størrelse og farve), Blockquote og Pre-tags - ældre tekstformatering i ren HTML (ingen CSS brugt)
Hvordan man opretter et hyperlink (A, Href, Target blank), hvordan man åbner det i et nyt vindue på siden, og også gør et billede til et link i HTML-kode

I denne artikel vil vi se på elementer, der giver dig mulighed for at oprette rullelister, lære at danne grupper på disse lister, se på, hvordan du deaktiverer elementer og endda grupper af lister, stifte bekendtskab med et element, der giver dig mulighed for at oprette et tekstfelt med flere linjer, som du senere kan bruge i HTML-formularer (element

).

Rulleliste

Det første element på listen vises normalt som valgt, men du kan tilføje en attribut til dette element valgte for at angive en foruddefineret mulighed.

Lad os

</span> Eksempel på brug af et element <select><span>

I dette eksempel tagger vi

I browseren ser det sådan ud:

Gruppering af menupunkter

Lad os se på følgende tag , som bruges til at gruppere relaterede data i en rulleliste navn = "sort-hvid" > label = "Hvidliste" >

I dette eksempel har vi fremhævet 2 grupper med tagget . Attribut etiket element angiver navnet på den valgte gruppe, med fed skrift:

I det følgende eksempel bruger den booleske attribut handicappet vi vil deaktivere en gruppe (" Gruppe B"):

</span> Et eksempel på brug af den deaktiverede attribut for et HTML-tag <optgroup><span>

Resultatet af vores eksempel:

Deaktiver liste og multivælg

</span> De deaktiverede og flere tag-attributter <select><span>

I dette eksempel oprettede vi to dropdown-lister. Til den første liste brugte vi attributten disabled, som forhindrer interaktion med listen (deaktiverer den).

Til den anden liste brugte vi attributten mange, hvilket indikerer, at det er muligt at vælge flere muligheder fra listen på én gang (via Ctrl på Windows og via Kommando på Mac).

I browseren ser det sådan ud:

Tekstområde

Resultatet af vores eksempel:

Deaktivering af tekstområdet

Analogt med de tidligere omtalte tag-elementer


type = "submit" name = "submitInfo" værdi = "submit" > !}

I dette eksempel har vi oprettet to tekstområder (elementet