I prosessen med å navigere gjennom sidene, klikker brukeren stort sett bare videre lenker for å navigere på nettsider.

Men det er klart at brukeren noen ganger trenger å gi sine egne inndatafelt... Disse typene interaksjoner inkluderer:

• registrering og pålogging på nettsteder;
• legge inn personlig informasjon (navn, adresse, kredittkortdetaljer, etc.);
• innholdsfiltrering (ved hjelp av rullegardinlister, avmerkingsbokser osv.);
• utføre et søk;
• laster opp filer.

For å imøtekomme disse behovene tilbyr HTML interaktive kontroller skjemaer:

• tekstfelt (for en eller flere linjer);
• brytere;
• avmerkingsbokser;
• rullegardinlister;
• last ned widgets;
• send inn knapper.

Disse kontrollene involverer forskjellige tagger HTML, men de fleste av dem bruker taggen ... Siden det er et selvlukkende element, bestemmes feltets type av typeattributtet:

Element

er et blokkelement som definerer interaktiv del av en nettside. Som et resultat vil alle kontroller (som f.eks , eller <button>) bør være <i>innsiden</i> element <form> .</p><p>To HTML-attributter <b>er nødvendige</b>:</p><ul><li>handling inneholder en adresse som definerer <i>hvor</i> skjemainformasjon vil bli sendt;</li><li>metoden kan være enten GET eller POST og spesifiserer, <i>hvordan</i> skjemainformasjon vil bli sendt.</li> </ul><p>Vanligvis sendes skjemainformasjon til <b>server</b>. <i>Hvordan</i> disse dataene vil deretter bli behandlet er utenfor omfanget av denne håndboken.</p><p>Tenk på et skjema som en samling kontroller som fungerer sammen for å oppnå <b>en</b> operasjon. Hvis du skrev et påloggingsskjema for nettstedet, har du kanskje <b>tre</b> Enger:</p><ul><li>e-postfeltet <input type="email"> </li><li>passordfeltet <input type="password"> </li><li>send inn-knappen <input type="submit"> </li> </ul><p>Disse tre HTML-elementene vil bli pakket inn i ett skjema <span><form action="/login" method="POST"> </span>.</p><p>Du kan på samme måte legge til et registreringsskjema på samme HTML-side, i et eget element <form> .</p><h2>Tekstfelt</h2><p>Nesten alle former krever <b>tekst</b> innspill fra brukere for å skrive inn navn, e-postadresse, passord, adresse osv. Tekstfelt i skjemaet finnes i ulike varianter.</p><p>Selv om disse feltene er veldig like og lar brukere skrive inn alle typer tekst (selv feil), gir deres type en spesifikk <b>semantikk</b> for input, spesifisere hvilken informasjon feltet er <b>må</b> inneholde.</p><p>Nettlesere kan senere endre kontrollens grensesnitt litt for å forbedre <i>interaktivitet</i> eller foreslå hvilket innhold som forventes.</p><p>Passordfeltet viser for eksempel prikker i stedet for tegn. Og feltet for tall lar deg øke / redusere verdien ved å bruke opp- og ned-tastene.</p><h2>plassholder</h2><p>Tekstbokser kan vises <b>spørre</b> tekst som forsvinner så snart noe tekst er skrevet inn.</p><p> <input type="text" placeholder="Vennligst skriv inn navnet ditt"> </p><p>Hvis du begynner å skrive noe, vil du se teksten «Skriv inn navnet ditt» forsvinne.</p><h2><label></h2><p>Siden formelementer ikke er veldig beskrivende i seg selv, innledes de vanligvis med tekst <b>merkelapp</b>.</p><p> <label>E-post</label> <input type="email"> </p><p>Mens plassholder allerede gir noen hint om hvilket innhold som forventes, har plassholdere fordelen av å være synlige til enhver tid og kan brukes sammen med andre typer skjemaelementer som avmerkingsbokser eller alternativknapper.</p><p>Mens du kan bruke korte avsnitt for å beskrive skjemaelementer, bruker du <label>er semantisk mer korrekt fordi de bare eksisterer i former. <label>kan også knyttes til et spesifikt skjemaelement ved å bruke for-attributtet som tilsvarer id-verdien til feltet.</p><p> <label for="first_name">Navn</label> <input id="first_name" type="text"> </p><p>Når du klikker på en etikett, flyttes fokus til tekstboksen og plasserer markøren inne i den. Selv om denne pakken virker ubrukelig, kommer den godt med med avmerkingsbokser og radioknapper.</p><h2>Avmerkingsbokser</h2><p><b>Avmerkingsbokser</b> er formelementer som bare har to tilstander: på eller av. De lar i utgangspunktet brukeren si ja eller nei til noe.</p><p> <input type="checkbox">Husk meg</p><p>Siden det kan være vanskelig å klikke på en liten avkrysningsboks, anbefales det at du setter avkrysningsboksen og beskrivelsen i den <label> .</p><p> <label> <input type="checkbox">Jeg er enig i betingelsene</label> </p><p>Du kan klikke på teksten "Jeg godtar vilkårene" for å bytte avmerkingsboksen.</p><p>Avmerkingsboksen er deaktivert som standard. Du kan merke det som avmerket ved å bruke det avkryssede attributtet.</p><p> <label> <input type="checkbox" checked>Bruk faktureringsadressen min</label> </p><h2>Brytere</h2><p>Du kan gi brukeren <b>liste over alternativer</b> kan velges ved hjelp av brytere.</p><p>For at dette skjemaelementet skal fungere, må HTML-koden din <b>gruppe</b> liste over radioknapper sammen. Dette oppnås ved å bruke samme verdi for navneattributtet:</p><p> <label>Familie status</label> <label> <input type="radio" name="status">Enkelt</label> <label> <input type="radio" name="status">Gift</label> <label> <input type="radio" name="status">Skilt</label> <label> <input type="radio" name="status">Enkemann</label> </p><p>Siden alle radioknapper bruker samme verdi for navneattributtet (i dette tilfellet statusverdien), vil valg av en overstyre alle andre. Bryterne er <b>gjensidig utelukkende</b>.</p><h3>Forskjellen mellom alternativknapper og avmerkingsbokser</h3><p>Selv om avmerkingsboksen eksisterer <b>av seg selv</b>, kan brytere bare vises som <b>liste</b>(som betyr minst to alternativer).</p><p>Dessuten er det å klikke på avmerkingsboksen <b>vilkårlig</b>, mens valget av en av alternativknappene er <b>obligatorisk</b>... Dette er grunnen til at det ikke er mulig å slå av bryteren hvis du velger det nærmeste alternativet. Til slutt er en av alternativknappene alltid valgt.</p><h2>Rullegardinmenyer</h2><p>Hvis antall valgmuligheter tar for mye plass, kan du bruke rullegardinmenyene <select> .</p><p>De fungerer som brytere, bare oppsettet er annerledes.</p><p> <select> <option>januar</option> <option>februar</option> <option>mars</option> <option>april</option> <option>Kan</option> <option>juni</option> <option>juli</option> <option>august</option> <option>september</option> <option>oktober</option> <option>november</option> <option>desember</option> </select> </p><h3>Flere valg fra rullegardinmenyen</h3><p>Hvis du legger til multiple-attributtet, kan du angi flere valg.</p><p> <label>Hvilke nettlesere bruker du?</label> <select multiple> <option>Google chrome</option> <option>Internet Explorer</option> <option>Mozilla Firefox</option> <option>Opera</option> <option>Safari</option> </select> </p><p>Velg flere alternativer ved å holde Ctrl (eller ⌘) og klikke. Dette kan være et godt alternativ til å bruke flere flagg per linje.</p><h2>Eksempel: komplett registreringsskjema</h2> <form action="/signup" method="POST"> <p> <label>Anke</label> <label> <input type="radio" name="title" value="MR">MR</label> <label> <input type="radio" name="title" value="Fru">Ms</label> </p> <p> <label>Navn</label> <input type="text" name="first_name"> </p> <p> <label>Etternavn</label> <input type="text" name="last_name"> </p> <p> <label>E-post</label> <input type="email" name="email"> </p> <p> <label>Telefon</label> <input type="tel" name="phone"> </p> <p> <label>Passord</label> <input type="password" name="password"> </p> <p> <label>Bekreft passordet</label> <input type="password" name="password_confirm"> </p> <p> <label>Land</label> <select name="country"> <option>Canada</option> <option>Frankrike</option> <option>Tyskland</option> <option>Italia</option> <option>Japan</option> <option>Russland</option> <option>Storbritannia</option> <option>USA</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Jeg godtar vilkårene for bruk</label> </p> <p> <button>Registrer deg nå</button> </p> </form> <p>Det er også andre skjemaelementer tilgjengelig, men vi har dekket de mest brukte.</p> <p><b>HTML-skjemaer</b> er kontroller som brukes til å samle inn informasjon fra besøkende på nettstedet.</p> <p>Nettskjemaer består av en samling tekstbokser, knapper, lister og andre kontroller som er klikkbare. Teknisk sett overfører skjemaer data fra en bruker til en ekstern server.</p> <p>For å motta og behandle skjemadata brukes nettprogrammeringsspråk, som f.eks <b>PHP</b>, <b>Perl</b>.</p> <p>Før HTML5 var nettskjemaer en samling av flere elementer. <input type="text"> , <input type="password">avsluttes med en knapp <input type="submit">... Det tok mye arbeid å style skjemaene i forskjellige nettlesere. I tillegg krevde skjemaer JavaScript for å validere inndata, og ble strippet for spesifikke inndatafelttyper for å spesifisere daglig informasjon som datoer, e-postadresser og URL-er.</p> <p><b>HTML5-skjemaer</b> løst de fleste av disse vanlige problemene ved å introdusere nye attributter, og gi muligheten til å endre utseendet til formelementer ved å <b>CSS3</b>.</p> <img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/html5_form.png' align="left" height="696" width="660" loading=lazy loading=lazy>Ris. 1. Forbedrede nettskjemaer med HTML5 <h2>HTML5-skjemaopprettelse</h2> <i> </i><h3>1. Element <form></h3> <p>Enhver form er basert på et element <form>...</form>... Det sørger ikke for dataregistrering, siden det er en beholder som holder sammen alle skjemakontrollene - <b>Enger</b>... Attributtene til dette elementet inneholder informasjon som er felles for alle skjemafelt, så du må inkludere logisk kombinerte felt i ett skjema.</p> <table class="t3">Tabell 1. Tagattributter <form> <tr><th>Egenskap</th> <th>Betydning / Beskrivelse</th> </tr><tr><td>aksept-tegnsett</td> <td>Attributtverdien er et mellomromsavgrenset <b>tegnkodingsliste</b> som skal brukes til for eksempel å sende inn skjemaet <form accept-charset="ISO-8859-1"> . </td> </tr><tr><td>handling</td> <td><b>Obligatorisk attributt</b> som spesifiserer url-en til skjemabehandleren på serveren som dataene sendes til. Det er en fil (for eksempel action.php) som beskriver hva du skal gjøre med skjemadataene. Hvis attributtverdien ikke er spesifisert, vil skjemaelementene etter innlasting av siden ta standardverdiene. <br>Hvis alt arbeidet skal utføres på klientsiden av JavaScript-skript, kan verdien # spesifiseres for handlingsattributtet. <br>Du kan også sørge for at skjemaet fylt ut av den besøkende kommer i posten din. For å gjøre dette, må du gjøre følgende oppføring: <br> <form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form> </td> </tr><tr><td>autofullfør</td> <td><br><br></td> </tr><tr><td>enctype</td> <td>Brukes til å indikere <b>MIME</b>-type data sendt med skjemaet, for eksempel enctype = "multipart / form-data". Spesifisert bare hvis metode = "post". <br>application / x-www-form-urlencoded er standardinnholdstypen, noe som indikerer at de innsendte dataene er en liste over URL-kodede skjemavariabler. Mellomromstegn (ASCII 32) vil bli kodet som +, og spesialtegn som! vil bli kodet i hex som % 21. <br>multipart / form-data - brukes til å sende inn skjemaer som inneholder filer, ikke-ASCII-data og binære data, består av flere deler, som hver representerer innholdet i et individuelt skjemaelement. <br>tekst / ren - indikerer at ren (ikke html) tekst overføres.</td> </tr><tr><td>metode</td> <td>Angir hvordan skjemadata sendes. <br>Get-metoden sender data til serveren gjennom nettleserens adresselinje. Når du genererer en forespørsel til serveren, danner alle variabler og deres verdier en sekvens som www.anysite.ru/form.php?var1=1&var2=2. Variablenavn og -verdier legges til serveradressen etter? og er atskilt med &-tegnet. Alle spesialtegn og bokstaver utenom latin er kodet i % nn-formatet, mellomrommet erstattes med +. Denne metoden bør brukes hvis du ikke overfører store mengder informasjon. Hvis du har tenkt å sende en fil sammen med skjemaet, vil ikke denne metoden fungere. <br>Postmetoden brukes til å sende store mengder data, samt konfidensiell informasjon og passord. Dataene som sendes ved hjelp av denne metoden er ikke synlige i URL-overskriften fordi de finnes i meldingens brødtekst. <br> <form action="action.php" enctype="multipart/form-data" method="post"></form> </td> </tr><tr><td>Navn</td> <td>Settene <b>skjemanavn</b> skal brukes for å få tilgang til skjemaelementer gjennom skript, for eksempel navn = "opros".</td> </tr><tr><td>novalidate</td> <td>Deaktiverer validering på knappen for å sende inn skjemaet. Attributtet brukes uten å spesifisere en verdi</td> </tr><tr><td>mål</td> <td>Spesifiserer vinduet som informasjonen skal sendes til: <br>_blank - nytt vindu <br>_selv - samme ramme <br>_parent - den overordnede rammen (hvis den eksisterer, hvis ikke, så til den gjeldende) <br>_top er vinduet på øverste nivå i forhold til denne rammen. Hvis samtalen ikke er fra en barneramme, så til samme ramme.</td> </tr></table><h3>2. Gruppering av skjemaelementer</h3> <p>Element <fieldset>...</fieldset> er ment for å gruppere elementer relatert til hverandre, og dermed dele formen inn i logiske fragmenter.</p> <p>Hver gruppe med elementer kan navngis ved hjelp av elementet <legend>som følger taggen <fieldset>... Gruppenavnet vises til venstre i den øvre rammen <fieldset>... For eksempel hvis elementet <fieldset>kontaktinformasjon er lagret:</p><p> <form> <fieldset> <legend>Kontaktinformasjon</legend> <p><label for="name">Navn <em>*</em></label><input type="text" id="name"></p> <p><label for="email">E-post</label><input type="email" id="email"></p> </fieldset> <p><input type="submit" value="sende"></p> </form> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' align="left" width="100%" loading=lazy loading=lazy>Ris. 2. Gruppering av skjemaelementer ved hjelp av <fieldset> </p><table class="t3">Tabell 2. Attributter til taggen <fieldset> <tr><th>Egenskap</th> <th>Betydning / Beskrivelse</th> </tr><tr><td>funksjonshemmet</td> <td>Hvis attributtet er til stede, er det en gruppe relaterte skjemaelementer som er inne i beholderen <fieldset>deaktivert for utfylling og redigering. Brukes til å begrense tilgangen til enkelte skjemafelt som inneholder tidligere innlagte data. Attributtet brukes uten å spesifisere en verdi - <fieldset disabled> . </td> </tr><tr><td>form</td> <td> <form>i samme dokument. Indikerer en eller flere former som denne gruppen av elementer tilhører. Attributtet støttes for øyeblikket ikke av noen nettleser.</td> </tr><tr><td>Navn</td> <td>Definerer <b>Navn</b> brukes til å referere til elementer i JavaScript, eller for å referere til skjemadata etter at skjemaet er fylt ut og sendt inn. Analogt med id-attributtet.</td> </tr></table><h3>3. Opprett skjemafelt</h3> <p>Element <input>oppretter de fleste skjemafeltene. Elementattributter varierer avhengig av typen felt som elementet brukes til å lage.</p> <p>Ved å bruke css-stiler kan du endre skriftstørrelse, skrifttype, farge og andre egenskaper til teksten, samt legge til kantlinjer, bakgrunnsfarge og bakgrunnsbilde. Bredden på feltet angis av width-egenskapen.</p> <table class="t3">Tabell 3. Tag-attributter <input> <tr><th>Egenskap</th> <th>Betydning / Beskrivelse</th> </tr><tr><td>aksepterer</td> <td>Spesifiserer typen fil som er tillatt å sende til serveren. Angitt kun for <input type="file">... Mulige verdier: <br>file_extension - tillater opplasting av filer med den angitte filtypen, for eksempel accept = ". gif", accept = ". pdf", accept = ". doc" <br>audio / * - tillater nedlasting av lydfiler <br>video / * - tillater opplasting av videofiler <br>image / * - tillater opplasting av bilder <br>media_type - indikerer medietypen til de opplastede filene.</td> </tr><tr><td>alt</td> <td>Definerer <b>alternativ tekst</b> for bilder, kun angitt for <input type="image"> . </td> </tr><tr><td>autofullfør</td> <td>Ansvarlig for å huske verdiene som er lagt inn i tekstfeltet og automatisk erstatte dem ved påfølgende inndata: <br>på - betyr at feltet ikke er beskyttet, og verdien kan lagres og hentes, <br>av - deaktiverer autofullføring for skjemafelt.</td> </tr><tr><td>autofokus</td> <td>Lar deg forsikre deg om at dette eller det inndatafeltet allerede har fokus (har blitt valgt) i den innlastede formen, og er klar til å angi en verdi.</td> </tr><tr><td>krysset av</td> <td>Attributtet sjekker om avmerkingsboksen er merket som standard ved sideinnlasting for felt av typen type = "checkbox" og type = "radio".</td> </tr><tr><td>funksjonshemmet</td> <td></td> </tr><tr><td>form</td> <td>Attributtverdien må være lik id-attributtet til elementet <form>i samme dokument. Angir ett eller flere skjemaer som dette skjemafeltet tilhører.</td> </tr><tr><td>formasjon</td> <td>Angir nettadressen til filen som skal behandle dataene som legges inn i feltene når skjemaet sendes inn. Den er kun satt for felt av typen type = "send" og type = "bilde". Dette attributtet overstyrer verdien av handlingsattributtet til selve skjemaet.</td> </tr><tr><td>formenctype</td> <td>Bestemmer hvordan skjemafeltdataene skal kodes når de sendes til serveren. Overstyrer verdien til enctype-attributtet til skjemaet. Den er kun satt for felt av typen type = "send" og type = "bilde". Alternativene er: <br>application / -x-www-form-urlencoded er standard. Alle tegn kodes før sending (mellomrom erstattes med +, spesialtegn konverteres til ASCII HEX-verdier) <br>multipart / form-data - tegn er ikke kodet <br>tekst / vanlig - mellomrom erstattes med +-tegnet, og spesialtegn er ikke kodet.</td> </tr><tr><td>formmetode</td> <td>Attributtet spesifiserer metoden som nettleseren skal bruke for å sende inn skjemadata til serveren. Den er kun satt for felt av typen type = "send" og type = "bilde". Overstyrer verdien av metodeattributtet til skjemaet. Alternativene er: <br>get er standard. Dataene fra skjemaet (navn / verdi-par) legges til url-en og sendes til serveren: url? Navn = verdi & navn = verdi <br>post - Skjemadata sendes som en http-forespørsel.</td> </tr><tr><td>formnovalidate</td> <td>Spesifiserer at skjemafeltdataene ikke skal valideres når skjemaet sendes inn. Overstyrer verdien av novalidate-attributtet til skjemaet. Kan brukes uten å spesifisere en attributtverdi.</td> </tr><tr><td>formatmål</td> <td>Bestemmer hvor svaret skal vises etter at skjemaet er sendt inn. Den er kun satt for felt av typen type = "send" og type = "bilde". Overstyrer verdien til skjemaets målattributt. <br><br><br>_parent – ​​Laster svaret til den overordnede rammen <br>_top - laster svaret i fullskjerm <br>rammenavn – Laster svaret inn i en ramme med det angitte navnet.</td> </tr><tr><td>høyde</td> <td>Attributtverdien inneholder antall piksler uten å spesifisere en enhet. Angir høyden på et skjemafelt av typen type = "bilde", for eksempel <input type="image" src="img_submit.gif" height="50">... Det anbefales å stille inn både høyde og bredde på feltet samtidig.</td> </tr><tr><td>liste</td> <td>Er en referanse til en vare <datalist>, inneholder sin id. Lar deg gi brukeren flere alternativer å velge mellom når han begynner å skrive inn en verdi i det tilsvarende feltet.</td> </tr><tr><td>maks</td> <td>Lar deg begrense tillatte numeriske datainndata til maksimalverdien; attributtverdien kan inneholde et heltall eller et brøktall. Det anbefales å bruke dette attributtet sammen med min-attributtet. Fungerer med følgende felttyper: tall, rekkevidde, dato, datoklokkeslett, datetime-lokal, måned, klokkeslett og uke.</td> </tr><tr><td>maks lengde</td> <td>Attributtet spesifiserer maksimalt antall tegn som kan skrives inn i feltet. Standard er 524288 tegn.</td> </tr><tr><td>min</td> <td>Lar deg begrense gyldig numerisk inntasting til minimumsverdien.</td> </tr><tr><td>flere</td> <td>Lar brukeren angi flere attributtverdier, atskilt med komma. Gjelder filer og e-postadresser. Spesifisert uten en attributtverdi.</td> </tr><tr><td>Navn</td> <td>Angir navnet som skal brukes for å få tilgang til elementet <form>for eksempel i css-stilark. Analogt med id-attributtet.</td> </tr><tr><td>mønster</td> <td>Lar deg definere bruk <b>vanlig uttrykk</b> syntaksen til dataene som må tillates i et spesifikt felt. For eksempel, mønster = "(3) - (3)" - hakeparenteser angir rekkevidden av gyldige tegn, i dette tilfellet - alle små bokstaver, tallet i krøllete klammeparenteser indikerer at tre små bokstaver er nødvendig, etterfulgt av en bindestrek, deretter tre sifre i området fra 0 til 9.</td> </tr><tr><td>plassholder</td> <td>Inneholder teksten som vises i inntastingsfeltet før utfylling (oftest er det et hint).</td> </tr><tr><td>skrivebeskyttet</td> <td>Det tillater ikke brukeren å endre verdiene til skjemaelementer, mens valg og kopiering av tekst er tilgjengelig. Spesifisert uten en attributtverdi.</td> </tr><tr><td>nødvendig</td> <td>Viser en melding om at dette feltet er obligatorisk. Hvis brukeren forsøker å sende inn skjemaet uten å angi den nødvendige verdien i dette feltet, vil en advarsel vises på skjermen. Spesifisert uten en attributtverdi.</td> </tr><tr><td>størrelse</td> <td>Angir den tilsynelatende bredden på margen, i tegn. Standard er 20. Fungerer med følgende felttyper: tekst, søk, tel, url, e-post og passord.</td> </tr><tr><td>src</td> <td>Angir nettadressen til et bilde som skal brukes som en knapp for å sende inn skjemadata. Spesifisert kun for feltet <input type="image"> . </td> </tr><tr><td>steg</td> <td>Brukt for elementer som krever numerisk inntasting, indikerer mengden økning eller reduksjon i verdier under justering av område (trinn).</td> </tr><tr><td rowspan="21">type</td> <td>knapp - oppretter en knapp. <br><input type="button" value="Knapp"></td> </tr><tr><td>avkrysningsboks – gjør inndatafeltet til en avmerkingsboks som for eksempel kan merkes av eller fjernes <br><input type="checkbox" name="vehicle" value="Bil">jeg har en bil</td> </tr><tr><td>farge - Genererer fargevelgere i nettlesere som støtter, og gir brukerne muligheten til å velge fargeverdier i heksadesimalt format. <br><input type="color" name="color"></td> </tr><tr><td>dato – lar deg legge inn en dato i formatet dd.mm.åååå. <br>Fødselsdag: <input type="date" name="birthday"></td> </tr><tr><td>datetime-local – lar deg legge inn dato og klokkeslett, atskilt med en stor engelsk bokstav T i henhold til mønsteret dd.mm.åååå tt: mm. <br>Fødselsdag - dag og tid: <input type="datetime-local" name="birthday"></td> </tr><tr><td>e-post – nettlesere som støtter dette attributtet vil forvente at brukeren legger inn data som samsvarer med syntaksen til e-postadresser. <br>E-post: <input type="email" name="email"></td> </tr><tr><td>fil – lar deg laste opp filer fra brukerens datamaskin. <br>Velg en fil: <input type="file" name="img"></td> </tr><tr><td>skjult – Skjuler en kontroll som ikke er synlig for nettleseren og hindrer brukeren i å endre standardverdiene.</td> </tr><tr><td>bilde - oppretter en knapp, slik at du kan sette inn et bilde i stedet for teksten på knappen. <br><input type="image" src="https://html5book.ru/wp-content/uploads/2015/04/webbutton.png" alt="Sende inn"></td> </tr><tr><td>måned – Lar brukeren angi år og måned ved å bruke mønsteret åååå-mm. <br><input type="month"></td> </tr><tr><td>tall - beregnet for å legge inn heltallsverdier. Min-, maks- og trinnattributtene angir henholdsvis øvre, nedre og avstandsverdier. Disse attributtene antas for alle varer som har numeriske verdier. Standardverdiene deres avhenger av elementtypen. <br>Angi mengden (fra 1 til 5): <input type="number" name="quantity" min="1" max="5"></td> </tr><tr><td>passord - oppretter tekstfelt i skjemaet, mens tegnene som legges inn av brukeren erstattes med stjerner, kuler eller andre ikoner satt av nettleseren. <br>Oppgi passord: <input type="password"></td> </tr><tr><td>radio - lager en radioknapp - en kontroll i form av en liten sirkel som kan slås av eller på. <br>Vegetar: <input type="radio"></td> </tr><tr><td>rekkevidde - lar deg lage et grensesnittelement som en glidebryter, min / maks - lar deg angi utvalgsområdet <input type="range" min="1" max="10" value="3"></td> </tr><tr><td>tilbakestill - oppretter en knapp som sletter skjemafeltene fra brukerangitte data. <br><input type="reset"></td> </tr><tr><td>søk - angir et søkefelt, som standard er inndatafeltet rektangulært. <br>Søk: <input type="search" name="search"></td> </tr><tr><td>send - Oppretter en standard klikkbar knapp. Knappen samler informasjon fra skjemaet og sender det til behandling. <br><input type="submit" value="sende"></td> </tr><tr><td>tekst – Oppretter tekstbokser på et skjema, og skriver ut en én-linjes tekstboks for å skrive inn tekst. <br><input type="text"></td> </tr><tr><td>tid - lar deg legge inn tid i 24-timers format ved å bruke tt:mm-malen. I støttende nettlesere vises den som en numerisk inndatakontroll med en museklikkbar verdi og aksepterer bare tidsverdier. <br>Spesifiser tiden: <input type="time"></td> </tr><tr><td>url - feltet er ment for å spesifisere URL-adresser. <br>Hovedside: <input type="url" name="homepage"></td> </tr><tr><td>uke – Det aktuelle pekerverktøyet lar brukeren velge én uke i året, og gir deretter datainntasting i nn-åååå-format. Avhengig av år kan antall uker være 52 eller 53. <br>Angi uken: <input type="week"></td> </tr><tr><td>verdi</td> <td>Spesifiserer teksten som vises på en knapp, i en boks eller tilknyttet tekst. Ikke spesifisert for felt av typen fil.</td> </tr><tr><td>bredde</td> <td>Attributtverdien inneholder antall piksler. Lar deg angi bredden på skjemafeltene.</td> </tr></table><h3>4. Tekstinntastingsfelt</h3> <p>Element <textarea>... brukes i stedet for element når du trenger å lage store tekstbokser. Teksten som vises som den opprinnelige verdien er plassert inne i taggen. Dimensjonene til feltet angis ved å bruke cols-attributtene - de horisontale dimensjonene, rader - de vertikale dimensjonene. Høyden på feltet kan stilles inn med høydeegenskapen. Alle størrelser beregnes basert på størrelsen på ett skrifttegn med monospace.

Katt

7. Knapper

Element ... oppretter klikkbare knapper. I motsetning til opprettede knapper ( , , , ), inne i elementet du kan legge inn innhold - tekst eller bilde.

For korrekt visning av elementet

forskjellige nettlesere må spesifisere type-attributtet, for eksempel, .

Knapper lar brukere sende inn data til et skjema, slette innholdet i et skjema eller utføre andre handlinger. Du kan lage rammer, endre bakgrunnen og justere teksten på knappen.

8. Avmerkingsbokser og alternativknapper i skjemaer

Avmerkingsbokser i skjemaer settes ved hjelp av konstruksjonen og bryteren med .

I motsetning til radioknapper kan flere avmerkingsbokser settes i ett skjema. Hvis det merkede attributtet er spesifisert for avmerkingsboksene, vil avmerkingsboksene allerede være merket av i de tilsvarende skjemafeltene når siden er lastet.

Element gjelder når du gjør valg ved hjelp av alternativknapper og avmerkingsbokser. Du kan velge elementet du ønsker ved å klikke på teksten knyttet til det. For å gjøre dette, må du sette inne i elementet .

HTML-skjema er et verktøy som et HTML-dokument kan sende noe informasjon til et forhåndsbestemt punkt i omverdenen, hvor informasjonen vil bli behandlet på en eller annen måte.

Det er vanskelig å snakke om skjemaer i HTML-opplæringen. Grunnen er veldig enkel: det er mye lettere å lage et HTML-skjema enn "punktet til omverdenen" som HTML-skjemaet vil sende informasjon til. I de fleste tilfeller er et slikt "punkt" et program skrevet i Pearl eller C.

Programmer som behandler data som sendes inn via skjemaer, blir ofte referert til som CGI-skript. Forkortelsen CGI står for Common Gateways Interface. Å skrive CGI-skript krever i de fleste tilfeller god kunnskap om det respektive programmeringsspråket og mulighetene til Unix-operativsystemet.

Foreløpig har PHP/FI-språket fått en viss distribusjon, instruksjonene som kan bygges inn direkte i HTML-dokumenter (dokumenter lagres som filer med filtypen * .pht eller * .php).

HTML-skjemaer sender informasjon til behandlerprogrammer i form av [variabelnavn] = [variabelverdi]-par. Variablenavn skal angis med latinske bokstaver. Variableverdier tolkes av behandlere som strenger, selv om de bare inneholder tall.

Hvordan et HTML-skjema fungerer

Skjemaet åpnes med en tag og slutter med taggen... Et HTML-dokument kan inneholde flere skjemaer, men skjemaene bør ikke være inne i hverandre. HTML-tekst, inkludert tagger, kan plasseres i skjemaer uten begrensninger.

stikkord

Inskripsjonen på knappen kan, om nødvendig, sendes til behandleren ved å introdusere attributtet NAME = [navn] i definisjonen av knappen (les "navn", fra engelsk "navn"), for eksempel:

Når du klikker på en slik knapp, vil behandleren, sammen med alle andre data, motta variabelknappen med verdien La oss gå! ...

Et skjema kan ha flere innsendingsknapper med forskjellige navn og/eller verdier. Behandleren kan dermed opptre forskjellig avhengig av hvilken send-knapp brukeren trykket på.

Hvordan HTML-skjemaer samler inn data

Det finnes andre typer elementer. ... Hvert element må inkludere NAME = [name]-attributtet, som definerer navnet på elementet (og følgelig navnet på variabelen som skal sendes til behandleren). Navnet må oppgis bare med latinske bokstaver... De fleste elementene må inkludere attributtet VALUE = "(! LANG: [verdi]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} og Dette attributtet er imidlertid ikke nødvendig siden verdien til den tilsvarende variabelen kan angis av brukeren fra tastaturet.

Grunnleggende elementtyper :

TYPE = tekst

Definerer et vindu for å legge inn en tekstlinje. Kan inneholde flere attributter SIZE = [tall] (bredden på inndatavinduet i tegn) og MAXLENGTH = [tall] (maksimalt tillatt lengde på inndatastrengen i tegn).

Eksempel:

Definerer et vindu på 20 tegn for tekstinntasting. Som standard inneholder vinduet teksten Ivan, som brukeren kan redigere. Den redigerte (eller uredigerte) teksten sendes til behandleren i brukervariabelen.

TYPE = passord

Definerer et vindu for å angi et passord. Den er helt lik teksttypen, men i stedet for tegnene i den angitte teksten, viser den asterisker (*) på skjermen. Eksempel:

Definerer et vindu på 20 tegn for å angi et passord. Maksimal tillatt passordlengde er 10 tegn. Det angitte passordet sendes til behandleren i pw-variabelen.

TYPE = radio

Definerer en alternativknapp. Kan inneholde et ekstra merket attributt (indikerer at knappen er merket). Det kan bare være én merket alternativknapp i en gruppe med alternativknapper med samme navn.

Eksempel:

9600 bps
14400 bps
28800 bps

Definerer en gruppe med tre radioknapper, signert 9600 bps, 14400 bps og 28800 bps. Den første av knappene er først merket. Hvis brukeren ikke sjekker en annen knapp, vil modemvariabelen med en verdi på 9600 bli sendt til behandleren. Hvis brukeren velger en annen knapp, sendes modemvariabelen med en verdi på 14400 eller 28800 til behandleren.

TYPE = avkrysningsboks

Spesifiserer en firkant som skal markeres. Kan inneholde et valgfritt avkrysset attributt (indikerer at firkanten er krysset av). I motsetning til radioknapper, kan en gruppe ruter med samme navn ha flere markerte ruter.

Eksempel:

Personlige datamaskiner
Arbeidsstasjoner
LAN-servere
Internett-servere

Definerer en gruppe på fire firkanter. Den andre og fjerde ruten er innledningsvis merket. Hvis brukeren ikke gjør noen endringer, vil to variabler bli sendt til behandleren: comp = WS og comp = IS.

TYPE = skjult

Definerer et skjult dataelement som ikke er synlig for brukeren når et skjema fylles ut og sendes til behandleren uendret. Noen ganger er det nyttig å ha et slikt element i et skjema som blir omarbeidet fra tid til annen, slik at behandleren kan vite hvilken versjon av skjemaet det har å gjøre med. Du kan enkelt finne på andre mulige brukssaker selv.

Eksempel:

Definerer den skjulte variabelversjonen, som sendes til behandleren med en verdi på 1.1.

TYPE = tilbakestill

Bestemmer knappen som, når den klikkes, returnerer HTML-skjemaet til sin opprinnelige tilstand. Siden ingen data sendes til behandleren når denne knappen brukes, kan det hende at en tilbakestillingsknapp ikke har et navneattributt.

Eksempel:

Definerer en Clear Form Fields-knapp som returnerer HTML-skjemaet til sin opprinnelige tilstand når det klikkes.

Foruten elementene , HTML-skjemaer kan inneholde menyer og felt for å skrive inn tekst .</p> <p>Meny <SELECT>av n elementer ser slik ut:</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[verdi 1]">[tekst 1] <OPTION VALUE="[verdi 2]">[tekst 2] ... <OPTION VALUE="[n verdi]">[tekst n]</SELECT> </p><p>Som du kan se, starter menyen med taggen <SELECT>og slutter med taggen</SELECT>... stikkord <SELECT>inneholder det nødvendige NAME-attributtet, som spesifiserer navnet på variabelen som menyen genererer.</p> <p>stikkord <SELECT>kan også inneholde et MULTIPLE-attributt, hvis tilstedeværelse indikerer at flere elementer kan velges fra menyen. De fleste nettlesere viser menyer <SELECT MULTIPLE>i form av et vindu der menyelementene er plassert (høyden på vinduet i linjer kan angis med SIZE = [nummer]-attributtet). Meny <SELECT>i de fleste tilfeller vises den som en rullegardinmeny.</p> <p>stikkord <OPTION>definerer et menyelement. Det nødvendige VALUE-attributtet angir verdien som skal sendes til behandleren hvis dette menyelementet er valgt. stikkord <OPTION>kan inkludere et avkrysset attributt som indikerer at elementet er sjekket som standard.</p> <h3>La oss se på et lite eksempel:</h3> <SELECT NAME="selection"> <OPTION VALUE="valg 1" checked>valg 1 <OPTION VALUE="alternativ 2">Alternativ 2 <OPTION VALUE="alternativ 3">Alternativ 3</SELECT> <p>Denne kodebiten definerer en meny med tre elementer: Alternativ 1, Alternativ 2 og Alternativ 3. Alternativ 1 er valgt som standard. Behandleren vil bli sendt til en valgvariabel hvis verdi kan være alternativ1 (standard), alternativ2 eller alternativ3.</p> <p>Etter alt vi har lært så langt, elementet <TEXTAREA>kan virke ganske enkelt. For eksempel:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50>Og her er adressen din...

Alle attributter er obligatoriske. NAME-attributtet definerer navnet som innholdet i vinduet skal sendes under til behandleren (i eksemplet adresse). ROWS-attributtet setter høyden på vinduet i rader (i eksemplet - 5). COLS-attributtet angir bredden på vinduet i tegn (i eksemplet - 50).

Tekst plassert mellom tagger og, representerer innholdet i standardvinduet. Brukeren kan redigere den eller ganske enkelt slette den.

Det er viktig å vite at russiske bokstaver i vinduet når de sendes til en behandler, kan de konverteres til deres tilsvarende symbolske objekter.</p> <h3>Eksempel:</h3> <p>For å demonstrere bruken av HTML-skjemaer, skrev jeg et lite PHP-program som ligger på:</p><p>Http://206.31.82.215/hp/nc/fd-win.pht</p><p>De første dataene vil bli sendt til dette programmet ved hjelp av skjemaet beskrevet i eksempel 12:</p><p> <HTML> <HEAD> <TITLE>Eksempel 12</TITLE> </HEAD> <H1>En litt mer kompleks form</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Fortell oss litt om deg selv...</H2> <P>Det er slett ikke nødvendig å oppgi autentiske data. For demonstrasjonsformål er fiktive også fine.</P> <P>Navn: <INPUT TYPE=text SIZE=40 NAME=fn><BR>Etternavn: <INPUT TYPE=text SIZE=40 NAME=ln><BR>Gulv: <INPUT TYPE=radio NAME=gender VALUE="mann" checked>mann <INPUT TYPE=radio NAME=gender VALUE="hunn">hunn <BR>Alder: <INPUT TYPE=text SIZE=5 NAME=age>år <BR> <INPUT TYPE=submit VALUE="Start behandler"></P> </FORM> </BODY> </HTML> </p><p>Fyll ut HTML-skjemaet, klikk på knappen og se hva som skjer ...</p> <p><b>Et lite triks <br>eller hvordan du sender skjemaet per post</b></p><p>Alt dette er flott, vil skeptikere si, men hvorfor trenger folk HTML-skjemaer som ikke har noe å behandle dem med? Dette er delvis sant, men bare delvis.</p> <p>HTML gir deg en ganske kraftig mekanisme for å sende skjemainnhold via e-post. Slik ser det ut i praksis.</p> <p>La oss si at vi endret litt på eksempel 12. I stedet for linjen</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>vi gikk inn på linjen</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Vær oppmerksom på at vi endret kodingsalgoritmen til tekst / vanlig, det vil si at vi faktisk har slått av koding helt.</p> <p>Anta at nå som brukeren har spesifisert, er fornavnet Ivan, etternavnet er Petrov, det mannlige kjønnet og alderen er 22 år. Nå er spørsmålet: hva skjer hvis brukeren klikker på Kjør Handler-knappen?</p> <p>Svaret er enkelt. Følgende melding vil automatisk sendes til bruker@mail.box via e-post:</p><p>Fn = Ivan ln = Petrov kjønn = mannlig alder = 22</p><p>Dessverre vil ikke alle brukere kunne bruke dette HTML-skjemaet. Faktum er at alt arbeidet med å komponere en melding og starte e-postprogrammet for å sende den faktisk overtas av brukerens nettleser. Dette betyr at konfigurasjonen av brukerens Internett-tilgang må sikre samtidig drift av Hypertext Transfer Protocol og Outbound Mail Delivery Protocol. Dette er ikke alltid mulig. Men selv om dette ikke er mulig, vil det ikke skje noe fatalt. Nettleseren vil bare gi deg en feilmelding.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p>God dag, elskere av webutvikling og de som ønsker å lage sin egen nettside. Før det var alle publikasjonene mine viet til hovedelementene i språket, hvordan lage ulike innholdsobjekter, formatere dem, strukturere dem osv. Når du har mestret de tidligere emnene, kan du allerede lage en ganske god nettside. Den ville imidlertid vært ufullstendig uten dagens tema: "Opprette skjemaer i html".</p> <p>Denne delen i språket er veldig viktig. Vær derfor spesielt oppmerksom på studien, ellers kan ikke nettressursen du har opprettet slippes ut i produksjon. Dermed vil du, etter å ha lest artikkelen, vite hva du trenger for å bruke skjemaer, med hvilke tagger de lages, og du kan også prøve ut konkrete eksempler i praksis. La oss komme i gang!</p> <h2>Hva er form og hvordan fungerer det</h2> <blockquote> <p><b>Formen</b>- dette er et av de viktigste objektene, som er beregnet for utveksling av informasjonsdata mellom serveren og brukeren.</p> </blockquote> <p>Enkelt sagt, hvis du vil opprette en nettbutikk med muligheten til å bestille produkter på nettstedet, be om registrering på en nettressurs og jobbe med kontoer, eller gi kundene tilbakemeldinger fra bedriftsledere, kan du ikke klare deg uten skjemaer.</p> <blockquote> <p>Skjemaet settes ved hjelp av et spesielt element i html-språket <b><form> </b>.</p> </blockquote> <p>Merk at et kodedokument kan inneholde flere tag-deklarasjoner <b><form> </b>, men bare én forespørsel kan sendes til serveren for å behandle dataene. Det er grunnen til at informasjonen som legges inn av brukeren i feltene som er utpekt for dette og refererer til forskjellige skjemaer, ikke bør være avhengig. Det er heller ikke tillatt å lage skjemaer nestet i hverandre.</p> <p>For de utålmodige og ivrige etter å ta en rask titt på kodevisningen, har jeg lagt ved et enkelt eksempel på bruk av et panel med et tekstfelt for et passord med en knapp:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Eksempel</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Eksempel</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>Det er kanskje ikke helt klart nå hva og hvordan som samhandler i dette lille programmet, men jeg garanterer at etter å ha lest hele artikkelen, vil du kunne lage applikasjoner mange ganger vanskeligere.</p> <h2>Sender data til serversiden</h2> <p>For å sende den innskrevne (eller valgte) informasjonen i dialogboksen, må du bruke standardmekanismen - <b>Send inn-knapp</b>.</p> <blockquote> <p>Koden for en slik metode ser slik ut: <b><input type="submit"> </b></p> </blockquote> <p>Når den presenterte linjen er lansert, vil en knapp med påskriften: "Send" vises.</p> <p>En annen måte å sende data til serversiden på er ved å trykke Enter i dialogboksen.</p> <p>Etter å ha bekreftet sendingen av den angitte informasjonen, går den ikke umiddelbart til serveren. Først behandles den av nettleseren, noe som resulterer i formen "navn = verdi".</p> <p>Attributtparameteren er ansvarlig for navnet <b>type</b> stikkord <b><input> </b>, og for verdien - dataene som er lagt inn av brukeren. Deretter sendes den transformerte strengen til behandleren, som oftest settes i attributtet <b>handling</b> element <b><form> </b>.</p> <p>Handlingsparameteren i seg selv er ikke nødvendig, og i noen øyeblikk er den ikke nødvendig i det hele tatt. For eksempel, hvis en side er skrevet med php eller js, foregår behandlingen på den gjeldende siden og koblinger er ikke nødvendig.</p><p>For en bedre forståelse av hele bildet av funksjonen til nettstedet, vil jeg legge til at arbeidet med data på serveren utføres på andre språk. Så, server-side språk er: Python, php, C-lignende språk (C #, C, etc.), Java og andre.</p> <p>Nå vil jeg gjerne stoppe opp og fortelle mer om elementet <b><input> </b>... Enkelt sagt, altså <b><input> </b> nødvendig for å lage tekstfelt, alternativknapper, forskjellige knapper, skjulte felt, avmerkingsbokser og andre objekter.</p> <p>Taggen trenger ikke å være sammenkoblet med <b><form> </b>, men hvis du trenger å behandle brukerposter eller legge dem inn, for eksempel i en database, kan du ikke klare deg uten en beholder.</p> <p>Hovedattributtene til dette elementet i hypertekst-markeringsspråket er:</p> <ul><li><b>Tekst</b>- lager et tekstfelt;</li> <li><b>Sende inn</b>- oppretter en knapp for å sende data til serveren;</li> <li><b>Bilde</b>- er ansvarlig for knappen med et bilde;</li> <li><b>Nullstille</b>- setter en knapp for å fjerne skjemaet;</li> <li><b>Passord</b>- setter et tekstfelt spesifikt for passord;</li> <li><b>Avmerkingsboks</b>- er ansvarlig for feltene med flagg;</li> <li><b>Radio</b>- er ansvarlig for feltene med valg av ett element;</li> <li><b>Knapp</b>- oppretter en knapp;</li> <li><b>Skjult</b>- brukes til skjulte felt;</li> <li><b>Fil</b>- setter feltet ansvarlig for å sende filer.</li> </ul><h2>Metoder for informasjonsoverføring</h2> <p>Det er 2 måter å overføre brukerdata til serversiden på: <b>Få</b> og <b>Post</b>... Disse metodene gjør det samme, men de skiller seg betydelig fra hverandre. Derfor, før du spesifiserer noen av dem, la oss bli kjent med funksjonene deres.</p> <table><tbody><tr><td width="260"> </td> <td width="260">Post</td> <td width="260">Få</td> </tr><tr><td width="260">Størrelse på dokumenter som skal overføres</td> <td width="260">Begrenset til serversiden.</td> <td width="260">Maksimalt - 4 KB.</td> </tr><tr><td width="260">Hvordan sendt informasjon vises</td> <td width="260">Bare tilgjengelig når den vises gjennom nettleserutvidelser eller andre spesielle programvareprodukter.</td> <td width="260">Umiddelbart tilgjengelig for alle.</td> </tr><tr><td width="260">Bruke bokmerker</td> <td width="260">Det er ingen måte å legge til bokmerker, siden forespørsler ikke gjentas (alle sider lenker til samme adresse).</td> <td width="260">Enhver side med en forespørsel kan lagres i bokmerker og gå til den etter en stund.</td> </tr><tr><td width="260">Buffer</td> <td width="260">Basert på forrige avsnitt er alle forespørsler på én side.</td> <td width="260">Hver side kan bufres separat.</td> </tr><tr><td width="260">Formålet</td> <td width="260">Brukes til å sende store filer (bøker, bilder, videoer, etc.), meldinger, kommentarer.</td> <td width="260">Flott for å finne forespurte verdier på en nettressurs eller for å sende korte tekstmeldinger.</td> </tr></tbody></table><p>For å indikere hvilken av de to metodene for dataoverføring nettleseren skal fungere med, i elementet <b><form> </b> bruk den angitte parameteren <b>metode</b>(for eksempel, <b>metode = "innlegg"</b>).</p> <p><img src='https://i2.wp.com/romanchueshov.ru/wp-content/uploads/2016/07/prostaia-forma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>La oss se på et annet eksempel. La oss lage et skjema der du må skrive inn dine personlige data (for- og etternavn, fødselsdato) og komme opp med et passord. Etter det sender vi alt dette til serveren ved hjelp av metoden <b>Post</b>.</p> <p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>POST metode</title> </head> <body> <p>Skriv inn dine personlige data!</p> <form action="handler.php" method="post"> <p><input name="name" value = "Navn"> <input name="fam" value = "Etternavn"> <input type="date" name="calendar" value="2016-06-11" max="2016-07-31" min="2016-06-01"> <input type="password" name="pass" value = "Passord"> </p> <p><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>For å angi datoen, er det for eksempel brytere for datoen for hver av parameterne (dag, måned og år), samt for enkelhets skyld et rullegardinpanel med selve kalenderen.</p> <h2>Oppretting av registreringspanel</h2> <p>Grunnleggende tagger og attributter er gjennomgått. Det er derfor tiden er inne for å lage et fullverdig registreringsskjema ved hjelp av stylet css-oppmerking og validering av inndataene. Selvfølgelig vil vi ikke kunne se på serverarbeidet med dem, men vi vil gi design og viktige detaljer.</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>registrering</title> <style> </style> </head> <body> <form> <fieldset> <legend>registrering på nettsiden</legend> <h4> </h4> <p>Navn: <input name="name" autofocus required ></p> <p>Etternavn: <input name="fam" required></p> <p>E-post: <input type="email" required></p> <p>Passord: <input type="password" name="pass" required></p> <p>Gjenta passord: <input type="password" name="pass" required></p> <p><input type="submit" value="Registrer deg nå"></p> </fieldset> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>registrering</title> <style> body { background-color:#98FB98; background-attachment: fixed; } form{ background-color:#AEEEEE; Color: #006400; font-size:15px; } h4 { color: red; text-align: center; } p { text-align: center; } input { Color: #006400; font-size:15px; border: 5px ridge #98FB98; background-color:#fff; } </style> </head> <body> <form> <fieldset> <legend>registrering på nettsiden</legend> <h4>For det etterfølgende korrekte arbeidet i vår tjeneste, vennligst oppgi riktige data!</h4> <p>Navn: <input name="name" autofocus required ></p> <p>Etternavn: <input name="fam" required></p> <p>E-post: <input type="email" required></p> <p>Passord: <input type="password" name="pass" required></p> <p>Gjenta passord: <input type="password" name="pass" required></p> <p><input type="submit" value="Registrer deg nå"></p> </fieldset> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>Jeg anbefaler deg å lagre denne programkoden i et dokument med .html-utvidelsen og utf-8-koding, og åpne sistnevnte i et nettleservindu. Før du vil dukke opp i all sin prakt et panel for registrering med felt for inntasting av fornavn, etternavn, e-post og passord med en repetisjon. Merk at når siden starter, plasseres markøren umiddelbart i den første tekstboksen. Denne teknikken oppnås gjennom attributtet <b>autofokus</b>.</p> <p><img src='https://i0.wp.com/romanchueshov.ru/wp-content/uploads/2016/07/krasivai-forma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Begynn å fylle ut feltene, la ett være uendret, og klikk på "Registrer"-knappen. Som du allerede har lagt merke til, vil ikke skjemaet sendes inn, siden hvert element har <b>< </b><b>input></b> attributtet er spesifisert <b>nødvendig</b>... Den setter de merkede feltene etter behov.</p> <p>Et annet interessant poeng er å spesifisere typen <b>type = "e-post"</b> som dukket opp i. Ved bruk av denne typen felt kontrolleres automatisk den angitte informasjonen for korrekthet. Ved feil sendes ikke skjemaet til serveren.</p> <p>Så utgivelsen har nådd slutten. I den prøvde jeg å samle maksimalt med viktig og relevant kunnskap om skjemaer. Jeg håper du fant det nyttig! Jeg ville vært veldig takknemlig hvis du slutter deg til abonnentene mine og forteller vennene dine om bloggen.</p> <p>Ha det!</p> <p>Vennlig hilsen, Roman Chueshov</p> <p>Lese: <b>333 ganger</b></p> <p>Skjemaer er laget for å sende data fra en bruker til en webserver. Skjemaer i HTML kan bestå av tekstbokser og tekstområder, avmerkingsbokser og alternativknapper og nedtrekkslister. Disse er alle formelementer. Hvert element tjener til å formidle en viss mening til nettstedet. <br>I kjernen er et HTML-skjema en nettside der du ser områder for å legge inn informasjonen din. Etter at du har fylt ut skjemaet og klikker på send-knappen, pakkes informasjonen fra skjemaet og sendes til webserveren for behandling av et serverskript (behandlerfil). Etter behandling returneres en annen nettside til deg som svar. Følgende figur viser tydelig hvordan skjemaet fungerer:</p> <p>Det er ikke noe vanskelig å lage HTML-skjemaer. Den enkleste måten å få en ide om skjemaer på er å analysere litt HTML-kode og deretter se hvordan det fungerer. Følgende eksempel viser syntaksen for å lage et enkelt HTML-skjema:</p> <h3>Eksempel: Enkelt HTML-skjema</h3> <ul><li>Prøv selv"</li> </ul><p>Min første form: <br>Navn: <input type="text" name="firstname" value=""><br>Etternavn: <input type="text" name="lastname" value=""><br><input type="submit"></p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Enkel form</title> </head><br><body> <form action="action_form.php" method="POST"> <p>Min første form: <br>Navn: <input type="text" name="firstname" value=""><br>Etternavn: <input type="text" name="lastname" value=""><br> <input type="submit"> </p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Element <b><form> </b> </h2> <p>Skjemaer settes inn på nettsider ved hjelp av elementet <b><form> </b>... Det er en beholder for alt innholdet i et skjema, inkludert elementer som tekstbokser og knapper, samt andre HTML-koder. Den kan imidlertid ikke inneholde et annet element. <b><form> </b> .<br>For å sende skjemaet til serveren, bruk "Send"-knappen, samme resultat vil fås hvis du trykker på "Enter"-tasten i skjemaet. Hvis "Send"-knappen ikke finnes på skjemaet, kan "Enter"-tasten brukes til å sende inn. <br>De fleste elementattributter <b><form> </b> påvirke behandlingen av skjemaet, ikke utformingen. De vanligste er <b>handling</b> og <b>metode</b>... Egenskap <b>handling</b> inneholder URL-en som informasjonen i skjemaet vil bli sendt til for behandling av serveren. Egenskap <b>metode</b> er HTTP-metoden som nettlesere skal bruke for å sende inn skjemadata.</p> <h2>Element <b><input> </b> </h2> <p>Nesten alle skjemafelt opprettes ved hjelp av elementet <b><input> </b>(fra engelsk input - input). Gjenstandens utseende <b><input> </b> endres avhengig av verdien av attributtet <b>type</b>:</p><p> <input type="значение"> </p><p>Her er noen av attributtverdiene <b>type</b>:</p> <h2>Tast inn tekst og passord</h2> <p>En av de enkleste typene skjemaelementer er en tekstboks, som lar deg skrive inn tekst på en enkelt linje. Denne typen tekstinntasting er angitt som standard, og derfor er det enlinjefeltet som vises hvis du glemmer å spesifisere attributtet <b>type</b>... For å legge til et enkelt linje tekstinntastingsfelt i et skjema, gå inn i elementet <b><input> </b> register attributt <b>type</b> med tekstverdi:</p><p> <input type="text"> </p><p>Inntastingsfeltet for passord er et slags vanlig tekstfelt. Den støtter de samme attributtene som en enkelt linje tekstboks. Egenskap <b>Navn</b> angir navnet på passordinntastingsfeltet, som sendes til serveren sammen med passordet som er angitt av brukeren. For å opprette et felt for å skrive inn et passord, må du angi passordverdien til attributtet <b>type</b>(passord (engelsk) - passord):</p><p> <input type="password"> </p><p>Et eksempel på å lage et skjema med et passordfelt:</p> <h3>Eksempel: Inntastingsfelt for passord</h3> <ul><li>Prøv selv"</li> </ul><p>Din pålogging: <input type="text" name="login" size="15" maxlength="30" value="Navnet ditt"></p> <p>Passord: <input type="password" name="password" size="15" maxlength="30" value="Passord"></p> <input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Din pålogging: <input type="text" name="login" size="15" maxlength="30" value="Navnet ditt"> </p> <p>Passord: <input type="password" name="password" size="15" maxlength="30"> </p> <input type="submit"> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <p>Sammen med dette attributtet kan du bruke attributtet <b>makslengde</b>, hvis verdi bestemmer det maksimale antallet tegn som kan legges inn i denne strengen. Du kan også angi lengden på inndatafeltet ved å bruke attributtet <b>størrelse</b>... Som standard begrenser de fleste nettlesere tekstboksens bredde til 20 tegn. For å kontrollere bredden på elementer i nye skjemaer, i stedet for attributtet <b>størrelse</b>, anbefales det å bruke Cascading Style Sheets (CSS)-fasilitetene. <br>Egenskap <b>verdi</b> angir verdien som vises som standard i tekstboksen når skjemaet lastes. Ved å legge inn en standardverdi i feltet kan du forklare brukeren hva slags data og i hvilket format du ønsker at brukeren skal legge inn her. Det er som en prøve, fordi det er mye mer praktisk for brukeren å fylle ut skjemaet, se et eksempel foran seg.</p> <h2>Brytere (radio)</h2> <p>Element <b><input> </b> type <b>radio</b> oppretter brytere som bruker det logiske "ELLER"-prinsippet, som lar deg velge bare én av flere verdier: hvis du velger én posisjon, blir alle de andre inaktive. Den grunnleggende syntaksen for et veksleelement er:</p><p> <input type="radio" name="имя _переменной" value="betydning"> </p><p>Egenskap <b>Navn</b> kreves for radioknapper og spiller en viktig rolle i gruppering av flere alternativknapper. For å kombinere alternativknapper til en gruppe, må du angi samme attributtverdi <b>Navn</b> og forskjellige attributtverdier <b>verdi</b>... Egenskap <b>verdi</b> angir verdien for den valgte alternativknappen som skal sendes til serveren. Verdien til hver alternativknapp må være unik i gruppen, slik at serveren vet hvilket svar brukeren har valgt. <br>Attributte tilstedeværelse <b>krysset av</b>(fra engelsk - sett) ved veksleelementet indikerer hvilke av de foreslåtte alternativene som skal velges som standard når siden lastes, om nødvendig. Dette attributtet kan bare angis for ett veksleelement fra gruppen:</p> <h3></h3> <ul><li>Prøv selv"</li> </ul><p>Hvor gammel er du?</p> <ol><li><input type="radio" name="age" value="18" checked>Under 18</li> <li><input type="radio" name="age" value="18-24">fra 18 til 24</li> <li><input type="radio" name="age" value="25-34">fra 25 til 35</li> <li><input type="radio" name="age" value="35-50">mer enn 35</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Hvor gammel er du?</p> <ol> <li><input type="radio" name="age" value="18" checked>Under 18</li> <li><input type="radio" name="age" value="18-24">fra 18 til 24</li> <li><input type="radio" name="age" value="25-34">fra 25 til 35</li> <li><input type="radio" name="age" value="35-50">mer enn 35</li> </ol> <input type="submit"< </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Avmerkingsbokser</h2> <p>Element <b><input> </b> type <b>avmerkingsboksen</b> oppretter avmerkingsbokser som ligner radioknapper ved at de lar brukeren velge blant alternativene du gir. Hovedforskjellen fra radioknapper er at en besøkende kan velge flere alternativer samtidig, og selve flaggene er indikert med firkanter, ikke sirkler. Som med alternativknapper, opprettes en gruppe med avmerkingsbokser ved å tildele hvert element samme attributtverdi <b>Navn</b> hver avmerkingsboks har imidlertid sin egen betydning. Den grunnleggende syntaksen til en avmerkingsboks er:</p><p> <input type="checkbox" name="имя _переменной" value="betydning"> </p><p>Egenskap <b>krysset av</b>, som med alternativknapper, spesifiserer at avkrysningsboksen skal være valgt som standard ved sideinnlasting. Dette attributtet kan settes samtidig for flere avmerkingsbokser i gruppen. <br>Følgende eksempel bruker avmerkingsbokser for å angi flere standard svaralternativer:</p> <h3>Eksempel: Bruk av brytere</h3> <ul><li>Prøv selv"</li> </ul> <ol><li><input type="checkbox" name="musik" value="juze" checked>Jazz</li> <li><input type="checkbox" name="musik" value="bluse" checked>Blues</li> <li><input type="checkbox" name="musik" value="stein">Stein</li> <li><input type="checkbox" name="musik" value="shanson">Chanson</li> <li><input type="checkbox" name="musik" value="kantry">Land</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Hvilke musikksjangre liker du?</p> <ol> <li><input type="checkbox" name="musik" value="juze" checked>Jazz</li> <li><input type="checkbox" name="musik" value="bluse" checked>Blues</li> <li><input type="checkbox" name="musik" value="stein">Stein</li> <li><input type="checkbox" name="musik" value="shanson">Chanson</li> <li><input type="checkbox" name="musik" value="kantry">Land</li> </ol> <input type="submit"< </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Send og tilbakestill knapper</h2> <p>Element <b><input> </b> type <b>sende inn</b> oppretter en knapp som, når den klikkes, sender nettleseren til serverskriptet for å behandle dataene som er lagt inn av brukeren i skjemaet. Hvis vi lager en knapp som sletter skjemaet, tildeler vi attributtet <b>type</b> verdien "reset". Element <b><input> </b> type <b>sende inn</b> et valgfritt attributt kan tildeles <b>Navn</b>... Egenskap <b>verdi</b> brukes i dette elementet for å spesifisere tekst som angir etiketten på knappen. Som standard, i nettlesere, er knappen skrevet "Send", hvis du ikke er fornøyd med denne påskriften - skriv den inn selv. Siden stilene til bekreftelsesknappene kan variere i forskjellige nettlesere, er det bedre å tilpasse stilen til knappen selv ved å bruke CSS-verktøy eller bruke grafiske knapper. <br>Opprett bekreftelses- og fjernknapper:</p> <h3>Eksempel: Bruk av send og tilbakestill</h3> <ul><li>Prøv selv"</li> </ul> <input type="text" name="email"><input type="submit" name="podpisatsya" value="Abonner på"><input name="reset" type="reset" value="Klar"><p>Ved å klikke på Tilbakestill-knappen tilbakestilles alle brukerangitte data.</p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <input type="text" name="email"> <input type="submit" name="podpisatsya" value="Abonner på"> <input name="reset" type="reset" value="Klar"> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Handlingsattributt.</h2> <p>Det viktigste for elementet <b><form> </b> er et attributt <b>handling</b> som spesifiserer databehandleren for skjemaet. En databehandler er en fil som beskriver hva du skal gjøre med skjemadata. Som et resultat av denne behandlingen, returneres en ny HTML-side og returneres til nettleseren. Med andre ord, i attributtet <b>handling</b> spesifiserer URL-banen til en serverbehandlerfil (noen ganger kalt en skriptside) for behandling av skjemaet. Syntaksen er som følger:</p><p> <form action="http://mytestserver.com/namefolder/obrabotchik.php">… </form> </p><p>Behandlingsfilen er på serveren <i>mytestserver.com</i> i mappen <i>navnemappe</i> og navnet på serverskriptet som skal behandle dataene - <i>obrabotchik.php</i>... Det er til ham at alle dataene du har lagt inn i skjemaet på nettsiden vil bli overført. .php-utvidelsen indikerer at det angitte skjemaet behandles av et skript skrevet på PHP-språket. Selve behandleren kan skrives på et annet språk, for eksempel kan det være skriptspråket Python, Ruby, etc. <br>Det er tilrådelig å alltid angi verdien av attributtet <b>handling</b>... Hvis skjemaet skal sende verdier til samme side der det er plassert, spesifiser en tom streng som verdien av handlingsattributtet: action = "".</p> <h2>Metodeattributt</h2> <p>Egenskap <b>metode</b> spesifiserer hvordan informasjon skal overføres til serveren. Metoden du velger for å sende inn skjemaet avhenger av dataene du vil sende med det. Volumet av disse dataene spiller en stor rolle her. De mest populære er to metoder for å overføre de originale dataene i skjemaet fra nettleseren til serveren: <b>FÅ</b> og <b>POST</b>... Metoden er satt til hvilken som helst av ditt valg, og hvis du ikke spesifiserte den, vil standarden bli brukt <b>FÅ</b>... La oss vurdere bruken av hver av dem.</p> <h2>POST metode</h2> <p>Metode <b>POST</b> pakker skjemadataene og sender dem til serveren usynlig til brukeren, siden dataene finnes i meldingens brødtekst. Nettleser når du bruker metoden <b>POST</b> sender en forespørsel til serveren, bestående av spesielle overskrifter etterfulgt av skjemadataene. Siden innholdet i denne forespørselen kun er tilgjengelig for serveren, vil metoden <b>POST</b> brukes til å overføre konfidensielle data som passord, bankkortdetaljer og annen personlig informasjon om brukere. Metode <b>POST</b> også egnet for å sende store mengder informasjon, siden i motsetning til metoden <b>FÅ</b>, den har ingen begrensninger på antall tegn som overføres.</p> <h2>GET-metoden</h2> <p>Som du allerede vet, er hovedoppgaven til en nettleser å motta nettsider fra serveren. Så når du bruker metoden <b>FÅ</b>, mottar nettleseren din nettsiden som den alltid gjør. Metode <b>FÅ</b> bryter også skjemadataene, men legger dem til på slutten av url-en før forespørselen sendes til serveren. For å forstå hvordan metoden fungerer <b>FÅ</b>, la oss se det i aksjon. Åpne det første eksemplet fra denne leksjonen (Eksempel: Enkel HTML-form) i notepad (for eksempel Notepad ++) og gjør en liten endring i HTML-koden:</p><p> <form action="" method="GET"> </p><p>de. erstatte <b>POST</b> på <b>FÅ</b>.<br>Lagre filen som <i>filnavn.html</i> og oppdater nettlesersiden din (F5) og fyll deretter ut skjemaet som <i>Vasya Pupkin</i>, og klikk på "Send"-knappen. I adressefeltet til nettleseren din vil du se noe slikt:</p><p>File_name.html? Fornavn = Vasya & etternavn = Pupkin</p><p>Nå kan du se navnet på hvert skjemaelement, så vel som verdien, her i URL-en. <br>URL-adressen er atskilt fra resten av skjemadataene med et spørsmålstegn, og variabelnavn og verdier er atskilt med et og-tegnet <b>(&) </b>.<br>Denne metoden bør brukes hvis du ikke overfører store mengder informasjon. <br>Denne metoden vil ikke fungere hvis dataene i skjemaet ditt er konfidensielle, for eksempel lagrer den et bankkortnummer eller passord. <br>Også metoden <b>FÅ</b> uegnet hvis du ønsker å sende filer til serveren sammen med skjemaet.</p> <h2>Gruppering av skjemaelementer</h2> <p>Skjemaelementer som er relatert etter betydning kan grupperes mellom tagger <b><fieldset> </b> og <b></fieldset> </b>... Nettleseren vises <b><fieldset> </b> som en ramme rundt en gruppe formelementer. Utseendet til rammen kan endres ved hjelp av Cascading Style Sheets (CSS). <br>For å legge til en tittel for hver gruppe trenger du elementet <b><legend> </b>, som spesifiserer gruppetittelteksten som skal være i rammen.</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="clear"></div> </div> </article> <div class='yarpp-related'> <section id="related_posts"> <div class="block-head"> <span>Mer informasjon om emnet</span> <div class="stripe-line"></div> </div> <div class="post-listing"> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/6d530784f99ff60ef54e6ea282b18c93.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Sporing av pakker etter sporingsnummer" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/no/sweden-post---nacionalnaya-pochta-shvecii-otslezhivanie-posylok-po/">Sporing av pakker etter sporingsnummer</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/6e93681d4b4c58554ca85e500973548e.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Foreldrekontroll-apper for Android" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/no/roditelskii-kontrol-na-android-s-zashchitoi-udaleniya-prilozheniya-dlya/">Foreldrekontroll-apper for Android</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/0229028f98d687355052b922043805c5.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Hvilket fotoredigeringsprogram for Android er best og hvilket kan lastes ned gratis og lovlig?" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/no/luchshie-fotoredaktory-makiyazh-na-android-kakoi-fotoredaktor-dlya-android-luchshe/">Hvilket fotoredigeringsprogram for Android er best og hvilket kan lastes ned gratis og lovlig?</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/07a965cde5d8c692b50aa680350a3457.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Beste gratis bilderedigerere for datamaskin" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/no/skachat-prilozhenie-dlya-fotografii-luchshie-besplatnye-fotoredaktory-dlya-kompyutera/">Beste gratis bilderedigerere for datamaskin</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/f44aa07171ae4480896e118e30c44254.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Grafiske programmer for Android Vårt Android Market er ditt riktige valg" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/no/luchshie-fotoredaktory-dlya-android-graficheskie-programmy-dlya-android-nash-android/">Grafiske programmer for Android Vårt Android Market er ditt riktige valg</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/d5a002118d59b07a11ab8355dde6f904.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Dataassistert tjeneste" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/no/programma-sony-xperia-z3-svyaz-s-kompyuterom-obsluzhivanie-s-pomoshchyu/">Dataassistert tjeneste</a></div> </div> </section> </div> <div id="comments"> <ol class="commentlist"> <div class='rreekk' rel='15'> <div id="smartrotator_ad_4" onclick="yaCounter40492595.reachGoal ('tizercommentbefore1'); return true;"></div> </div> </ol> <div class="clear"></div> <div id="respond" class="comment-respond"> </div> </div> </div> <aside id="sidebar"> <div class="theiaStickySidebar"> <div class="execphpwidget"> <div id="text-4" class="widget widget_text"> <div class="widget-top"> <span>Nyttig</span> <div class="stripe-line"></div> </div> <div class="widget-container"> <div class="textwidget"> <style> .wpp-list li img { -webkit-border-radius: 65px; -moz-border-radius: 65px; border-radius: 65px; } .wpp-list li .post-views { display: block; margin-left: 70px; color: #828283; font-size: 12px; } .wpp-list li .post-views i { font-size: 13px; } .wpp-list li { line-height: 22px !important; } .replacemy { cursor: pointer; } } </style> <ul class="wpp-list"> <li> <div class="replacemy"><img src="/uploads/af72807776c7ef644bcaf87f6872025a.jpg" width="65" height="65" title="Vårblomster levende bakgrunnsbilde for Android" alt="Vårblomster levende bakgrunnsbilde for Android" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/no/oboi-na-telefon-android-vesna-vertikalnye-vesennie-cvety/" class=""><br>Vårblomster levende bakgrunnsbilde for Android</a></li> <li> <div class="replacemy"><img src="/uploads/577c7b81c2712c7e92533d8fc2ddb5c0.jpg" width="65" height="65" title=""Barnemodus" i Xiaomi: hvordan komme seg ut av det For de minste - blokkering i applikasjonen" alt=""Barnemodus" i Xiaomi: hvordan komme seg ut av det For de minste - blokkering i applikasjonen" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/no/poleznyi-rezhim-dlya-detei-i-ih-roditelei-detskii-rezhim-v-syaomi-kak-iz-nego-vyiti/" class=""><br>"Barnemodus" i Xiaomi: hvordan komme seg ut av det For de minste - blokkering i applikasjonen</a></li> <li> <div class="replacemy"><img src="/uploads/e1a8b83e4f57cc5e203a15d1f576e3ed.jpg" width="65" height="65" title="Vårblomster levende bakgrunnsbilde for Android Last ned friske blomster på smarttelefonen din" alt="Vårblomster levende bakgrunnsbilde for Android Last ned friske blomster på smarttelefonen din" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/no/cvety-zhivye-oboi-vesennie-cvety-zhivye-oboi-dlya-android-skachat-na/" class=""><br>Vårblomster levende bakgrunnsbilde for Android Last ned friske blomster på smarttelefonen din</a></li> <li> <div class="replacemy"><img src="/uploads/1b31258831bd9344ce328a337a2da316.jpg" width="65" height="65" title="Last ned nyttår og jul levende bakgrunnsbilde for Android Animert bakgrunnsbilde for telefonen vinter" alt="Last ned nyttår og jul levende bakgrunnsbilde for Android Animert bakgrunnsbilde for telefonen vinter" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/no/skachat-novogodnie-zhivye-oboi-na-android-skachat-novogodnie-i-rozhdestvenskie-zhivye-oboi-dlya-android/" class=""><br>Last ned nyttår og jul levende bakgrunnsbilde for Android Animert bakgrunnsbilde for telefonen vinter</a></li> <li> <div class="replacemy"><img src="/uploads/874007be3148f9d1311c0172a91b2e77.jpg" width="65" height="65" title="Mint - nyheter fra vkontakte" alt="Mint - nyheter fra vkontakte" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/no/kak-otkryt-izbrannoe-myata-na-drugom-ustroistve-myata---novosti-iz/" class=""><br>Mint - nyheter fra vkontakte</a></li> </ul> </div> </div> </div> </div> </div> <div> </div> </aside> <div class="clear"></div> </div> <footer id="theme-footer"> <div id="footer-widget-area" class="wide-narrow-2c"><div id="footer-first" class="footer-widgets-box"><div id="text-2" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget"> <p>Alt om moderne teknologi. Feil. Spill. Sammenbrudd. Teknikk. Internett <p></p> </div></div></div></div><div id="footer-second" class="footer-widgets-box"><div id="text-3" class="footer-widget widget_text"> <div class="footer-widget-top"></div> <div class="footer-widget-container"> <div class="textwidget"><a href="https://qzoreteam.ru/no/sitemap.xml">kart over nettstedet</a></div> </div> </div><div id="text-7" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget"><br> <a href="">Tilbakemelding</a> </div></div></div></div></div><div class="clear"></div> </footer> <div class="clear"></div> <div class="footer-bottom"> <div class="container"> <div class="alignright"></div> <div class="alignleft">© Copyright 2017, https://qzoreteam.ru</div> <div class="clear"></div> </div> </div> </div> </div> </div> <div id="topcontrol" class="fa fa-angle-up" title="Gå til toppen av siden"></div> <div id="fb-root"></div> <script type="text/javascript"> jQuery(function($) { $(document).on("click", ".pseudo-link", function() { window.open($(this).data("uri")); }); }); </script> <script type='text/javascript'> /* */ var tocplus = { "smooth_scroll": "1", "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "310px" }; /* */ </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-polls/polls-js.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-postratings/js/postratings-js.js'></script> <script type='text/javascript'> /* */ var tie = { "mobile_menu_active": "true", "mobile_menu_top": "", "lightbox_all": "", "lightbox_gallery": "", "woocommerce_lightbox": "", "lightbox_skin": "dark", "lightbox_thumb": "vertical", "lightbox_arrows": "true", "sticky_sidebar": "", "is_singular": "1", "SmothScroll": "true", "reading_indicator": "", "lang_no_results": "\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c", "lang_results_found": "\u041d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b" }; /* */ </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/tie-scripts.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/ilightbox.packed.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script> <script type='text/javascript'> /* */ var gglcptch_pre = { "messages": { "in_progress": "\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0434\u043e\u0436\u0434\u0438\u0442\u0435\u0441\u044c \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 Google reCAPTCHA.", "timeout": "\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c Google reCAPTCHA. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0412\u0430\u0448\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0442\u0438 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443." } }; /* */ </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/pre-api-script.js'></script> <script type='text/javascript' data-cfasync="false" async="async" defer="defer" src='https://www.google.com/recaptcha/api.js?onload=gglcptch_onload_callback&render=explicit'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/script.js'></script> <script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/my.js"></script> <script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/etimer.js"></script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html>