I prosessen med å lage en nettside eller blogg og fylle den videre med innhold, av forskjellige grunner, blir det noen ganger nødvendig å skjule en del av teksten, plassere mer omfangsrik informasjon i en blokk skjult foreløpig, men likevel vise til bruker hva som er tilgjengelig noe annet, og gi ham muligheten til å se skjult innhold uten å gå til neste linje eller side.
Tidligere ble en haug med javascript brukt for å implementere en slik løsning, men nå kan alt dette gjøres veldig enkelt ved å bruke fantastiske egenskaper.

I dag skal vi se på den enkleste måten å lage skjulte blokker med innhold på nettstedssider og i individuelle meldinger som åpnes når du klikker på et bestemt tekstelement, utelukkende ved å bruke CSS3-egenskaper. En bryter kan være et enkelt ord, en uthevet setning, en hel setning eller et informativt ikon.
Slike blokker brukes ofte på sider med mye innhold, for å gjøre det mer strukturert og kompakt er alt innhold delt inn i såkalte grupper, hvor kun overskrifter presenteres for brukeren, all tekst er skjult som standard og kan sees ved å klikke til et spesifikt element (se ovenfor).

La oss prøve å klare oss uten unødvendig vann, se på hele denne enkle mekanismen i aksjon, med et tydelig eksempel, og du kan også redigere noe hvis du ønsker det:

Eksempel nr. 1

Uvalgt og umerket tekst brukes som brytere for nedtrekksblokker med tilleggsinformasjon, med en entydig invitasjon til å klikke på den, som du må gjøre uten frykt eller tvil for å se)))

Som du ser fungerer alt mer enn perfekt, det skjulte innholdet dukker opp uten problemer og forsvinner med et lett museklikk, og samtidig brukte vi minimalt med kjørbar kode, både i html-rammeverket og i formasjonen av css-stiler. Uten å koble til flere javascript-biblioteker, med den evige bekymringen om de er deaktivert på brukerens side.
Implementering av all denne handlingen ble mulig takket være CSS3-pseudoklassen :krysset av, brukt på grensesnittelementer som alternativknapper (). Hva vi faktisk gjorde i taggen Vi tildelte typeattributtet avkrysningsboksen verdi , samt identifikatoren id="hd-1" som tilsvarer den unike identifikatoren for="hd-1" strømblokkbryter. Vi vil skjule avmerkingsboksene grundig og for alltid ved å sette displayet: ingen egenskap i class.hide.
Egentlig er det ikke noe spesielt å forklare her; hele mekanismen for å slå på og av skjulte blokker består av tre elementer:

• Avmerkingsboks - tag med mening avmerkingsboksen Egenskap type og med en spesifikk koblingsidentifikator
• Tittel (tekstbryter) - tag med en unik identifikatorverdi for attributtet til, (identifikatoren må være den samme som tagidentifikatoren input med mening avmerkingsboksen Egenskap type).
• Innholdsblokken er en div-tag, som vil inneholde, inntil bedre tider, inntil brukeren klikker, forskjellig skjult innhold (tekst, bilder, etc., etc.)

Jeg håper at det ut fra min kaotiske forklaring har blitt klart hva hele poenget er. CSS bruker nye stiler (ved å bruke pseudoklassen krysset av) for å vise en blokk med innhold som tidligere var skjult bare når brukeren klikker på et element som er knyttet til en avmerkingsboks med en unik identifikator.

Av alt dette følger det viktig notat:

Når du bruker flere skjulte blokker på samme side, må hver alternativknapp ha en unik ID som vil være forskjellig fra ID-ene i andre blokker.

Så, med ord har vi sortert ut hva som går hvor og hvorfor, nå, la oss se på html-rammeverket til hele strukturen:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Klikk her for å åpne! < div>Skjult innhold...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Klikk her for å lese mer! < div>Skjult innhold...

Klikk her for å åpne!

Klikk her for å lese mer!

Deretter går vi direkte til dannelsen av CSS-stiler, uten hvilke hele designet vil ikke fungere. Det aller minste av kode, uten noen dekorasjon, fremhevet bare bakgrunnen for rullegardinblokken for å definere for deg og vise rammen til den skjulte teksten. Du kan designe blokkene som du vil, legge til kantlinjer, runde hjørner, markere tekst eller .

1.CSS

. gjemme seg, . skjul + etikett ~ div ( vis: ingen; ) /* etikettteksttype */. skjul + etikett, . skjul: avkrysset + etikett (polstring: 0; farge: grønn; markør: peker; kant-bunn: 1px prikkete grønn; ). hide: checked + label + div ( display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; polstring: 10px; )

/* skjul avmerkingsbokser og innholdsblokker */ .hide, .hide + label ~ div ( display: none; ) /* label tekstutseende */ .hide + label, .hide:checked + label ( utfylling: 0; farge: grønn ; cursor: pointer; border-bottom: 1px prikkete grønn; ) /* utseendet til etikettteksten når bryteren er aktiv */ .hide: checked + label ( farge: rød; border-bottom: 0; ) /* når avkrysningsboksen er aktiv, vis blokker med innhold */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: innfelt 3px 3px 10px #7d8e8f; polstring: 10px; )

Dette er alt, for et asketisk eksempel, et fullstendig tilstrekkelig minimum. Men vi vil ikke være oss i det hele tatt hvis vi ikke legger til i det minste noen godbiter, og det er bedre å visuelt fortelle brukeren hvor han skal klikke.
I det andre eksemplet la jeg til et enkelt symbol i form av et pluss, som tydelig indikerer at noe annet er skjult her; når det trykkes, blir det øyeblikkelig til et minus, og jeg la til en liten animasjon til de skjulte blokkene med innhold når de vises, og alt dette utelukkende ved hjelp av magien til CSS3.

2.CSS

/* skjul avmerkingsbokser og innholdsblokker */. gjemme seg, . skjul + etikett ~ div ( vis: ingen; ) /* etikettteksttype */. skjul + etikett ( margin: 0 ; utfylling: 0 ; farge: grønn; markør: peker; display: inline-block; ) /* utseendet til etikettteksten når bryteren er aktiv */. skjul: avkrysset + etikett (farge: rød; kant-bunn: 0; ) /* når avkrysningsboksen er aktiv, vis blokker med innhold */. hide: checked + label + div ( display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f;margin-venstre: 20px;polstring: 10px; /* litt animasjon når den vises */- webkit- animasjon: fade ease- på 0. 5s; - moz- animasjon: fade letthet- på 0. 5s; animasjon: fade letthet- på 0. 5s; ) /* animasjon når skjulte blokker vises */@- moz- keyframes fade ( fra ( opasitet: 0 ; ) til ( opacity: 1 ) ) @- webkit- keyframes fade ( fra ( opasitet: 0 ; ) til ( opacity: 1 ) ) @ keyframes fade ( fra ( opacity: 0 ; ) til ( opasitet: 1 ) ). skjul + etikett: før ( bakgrunnsfarge: #1e90ff; farge: #fff; innhold: " \002 B"; display: blokk; flyte: venstre; skriftstørrelse: 14px; font-weight: fet; høyde: 16px; linjehøyde: 16px; margin: 3px 5px; tekst- align: center; bredde: 16px; - webkit- kant-radius: 50%; - moz- grense-radius: 50 %; kantradius: 50 %; ). hide: checked + label: before ( innhold: " \221 2" ; }

/* skjul avmerkingsbokser og innholdsblokker */ .hide, .hide + label ~ div ( vis: ingen; ) /* merke tekstutseende */ .hide + label ( margin: 0; utfylling: 0; farge: grønn; markør : peker; display: inline-block; ) /* utseendet til etikettteksten når bryteren er aktiv */ .hide:checked + label ( farge: rød; border-bottom: 0; ) /* når avkrysningsboksen er aktiv, vis blokker med innhold */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f ; box-shadow: innfelt 3px 3px 10px #7d8e8f; margin-venstre: 20px; polstring: 10px; /* litt animasjon når den vises */ -webkit-animation:fade ease-in 0.5s; -moz-animation:fade ease -om 0.5s; animasjon: fade ease-in 0.5s; ) /* animasjon når skjulte blokker vises */ @-moz-keyframes fade ( fra ( opacity: 0; ) til ( opacity: 1 ) ) @-webkit-keyframes fade ( fra ( opasitet: 0 ; ) til ( opasitet: 1 ) ) @keyframes fade ( fra ( opasitet: 0; ) til ( opacity: 1 ) ) .hide + label:before ( bakgrunnsfarge: #1e90ff; farge: #fff; innhold: "\002B"; display: blokk; flyte: venstre; skriftstørrelse: 14px; font-weight: fet; høyde: 16px; linjehøyde: 16px; margin: 3px 5px; tekst-align: center; bredde: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; kantradius: 50 %; ) .hide:checked + label:before ( innhold: "\2212"; )

Etter alt å dømme er metoden utvilsomt god, men som alltid, og slett ikke overraskende, oppstår det problemer med den evige fremdriftsbremsen, IE-nettleseren, pseudoklasse krysset av støtter kun versjon 9 og nyere av denne nettleseren. For eldre versjoner av IE forblir alt det samme, du må bruke javascript.

Ved å bruke skjulte avmerkingsbokser kan du enkelt implementere stilerte blokker, skyveknapper, gallerier og mye mer.

Med all respekt, Andrew

Beskrivelse

HTML-tag brukes til å lage en rullegardinliste (rullegardin) som vises når et skjemaelement klikkes og lar den besøkende velge ett av de forhåndsdefinerte alternativene.

Element

kan inneholde to eller flere tagger , som definerer de tilgjengelige valgene i rullegardinlisten. Tekst til det første underordnede elementet vil først vises i rullegardinlisten, det vil si at det vil være standardverdien for listen. Endre eller angi standardverdien for Du kan legge til det valgte attributtet til ønsket alternativ:

Volvo Saab VW Audi

Bredden på rullegardinmenyen vil bli bestemt av den lengste teksten som er spesifisert i taggen .

Attributter

autofokus: Spesifiserer at elementet automatisk skal få fokus når nettsiden lastes. Mulige verdier for det boolske autofokus-attributtet: Eksempel »

Merk: Autofokus-attributtet støttes ikke i IE9 og tidligere, og Firefox.

Deaktivert: Indikerer at elementet er inaktivt, noe som betyr at brukeren ikke vil kunne samhandle med elementet. Mulige verdier for det deaktiverte boolske attributtet:

Eksempel » form: Definerer formen elementet er knyttet til. Attributtverdien er elementidentifikatoren

. Dette attributtet lar deg plassere et element hvor som helst i dokumentet, og ikke bare som en etterkommer av elementet .

Merk: skjemaattributtet støttes ikke i Firefox.

Flere: Indikerer at flere alternativer kan velges samtidig. Flere alternativer varierer avhengig av operativsystemet:

• Windows: Hold nede CTRL-tasten for å velge flere alternativer.
• Mac: Hold nede CMD-tasten for å velge flere alternativer.

Mulige verdier for flere logiske attributter: Eksempel »

Merk: På grunn av de forskjellige måtene flere elementer kan velges på og tilleggsvarselet til brukere om at flere valg er tilgjengelige, anbefales det at du bruker avmerkingsbokser i stedet for en rullegardinliste.

Navn: Definerer navnet på rullegardinlisten. Den kan brukes til å få tilgang til skjemadata etter at den er sendt, eller for å referere til et element i JavaScript. størrelse: Angir antall synlige alternativer i rullegardinlisten. Hvis verdien av størrelsesattributtet er større enn 1, men mindre enn det totale antallet alternativer i listen, vil nettleseren automatisk legge til et rullefelt for å indikere at det er flere alternativer å vise.

HTML-tagger som definerer HTML-skjemaer på nettstedet

Vi lager nettsider og individuelle sider på Internettå kommunisere med besøkende.

HTML-skjemaer brukes til å registrere besøkende på nettstedet, for interaktive undersøkelser og stemmegivning, lar deg sende meldinger, foreta kjøp og så videre. HTML Skjemaet er laget for ett formål: å samle inn og deretter overføre informasjon for behandling med et programvareskript eller via e-post.

Eksempel HTML-skjema | Gå inn på siden

Tagger, attributter og verdier

- bestemme formen.
• name="" - definerer navnet på skjemaet.
• method="" - definerer metoden for å sende data fra skjemaet. Verdier: "get" (standard) og "post" . «Post»-metoden brukes ofte, da den gjør at store mengder data kan overføres.
• action="" - definerer url'en som dataene sendes til for behandling. I vårt tilfelle - enter_data.php ..
• - definere slike skjemaelementer som knapper, brytere, tekstfelt for dataregistrering.
• type="text" - definerer et tekstfelt for datainntasting.
• type="password" - definerer et felt for å angi et passord, med teksten vist i form av stjerner eller sirkler.
• type="checkbox" - definerer en alternativknapp.
• type="hidden" - definerer et skjult skjemaelement - brukes til å overføre tilleggsinformasjon til serveren.
• size="25" - lengden på tekstfeltet i tegn.
• maxlength="30" - maksimalt tillatt antall angitte tegn.
• value="" - definerer verdien som vil bli sendt for behandling hvis den er relatert til radioknapper eller brytere. Verdien av dette attributtet som en del av et tekstfelt eller en knapp vil vises som for eksempel Vasya eller Logg inn i eksemplet ovenfor.

Eksempel HTML-skjema | Kommentarer på siden

Navn Post

Tagger, attributter og verdier

• action="http://site/comments.php" - definerer nettadressen som data fra skjemaet skal sendes til.
• id="" - definerer navnet og identifikatoren til skjemaelementet.
• name="" - definerer navnet på skjemaelementet.
• - definer et tekstfelt som en del av skjemaet.
• cols="" - bestemmer antall kolonner i skjematekstfeltet.
• rows="" - definerer antall rader i skjematekstfeltet.

Hvis mellom plassere tekst, vil den vises inne i feltet som et eksempel som enkelt kan fjernes.

Eksempel HTML-skjema | Nedtrekksliste

Første posisjon Andre posisjon Tredje posisjon Fjerde plassering

Tagger, attributter og verdier

• - definere en liste med posisjoner å velge.
• size="" - bestemmer antall synlige listeplasseringer. Hvis verdien er 1, har vi å gjøre med en rullegardinliste.
• - bestemme plasseringene (elementene) på listen.
• value="" - inneholder verdien som vil bli sendt av skjemaet til den angitte url for behandling.
• selected="selected" - fremhever et listeelement som et eksempel.

Eksempel HTML-skjema | Liste med rullefelt

Ved å øke verdien av attributtet size="" får vi en liste med rullefelt:

Første plassering Andre plassering Tredje plassering Fjerde plassering

Første posisjon Andre posisjon Tredje posisjon Fjerde plassering

For dette alternativet, bruk multiple="multiple"-flagget, som gjør det mulig å velge flere posisjoner. Fraværet lar deg velge bare ett element.

type="submit" - definerer en knapp.

type="reset" - definerer en tilbakestillingsknapp.

value="" - definerer etiketten på knappen.

Se i tillegg:

Beskrivelse

stikkord lar deg lage et grensesnittelement i form av en nedtrekksliste, samt en liste med enkelt eller flere valg, som vist nedenfor. Det endelige utseendet avhenger av bruken av størrelsesattributtet til taggen som setter høyden på listen. Bredden på listen bestemmes av den bredeste teksten som er spesifisert i taggen , og kan også endres ved hjelp av stiler. Hvert element lages ved hjelp av en tag , som skal nestes i en beholder . Hvis du planlegger å sende listedata til serveren, må du plassere elementet inne i skjemaet. Dette er også nødvendig når listedata er tilgjengelig via skript.

Syntaks

Paragraf 1 Punkt 2

Attributter

Lar deg hoppe til en liste ved hjelp av en hurtigtast. Angir at listen skal motta fokus etter at siden er lastet inn. Blokkerer tilgang og modifikasjon av et element. Knytter en liste til et skjema. Lar deg velge flere listeelementer samtidig. Navnet på elementet som skal sendes til serveren eller åpnes via skript. Listen må velges før skjemaet sendes inn. Antall listelinjer som skal vises. Definerer sekvensen for overgang mellom elementer når du trykker på Tab-tasten

Avsluttende tag

Obligatorisk.

HTML5 IE Cr Op Sa Fx

Velg en helt Cheburashka Krokodille Gena Shapoklyak Rotte Larisa

HTML-alternativkoden brukes til å lage en rullegardinliste som lar brukeren velge ett alternativ fra et forhåndsdefinert sett med verdier.

Teksten som er synlig for brukeren kan avvike fra teksten som er spesifisert i verdiattributtet. Slik lager du en rullegardinliste:

Grønn Gul Svart

• Nedtrekkslisten opprettes ved hjelp av taggen ;
  Inne i en merkelapp
  alternativer for valg er definert ved hjelp av en tag ;
• I taggen du kan bruke verdi-attributtet for å få tilgang til det valgte alternativet ved å bruke PHP, JS, Jquery, etc.

Det er også mulig å spesifisere en CSS-klasse i stedet for å bruke en ID for å style rullegardinlisten.

I neste avsnitt vil jeg vise eksempler på bruk av HTML-rullegardinliste i JavaScript/JQuery. Eksemplene vil også vise hvordan du setter stiler bruker CSS/CSS3 og Bootstrap-rammeverk.

Eksempel på å lage en enkel nedtrekksliste

Dette eksemplet bruker HTML-valgalternativet for å lage en rullegardinliste med tre alternativer å velge mellom:

Eksemplet ovenfor bruker følgende markering for å lage en rullegardinliste:

5 10 15 20 25

Bruk av verdiattributtet

Som nevnt tidligere, kan verdien av value-attributtet avvike fra teksten som vises på siden. Du kan for eksempel vise navn på land eller farger for brukere, og bruke kortkoder i verdi-attributtet.

I følgende eksempel vil vi lage en rullegardinliste med et verdiattributt:

Se online demo og kode

For tag Følgende kode brukes:

Rødbrun Grønn Gul Blå rød

Eksempel på tilgang til det valgte alternativet i JavaScript

La oss nå lage et eksempel på tilgang til verdien av et valgt alternativ og utføre noen handlinger. Vi lager samme liste som i eksempelet ovenfor med fargevalg. Når du er valgt, klikker du på knappen for å bruke den fargen på dokumentet:

Se online demo og kode

For alternativverdi HTML brukes følgende kode:

Rødbrun Grønn Gul Blå rød Annen

Følgende kodelinje brukes i JavaScript for å få tilgang til verdien av et alternativs verdiattributt :

var seltheme = document.getElementById(“selcolor”).verdi;

Når knappen klikkes, kalles en JS-funksjon som tildeler verdien valgt i rullegardinlisten til en variabel. Denne verdien brukes til å bruke en farge på gjeldende dokument.

Tilgang til synlig tekst i JQuery

Denne gangen skal jeg bruke JQuery for å få tilgang til verdien av det valgte alternativet: både teksten og verdien . I denne demoen får jeg tilgang til den synlige teksten i en alternativkode i HTML:

Se online demo og kode

I koden for hvert alternativ i taggen

betydningen er forskjellig fra teksten. Når du har valgt en farge, viser jQuery den synlige teksten i varselet. Tag kode neste:

Rødbrun Grønn Gul Blå rød

Slik får du tilgang til denne verdien i HTML velger alternativet valgt JavaScript:

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

Du kan også få tilgang til verdien ved å bruke JQuery $.val()-metoden:

var valgt farge = $("#jqueryselect").val();

Erstatt denne linjen i eksemplet ovenfor, og koden vil vise kortkoden/fargeverdien i verdiattributtet i stedet for den synlige teksten.

Et eksempel på å få en verdi i et PHP-skript

I dette eksemplet på å få verdien av alternativet valgt fra en rullegardinliste, opprettes skjemaet ved hjelp av taggen i oppmerkingsdelen. Etter å ha valgt en farge fra rullegardinlisten, klikk på "Send"-knappen. Skjemadataene sendes til den samme PHP-filen, hvoretter den valgte fargen vises:

Se online demo og kode

Formmetoden som brukes i eksemplet er POST, så du kan få skjemaverdiene ved å bruke PHP $_POST[“”]-matrisen. Dette er skjemakoden brukt i eksemplet:

Velg en farge:

Rødbrun Grønn Gul Blå rød