Varoituslomake html. HTML-lomakkeiden luominen. Katsotaanpa pientä esimerkkiä

FORM-tunniste määrittää lomakkeen verkkosivulle. Lomake on tarkoitettu tiedonvaihtoon käyttäjän ja palvelimen välillä. Lomakkeiden käyttöalue ei rajoitu tietojen lähettämiseen palvelimelle asiakasskriptien avulla, voit käyttää mitä tahansa lomakkeen elementtiä, muuttaa sitä ja käyttää sitä harkintasi mukaan.

Asiakirja voi sisältää minkä tahansa määrän lomakkeita, mutta palvelimelle voidaan lähettää vain yksi lomake kerrallaan. Tästä syystä lomaketietojen on oltava toisistaan riippumattomia.

Kun lomake lähetetään palvelimelle, tietojen ohjaus siirtyy parametrin määrittämälle CGI-ohjelmalle toimintotunniste MUOTO. Selain valmistelee ensin tiedot "nimi=arvo"-parin muodossa, jossa nimi määräytyy INPUT-tunnisteen nimiparametrin mukaan ja arvon syöttää käyttäjä tai se asetetaan oletusmuotokenttään. Jos tietojen lähettämiseen käytetään GET-menetelmää, osoitepalkki voi olla seuraavanlainen.

http://www..cgi? nimimerkki=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Parametrit luetellaan CGI-ohjelman osoitteen jälkeen määritetyn kysymysmerkin jälkeen ja erotetaan et-merkillä (&). Muut kuin latinalaiset merkit muunnetaan heksadesimaalimuodossa (muodossa %HH, missä HH on heksadesimaalikoodi ASCII-merkkiarvoa varten välilyönti korvataan plusmerkillä (+).

Syntaksi

...

Sulkeva tagi
Edellytetään.

Vaihtoehdot
toiminta - sen CGI-ohjelman tai -asiakirjan osoite, joka käsittelee lomaketietoja.
enctype - MIME-tyyppiset lomaketiedot.
menetelmä - HTTP-protokollamenetelmä.
nimi - lomakkeen nimi.
kohde - sen ikkunan tai kehyksen nimi, johon käsittelijä lataa palautetun tuloksen.

Esimerkki 1: FORM-tunnisteen käyttäminen

Mitä luulet lyhenteen "OS" tarkoittavan?

Upseerit

käyttöjärjestelmä

Suuri raidallinen perho

FORM-tunnisteen parametrien kuvaus ACTION-parametri

Kuvaus
Määrittää käsittelijän, jonka lomaketietoja käytetään, kun ne lähetetään palvelimelle. Käsittelijä voi olla CGI-ohjelma tai HTML-dokumentti, joka sisältää palvelinkomentosarjat (esimerkiksi Parser). Kun käsittelijä on suorittanut lomakkeen tiedoilla toimintoja, se palauttaa uuden HTML-dokumentin.

Jos toimintaparametri poissa, tämänhetkinen sivu lataa uudelleen ja palauttaa kaikki lomakeelementit oletusarvoihinsa.

Syntaksi
...

Argumentit
Arvoksi otetaan täysi tai suhteellinen polku Vastaanottaja palvelintiedosto(URL-osoite).

Oletusarvo
Ei.

Esimerkki 2: Lomakkeen käsittelijän lisääminen

...

Voit määrittää osoitteen käsittelijäksi Sähköposti, alkaen avainsana mailto. Kun lomake on lähetetty, se käynnistetään sähköpostiohjelma asennettu oletuksena. Turvallisuussyistä selain on asetettu estämään lomakkeeseen syötettyjen tietojen huomaamaton lähettäminen sähköpostitse. Voit tulkita tiedot oikein käyttämällä FORM-tunnisteen enctype="text/plain"-parametria.

Esimerkki 3: Sähköpostiosoitteen käyttäminen

...

ENCTYPE-parametri

Kuvaus
Asettaa lomakkeen mukana lähetettävien tietojen MIME-tyypin. Yleensä enctype-parametria ei tarvitse asettaa, tiedot ymmärretään palvelinpuolella aivan oikein. Jos kuitenkin käytät tiedoston lähetyskenttää (INPUT type=file), sinun tulee määrittää enctype-parametri moniosaiseksi/form-dataksi.

Syntaksi
...

Argumentit
MIME-tyypin nimi joka tapauksessa. On mahdollista asettaa useita arvoja kerralla erottamalla ne pilkuilla.

Oletusarvo
Application/x-www-form-urlencoded

Esimerkki 4: Tietotyypin muuttaminen

...

METHOD-parametri

Kuvaus
Menetelmä kertoo palvelimelle pyynnön tarkoituksen. On olemassa kaksi päätapaa: GET ja POST. Muitakin menetelmiä on, mutta niitä käytetään vielä vähän.

Syntaksi
...

Argumentit
Metodiparametrin arvo ei välitä kirjainkoosta, ja se on määritettävä ilman lainausmerkkejä. On olemassa kaksi tapaa - GET ja POST.

SAADA
Tämä menetelmä on yksi yleisimmistä, ja se on suunniteltu hankkimaan tarvittavat tiedot ja lähettämään tietoja osoitepalkissa. Tässä tapauksessa nimi=arvo-parit lisätään osoitteeseen kysymysmerkin jälkeen ja erotetaan et-merkillä (&-symbolilla). GET-menetelmän käytön mukavuus on, että osoitetta kaikilla parametreilla voidaan käyttää toistuvasti, tallentamalla se esimerkiksi selaimen "Suosikit" -kohtaan, ja voit myös muuttaa parametriarvoja suoraan osoiterivillä.

LÄHETTÄÄ
POST-menetelmä lähettää tiedot palvelimelle selainpyynnössä. Näin voit lähettää Suuri määrä GET-menetelmän käytettävissä olevaa dataa, koska sen rajoitus on 4 kt. Foorumeilla käytetään suuria määriä dataa, postipalvelut, tietokannan täyttäminen jne.

Oletusarvo
SAADA

Esimerkki 5. Lomakkeen lähetystapa

...

Parametri NAME

Kuvaus
Määrittää lomakkeelle ainutlaatuisen nimen. Tyypillisesti lomakkeen nimeä käytetään sen elementteihin pääsyyn komentosarjojen kautta.

Syntaksi
...

Argumentit
Nimi on joukko merkkejä, mukaan lukien numerot ja kirjaimet. JavaScript on isot ja pienet kirjaimet erotteleva, joten kun käytät lomaketta nimellä skriptien avulla, käytä samaa kirjoitusasua kuin nimiparametrissa.

Oletusarvo
Ei.

Esimerkki 6: Lomakkeen nimen käyttäminen

funktio validForm() (
alert("Nimi" + document.forms("lomake1").nimi.arvo)
}

Nimi:

TARGET-parametri

Kuvaus
Kun lomakekäsittelijä on vastaanottanut tiedot, se palauttaa tuloksen HTML-dokumenttina. Voit määrittää ikkunan, jossa tuloksena oleva verkkosivu latautuu. Käytä tätä varten kohdeparametria, jonka arvona käytetään ikkunan tai kehyksen nimeä. Jos tavoitetta ei ole asetettu, palautettu tulos näytetään nykyisessä ikkunassa.

Syntaksi
...

Argumentit
Argumentti on ikkunan tai kehyksen nimi, määritetty parametrilla nimi. Jos nimeä ei ole olemassa, avautuu uusi ikkuna. Seuraavia käytetään varattuina niminä.

Tyhjä - lataa sivun uuteen selainikkunaan.
_self - lataa sivun nykyiseen ikkunaan.
_parent - lataa sivun yläkehykseen, jos kehyksiä ei ole, tämä parametri toimii kuten _self.
_top - peruuttaa kaikki kehykset ja lataa sivun koko selainikkunaan, jos kehyksiä ei ole, tämä parametri toimii kuten _self.

Oletusarvo
_itse

Esimerkki 7: Uuden sivun avaaminen

...

Lomakkeita löytyy lähes jokaiselta Internetin verkkosivustolta. Kun esimerkiksi syötät käyttäjätunnuksesi ja salasanasi verkkosivustolle, tiedot täytetään lomakkeiden kautta ja lähetetään palvelimelle. Esimerkki lomakkeesta ovat myös erilaiset kyselyt.

Tunnisteen syntaksi

...

Tunnisteella on erittäin tärkeä action-attribuutti, jolle määritetään sen skriptin osoite (URL), johon lomakkeesta vastaanotettu tieto lähetetään käsiteltäväksi. Emme mene yksityiskohtiin siitä, mitä tapahtuu tietojen lähettämisen jälkeen, koska nämä ongelmat on jo ratkaistu ei html:llä, vaan PHP:n GET- ja POST-menetelmillä.

Esimerkki 1. HTML-lomake painikkeilla Nämä ovat painikkeita:
Painike yksi
Painike kaksi
Painike kolme

Kun napsautat OK, sivu vain päivittyy, koska... emme määrittäneet toimintoparametria

Muuntaa sivulla seuraavaksi:

Nämä ovat painikkeet:
Painike yksi
Painike kaksi
Painike kolme
Ja tästä tulee tekstikenttä. Voit esimerkiksi kirjoittaa kirjautumistunnuksesi tähän

Ja tästä tulee suuri tekstikenttä. Voit esimerkiksi syöttää tänne tietoja itsestäsi

Kaiken edellä mainitun jälkeen tulee OK-painike

Kun napsautat OK, sivu vain päivittyy, koska... emme määrittäneet toimintoparametria

Selitykset esim

action="" - ilmaisee, että tietojen käsittely tapahtuu samalla sivulla.
- tyyppi-attribuutti="radio" käskee meitä näyttämään tämän koodin jälkeen olevan tekstin valintapainikkeena. Nimi ja arvo-attribuutti tämä tunniste meille nyt niillä on pieni rooli, koska Emme opiskele php:tä nyt (katso php-tunnit).
- attribuutti type="text" osoittaa, että tämä on tekstikenttä. Tässä on myös kaksi tärkeää attribuuttia: nimi (php:lle) ja arvo (oletusarvo).
- attribuutti type="textarea" osoittaa, että tämä on suuri tekstikenttä. Ainoa ero edelliseen tapaukseen on, että sen avulla voit tallentaa suuren määrän tekstiä.
- type="submit"-attribuutti osoittaa, että tämä on painike. Arvo-attribuutti sisältää sen, mitä painikkeeseen kirjoitetaan.

Voit lukea lisää kaikista näistä elementeistä oppitunnilla 15: tunnisteelementit, joissa valintanapit, luettelot, valintaruudut, tekstikenttiä, painikkeet.

Katsotaanpa nyt kaikkia tunnisteen attribuutteja yksityiskohtaisesti.

Tunnisteen attribuutit ja ominaisuudet

1. Attribuutti accept-charset="Encoding" - määrittää koodauksen, jolla palvelin voi hyväksyä ja käsitellä lomaketietoja. Voi ottaa erilaisia arvoja, esimerkiksi CP1251, UTF-8 jne.

2. Attribuutti action="URL" on sen komentosarjan osoite, joka käsittelee lomakkeesta lähetetyt tiedot. Jos jätät tämän arvon tyhjäksi, tiedot käsitellään samassa dokumentissa, jossa lomake sijaitsee.

3. Attribuutti autocomplete="on/off" - määrittää tai poistaa käytöstä lomakkeen automaattisen täydennyksen. Voi ottaa kaksi arvoa:

päällä - ota automaattinen täyttö käyttöön;
pois päältä - poista automaattinen täyttö käytöstä;

4. Attribuutti enctype="parameter" - määrittää tietojen koodausmenetelmän. Voi ottaa seuraavat arvot:

Application/x-www-form-urlencoded - + käytetään välilyöntien sijaan, ne koodaavat symboleja, kuten venäläisiä kirjaimia heksadesimaaliarvot
multipart/form-data - tietoja ei ole koodattu
teksti/plain - välilyönnit korvataan +-merkillä, kirjaimia ja muita merkkejä ei koodata.

5. Attribuuttimenetelmä="POST/GET" - määrittää lähetystavan. Voi ottaa kaksi arvoa:

GET - tiedonsiirto osoitepalkissa (lähetettyjen tietojen määrä on rajoitettu)
POST - lähettää tiedot palvelimelle selainpyynnössä (voi lähettää suuri määrä dataa, koska ei tilavuusrajoitusta)

6. Attribuutin nimi="nimi" - määrittää lomakkeen nimen. Useimmiten käytetään, kun lomakkeita on useita, jotta voit viitata niihin tietty muoto käsikirjoituksen kautta.

7. Novalidate-attribuutti - peruuttaa sisäänrakennetun lomaketietojen tarkistuksen syötteiden oikeellisuuden varalta.

8. Target="parameter"-attribuutti on sen ikkunan tai kehyksen nimi, johon käsittelijä lataa palautetun tuloksen. Voi ottaa seuraavat arvot:

_blank - lataa sivun uuteen selainikkunaan
_self - lataa sivun nykyiseen ikkunaan
_parent - lataa sivun pääkehykseen
_top - peruuttaa kaikki kehykset ja lataa sivun koko selainikkunaan

Hyvä lukija, nyt olet oppinut paljon enemmän html-tunniste muodossa. Nyt neuvon sinua siirtymään seuraavaan oppituntiin.

Yhdessä edellisessä viestissä puhuin aiheesta universaali tunniste syöte, jota voidaan käyttää useimpien verkkolomakeelementtien luomiseen. Mutta käyttämällä vain näitä elementtejä (tekstikenttä, painike jne.), ei ole mahdollista luoda täysimittaista lomaketta.

Oletetaan, että meillä on yksinkertainen muoto, joka koostuu kahdesta tekstikentästä, joihin käyttäjän on syötettävä etu- ja sukunimensä.

Nimi

Sukunimi

missä tarkalleen ja miten

ja sulkeminen

Nimi

Sukunimi

Nyt on selvää, että tämä koodin osa on lomake.

Jos tarkastelet sivua tällä koodilla selaimessa, huomaat, ettei siinä ole merkittäviä muutoksia. Tämä tunniste itsessään ei tee mitään visuaalisia muutoksia sivun rakenteeseen.

Mutta tämä lomake ei vieläkään toimi. Vaikka selain näkee nyt kaksi tekstikenttää osana yhtä lomaketta, ei ole ollenkaan selvää, mihin käyttäjän tähän lomakkeeseen syöttämät tiedot lähetetään. Tästä lomakkeesta puuttuu erittäin tärkeä pakollinen määrite.

Lomaketunnisteen käytön tarkoitus on erityiset attribuutit, joita siihen voidaan soveltaa.

Katsotaanpa, mitä nämä ominaisuudet ovat. Ensinnäkin nämä ovat verkkolomakkeiden kaksi tärkeintä attribuuttia.

1) a ction – tämä määrite on pakollinen. Nuo. lomakkeen luomisessa käyttämättä sitä ei ole paljon järkeä. Sen avulla määrität polun ohjelmaan (skriptiin), joka käsittelee lomakkeeseen syötetyt tiedot.

2) method – tällä attribuutilla ilmoitamme menetelmän, jolla tiedot siirretään ohjelmankäsittelijälle.

Tässä on kaksi mahdollista vaihtoehtoa: GET ja POST. En kuvaile tässä viestissä kuinka nämä kaksi menetelmää eroavat toisistaan. Tämä on toisen artikkelin aihe.

Jos et määritä tätä määritettä, GET-menetelmää käytetään oletuksena.

Lisätään nämä kaksi attribuuttia lomakkeeseen:

Nimi

Sukunimi

Nyt lomakkeemme toimii käytännössä. Olemme ilmoittaneet, mihin tietoihin käyttäjä syöttää toiminta-attribuutti ja ilmoitti, kuinka nämä tiedot tulee lähettää.

Seuraavat attribuutit ovat paljon harvinaisempia tiettyjen ongelmien ratkaisemiseksi, mutta puhun silti niistä hieman.

3) enctype – tällä attribuutilla voit määrittää sisällön tyypin/ sisältötyyppi, joka lähetetään palvelimelle.

4) hyväksy - määrittää pilkuilla erotetun luettelon sisältötyypeistä / sisällöistä tyyppiluettelo, joka lähetetään palvelimelle.

4) accept —charset – määrittää luettelon tekstikoodauksista, jotka raportoidaan ohjelmalle (skriptille).

Siinä kaikki ensimmäisessä toiminnossa, siirrytään toiseen.

Laki 2. Luo ohjauselementti - painike, jota klikattaessa tiedot lähetetään käsittelijäohjelmaan.

Okei, olemme luoneet verkkolomakkeen, mutta käyttäjän on suoritettava jokin toimenpide, jotta hänen antamansa tiedot lähetetään käsittelijäohjelmaan. Tämä tehdään yleensä luomalla painike type="submit"-attribuutilla.

Kaikki selaimet on jo määritetty siten, että kun käyttäjä napsauttaa painiketta, jossa on attribuutit, kirjoitat ="lähetä". Sitten lomakkeelle syötetyt tiedot lähetetään automaattisesti lomakkeen action-attribuutissa määritettyyn osoitteeseen.

Lisätään tämä painike verkkolomakkeellemme heti. Puhuin edellisellä oppitunnilla painikkeiden luomisesta.

Nimi
-
Sukunimi

Nyt kun käyttäjä napsauttaa "Lähetä"-painiketta, hänen tekstikenttiin syöttämänsä tiedot lähetetään käsittelijäohjelmaan, joka sijaitsee esimerkiksi osoitteessa "http://dimachen.info/papka". /script.php".

Siinä kaikki tältä päivältä. Nähdään!

Käyttäjä voi täyttää nämä kentät, mutta muutoksia ei tapahdu. Jotta selain alkaa havaita tämän lomakkeen yhtenä rakenteena, sinun on suoritettava kaksi toimintoa:

1 toimenpide. Kerro selaimelle, että nämä tekstikentät ovat yksi yksikkö, yksi lomake.

Erityinen tunniste, jonka avulla voit tehdä tämän, on lomaketunniste. muoto on erityinen elementti, jonka avulla voit yhdistää useita lomakeelementtejä yhdeksi rakenteeksi ja käskee selaimen käsittelemään rakennetta yhtenä yksikkönä.

Lomaketunnisteen avulla voimme kertoa selaimelle tarkalleen, minne ja miten lomakeelementteihin syötetyt tiedot lähetetään, jotta ne voidaan käsitellä erikoisohjelmalla.

muototunniste se on jotain konttia, joka tallentaa lomakeelementtejä. Tämä parillinen tunniste. Sen toiminnan vyöhyke avauksen ja sulkemisen välillä määrittää elementit, jotka ovat osa muotoa.

Palataan edelliseen esimerkkiimme ja yritetään kääriä lomakeelementit tähän tunnisteeseen:

Nimi

Sukunimi

Muuten, haluatko Yandex Metricsin ja Google Analyticsin "tavoitteiden" avulla selvittää, onko verkkosivustosi jossain elementissä mitään järkeä?

HTML-lomakkeet ovat säätimiä, joita käytetään keräämään tietoja verkkosivuston vierailijoilta.

Verkkolomakkeet koostuvat joukosta tekstikenttiä, painikkeita, luetteloita ja muita ohjaimia, jotka aktivoidaan hiiren napsautuksella. Teknisesti lomakkeet välittävät tietoja käyttäjältä etäpalvelimelle.

Web-ohjelmointikieliä, kuten PHP, Perl, käytetään lomaketietojen vastaanottamiseen ja käsittelyyn.

Ennen HTML5:n tuloa verkkolomakkeet olivat kokoelma useita elementtejä, jotka päättyivät painikkeeseen. Lomakkeiden muotoileminen eri selaimissa vaati paljon vaivaa. Lisäksi vaaditut lomakkeet JavaScript-sovellukset syötettyjen tietojen vahvistamiseen, ja niistä puuttui myös tietyntyyppiset syöttökentät päivittäisten tietojen, kuten päivämäärien, sähköpostiosoitteiden ja URL-osoitteiden, määrittämiseksi.

HTML5-lomakkeet ratkaisivat useimmat näistä yleisistä ongelmista uusilla määritteillä, jotka tarjosivat mahdollisuuden muuttua ulkomuoto lomakeelementit CSS3:lla.

Riisi. 1. Parannetut verkkolomakkeet HTML5:llä Luo HTML5-lomake 1. Elementti

Minkä tahansa muodon perusta on elementti.... Se ei edellytä tietojen syöttämistä, koska se on säilö, joka pitää yhdessä kaikki lomakkeen ohjausobjektit - kentät. Tämän elementin attribuutit sisältävät tietoja, jotka ovat yhteisiä kaikille lomakekentille, joten loogisesti yhdistetyt kentät on sisällytettävä yhteen lomakkeeseen.

Taulukko 1. Tunnisteen attribuutit Attribuutin arvo/kuvaus

hyväksy-merkkisetti	Attribuutin arvo on välilyönnillä eroteltu luettelo merkkikoodauksista, joita käytetään lomakkeen lähettämiseen, esim.
toiminta	Pakollinen attribuutti, joka määrittää lomakkeen käsittelijän URL-osoitteen palvelimella, johon tiedot lähetetään. Se on tiedosto (esimerkiksi action.php), joka kuvaa mitä lomaketiedoilla on tehtävä. Jos määritteen arvoa ei ole määritetty, sivun uudelleenlatauksen jälkeen lomakeelementit saavat oletusarvonsa. Jos kaikki työ tehdään asiakkaan puolella JavaScript-skriptit, niin action-attribuutiksi voidaan asettaa # . Voit myös sopia, että vierailijan täyttämä lomake lähetetään sinulle sähköpostitse. Tätä varten sinun on syötettävä sisään seuraava merkintä:
automaattinen täydennys
enctype	Käytetään määrittämään lomakkeella lähetettyjen tietojen MIME-tyyppi, esimerkiksi enctype="multipart/form-data" . Määritetty vain metodi="post" tapauksessa. application/x-www-form-urlencoded on oletussisältötyyppi, joka osoittaa, että välitetyt tiedot edustavat URL-koodattujen lomakemuuttujien luetteloa. Välilyönnit (ASCII 32) koodataan muodossa + ja erikoismerkki, kuten ! koodataan heksadesimaalimuodossa %21 . multipart/form-data - käytetään tiedostoja, ei-ASCII-tietoja ja binääritietoja sisältävien lomakkeiden lähettämiseen, koostuu useista osista, joista jokainen edustaa erillisen lomakeelementin sisältöä. text/plain - osoittaa, että pelkkää (ei html) tekstiä lähetetään.
menetelmä	Määrittää, kuinka lomaketiedot lähetetään. Get-menetelmä lähettää tiedot palvelimelle kautta osoitekenttä selain. Kun luodaan pyyntö palvelimelle, kaikki muuttujat ja niiden arvot muodostavat sekvenssin, kuten www.anysite.ru/form.php?var1=1&var2=2 . Lisätäänkö muuttujien nimet ja arvot palvelimen osoitteeseen merkin jälkeen? ja ne erotetaan &-merkillä. Kaikki Erikoissymbolit ja ei-latinalaiset kirjaimet on koodattu muodossa %nn, välilyönti korvataan merkillä +. Tätä menetelmää tulee käyttää, jos et siirrä suuria tietomääriä. Jos sinun on lähetettävä tiedosto lomakkeen mukana, tämä menetelmä ei toimi. Postitusmenetelmää käytetään suurten tietomäärien lähettämiseen sekä luottamuksellista tietoa ja salasanat. Tällä menetelmällä lähetetyt tiedot eivät näy URL-otsikossa, koska ne sisältyvät viestin runkoon.
nimi	Määrittää lomakkeen nimen, jota käytetään lomakeelementtien käyttämiseen komentosarjojen kautta, esimerkiksi name="opros" .
novalidoida	Poistaa vahvistuksen käytöstä lomakkeen lähetyspainikkeessa. Attribuuttia käytetään määrittämättä arvoa
kohde	Määrittää ikkunan, johon tiedot lähetetään: _blank - uusi ikkuna _self - sama kehys _parent — yläkehys (jos se on olemassa, jos ei, niin nykyiseen) _yläikkuna huipputaso tämän kehyksen suhteen. Jos puhelu ei tule lapsikehyksestä, niin samaan kehykseen.

2. Lomakeelementtien ryhmittely

...-elementti on tarkoitettu ryhmittelemään toisiinsa liittyviä elementtejä ja jakaen siten lomakkeen loogisiksi fragmenteiksi.

Jokainen elementtiryhmä voidaan nimetä käyttämällä elementtiä, joka tulee välittömästi tagin jälkeen. Ryhmän nimi näkyy vasemmalla yläreunassa. Jos elementti esimerkiksi tallentaa yhteystiedot:

Yhteystiedot

nimi *

Sähköposti

Riisi. 2. Lomakeelementtien ryhmittely käyttämällä

Taulukko 2. Tunnisteen attribuutit Attribuutin arvo/kuvaus

liikuntarajoitteinen	Jos attribuutti on olemassa, ryhmän sisällä olevia toisiinsa liittyviä lomakeelementtejä ei voi täyttää ja muokata. Käytetään pääsyn rajoittamiseen tiettyihin lomakekenttiin, jotka sisältävät aiemmin syötettyjä tietoja. Attribuuttia käytetään määrittämättä arvoa - .
muodossa	samassa asiakirjassa. Osoittaa yhden tai useamman muodon, johon se kuuluu tämä ryhmä elementtejä. Päällä Tämä hetki attribuuttia ei tueta mikään selain.
nimi	Määrittää nimen, jota käytetään viittaamaan JavaScript-elementteihin tai viittaamaan lomaketietoihin, kun lomake on täytetty ja lähetetty. Se on analoginen id-attribuutin kanssa.

3. Luo lomakekenttiä

Elementti luo suurimman osan lomakekentistä. Elementin attribuutit vaihtelevat sen mukaan, minkä tyyppistä kenttää elementtiä käytetään luomaan.

CSS-tyyleillä voit muuttaa fontin kokoa, kirjasintyyppiä, väriä ja muita tekstin ominaisuuksia sekä lisätä reunuksia, taustaväriä ja taustakuva. Kentän leveys määritetään leveysominaisuuden avulla.

Taulukko 3. Tunnisteen attribuutit Attribuutin arvo/kuvaus

hyväksyä	Määrittää palvelimelle lähetettävän tiedoston tyypin. Osoitettu vain . Mahdolliset arvot: file_extension - sallii tiedostojen lataamisen määritetyllä tunnisteella, esimerkiksi accept=".gif" , accept=".pdf" , accept=".doc" audio/* - mahdollistaa äänitiedostojen lataamisen video/* - mahdollistaa videotiedostojen lataamisen image/* - mahdollistaa kuvien lataamisen media_tyyppi - ilmaisee ladattujen tiedostojen mediatyypin.
alt	Määrittää vaihtoehtoinen teksti kuville, tarkoitettu vain .
automaattinen täydennys	Vastaa tekstikenttään syötettyjen arvojen muistamisesta ja niiden automaattisesta korvaamisesta seuraavan kerran kun kirjoitat ne: päällä - tarkoittaa, että kenttää ei ole suojattu ja sen arvo voidaan tallentaa ja hakea, off - poistaa lomakekenttien automaattisen täytön käytöstä.
automaattitarkennus	Voit varmistaa, että ladatussa muodossa yksi tai toinen syöttökenttä on jo fokusoitunut (on valittu), valmiina syöttämään arvo.
tarkistettu	Attribuutti tarkistaa, onko oletusvalintaruutu valittuna sivun latauksen yhteydessä kentille, kuten type="checkbox" ja type="radio" .
liikuntarajoitteinen
muodossa	Attribuutin arvon on oltava sama kuin saman asiakirjan elementin id-attribuutti. Tunnistaa yhden tai useamman lomakkeen, johon tämä lomakekenttä kuuluu.
muodostumista	Määrittää tiedoston URL-osoitteen, joka käsittelee lomakkeen lähetyksen yhteydessä kenttiin syötetyt tiedot. Aseta vain type="submit"- ja type="image"-kentille. Attribuutti ohittaa itse lomakkeen action-attribuutin arvon.
formenctyyppi	Määrittää, kuinka lomakekentän tiedot koodataan, kun ne lähetetään palvelimelle. Ohittaa lomakkeen enctype-attribuutin arvon. Aseta vain type="submit"- ja type="image"-kentille. Vaihtoehdot: Application/-x-www-form-urlencoded on oletusarvo. Kaikki merkit koodataan ennen lähettämistä (välilyönnit korvataan +-merkillä, erikoismerkit muunnetaan ASCII HEX -arvoiksi) multipart/form-data - merkkejä ei ole koodattu text/plain - välilyönnit korvataan +-symbolilla, eikä erikoismerkkejä ole koodattu.
muotomenetelmä	Attribuutti määrittää menetelmän, jolla selain lähettää lomaketiedot palvelimelle. Aseta vain type="submit"- ja type="image"-kentille. Ohittaa lomakkeen method-attribuutin arvon. Vaihtoehdot: get on oletusarvo. Lomakkeen tiedot (nimi/arvo-pari) lisätään URL-osoitteeseen ja lähetetään palvelimelle: URL?nimi=arvo&nimi=arvo lomakkeen jälkeiset tiedot lähetetään http-pyynnönä.
muotonovalidaatti	Määrittää, että lomakekentän tietoja ei pitäisi vahvistaa, kun lomake lähetetään. Ohittaa lomakkeen novalidate-attribuutin arvon. Voidaan käyttää määrittämättä attribuutin arvoa.
muotokohde	Määrittää, missä lomakkeen lähettämisen jälkeen saatu vastaus näytetään. Aseta vain type="submit"- ja type="image"-kentille. Ohittaa arvon kohdemäärite lomakkeita. _parent – lataa vastauksen pääkehykseen _top – lataa vastauksen koko näytöllä kehyksen nimi – lataa vastauksen määritetyn nimen kehykseen.
korkeus	Attribuutin arvo sisältää pikselien määrän ilman mittayksikköä. Asettaa type="image"-tyypin lomakekentän korkeuden, esimerkiksi . On suositeltavaa asettaa sekä kentän korkeus että leveys samanaikaisesti.
lista	On linkki elementtiin, joka sisältää sen tunnuksen. Voit tarjota käyttäjälle useita vaihtoehtoja, joista hän voi valita, kun hän alkaa syöttää arvoa vastaavaan kenttään.
max	Voit rajoittaa numeeristen tietojen sallitun syöttämisen enimmäisarvoon. Attribuutin arvo voi sisältää kokonaisluvun tai murtoluvun. On suositeltavaa käyttää tätä attribuuttia min-attribuutin kanssa. Toimii seuraavat tyypit kentät: numero, alue, päivämäärä, päivämäärä-aika, päivämäärä-aika-paikallinen, kuukausi, aika ja viikko.
Maksimi pituus	Attribuutti määrittää enimmäismäärä kenttään syötetyt merkit. Oletusarvo on 524288 merkkiä.
min	Voit rajoittaa kelvollisen numeerisen tiedon syöttämisen minimiarvoon.
useita	Antaa käyttäjän syöttää useita attribuuttiarvoja pilkulla erotettuina. Koskee tiedostoja ja sähköpostiosoitteita. Määritetty ilman attribuutin arvoa.
nimi	Määrittää nimen, jolla elementtiä käytetään esimerkiksi taulukoissa css-tyylejä. Se on analoginen id-attribuutin kanssa.
kuvio	Voit määrittää käytön tavallinen ilme niiden tietojen syntaksi, jotka on sallittava syöttää tiettyyn kenttään. Esimerkiksi kuvio="(3)-(3)" — hakasulkeet aseta kelvollisten merkkien alue tässä tapauksessa- minkä tahansa pienet kirjaimet, numero sisään aaltosulkeet ilmaisee, että tarvitaan kolme pientä kirjainta, joita seuraa viiva ja sitten kolme numeroa välillä 0-9.
paikanpitäjä	Sisältää tekstin, joka näkyy syöttökentässä ennen sen täyttämistä (useimmiten tämä on työkaluvihje).
Lue ainoastaan	Ei salli käyttäjän muuttaa lomakeelementtien arvoja. Tekstin valinta ja kopiointi on edelleen käytettävissä. Määritetty ilman attribuutin arvoa.
edellytetään	Näyttää viestin, joka ilmoittaa, että tämä kenttä on pakollinen. Jos käyttäjä yrittää lähettää lomakkeen syöttämättä vaadittua arvoa tähän kenttään, näytölle tulee varoitusviesti. Määritetty ilman attribuutin arvoa.
koko	Asettaa kentän näkyvän leveyden merkeissä. Oletusarvo on 20. Toimii seuraavien kenttätyyppien kanssa: teksti, haku, puh, url, sähköposti ja salasana.
src	Määrittää lomakkeen lähetyspainikkeena käytetyn kuvan URL-osoitteen. Ilmoitettu vain kentälle.
askel	Käytetään elementeille, jotka edellyttävät numeeristen arvojen syöttämistä, ilmaisee määrän, jolla arvoja kasvatetaan tai vähennetään alueen säätöprosessin (vaihe) aikana.
tyyppi	painike - luo painikkeen.
	valintaruutu - muuttaa syöttökentän valintaruuduksi, joka voidaan valita tai tyhjentää, esim. minulla on auto
	väri - Luo väripaletteja tukevissa selaimissa, jolloin käyttäjät voivat valita väriarvot heksadesimaalimuodossa.
	päivämäärä — voit syöttää päivämäärän muodossa pp.kk.vvvv. Syntymäpäivä:
	datetime-local - voit syöttää päivämäärän ja kellonajan isoilla kirjaimilla erotettuina Englanninkielinen kirje T kaavan mukaan pp.kk.vvvv hh:mm. Syntymäpäivä - päivä ja aika:
	sähköposti - tukevat selaimet tämä attribuutti, odottaa käyttäjän syöttävän tiedot, jotka vastaavat sähköpostiosoitteiden syntaksia. Sähköposti:
	tiedosto - voit ladata tiedostoja käyttäjän tietokoneelta. Valitse tiedosto:
	piilotettu - Piilottaa säätimen, jota selain ei näytä, ja estää käyttäjää muuttamasta oletusarvoja.
	kuva - luo painikkeen, jonka avulla voit lisätä painikkeeseen kuvan tekstin sijaan.
	kuukausi – Antaa käyttäjän syöttää vuoden ja kuukauden numeron vvvv-kk mallilla.
	numero - tarkoitettu kokonaislukuarvojen syöttämiseen. Hänen min attribuutteja, max ja step määrittävät ylä- ja alarajat sekä arvojen välisen askeleen. Nämä attribuutit oletetaan kaikille elementeille, joilla on numeeriset indikaattorit. Niiden oletusarvot riippuvat elementin tyypistä. Ilmoita määrä (1-5):
	salasana - luo tekstikenttiä lomakkeeseen, kun taas käyttäjän syöttämät merkit korvataan tähdillä, luettelomerkeillä tai muilla, asennettu selaimella kuvakkeet. Kirjoita salasana:
	radio - luo kytkimen - pienen ympyrän muodossa olevan säätimen, joka voidaan kytkeä päälle tai pois päältä. Kasvissyöjä:
	alue - antaa sinun luoda käyttöliittymäelementin, kuten liukusäätimen, min / max - antaa sinun asettaa valintaalueen
	nollaa - luo painikkeen, joka tyhjentää käyttäjän syöttämien tietojen lomakekentät.
	haku - tarkoittaa hakukenttää, oletusarvoisesti syöttökenttä on suorakaiteen muotoinen. Hae:
	Lähetä - luo vakiopainikkeen, joka aktivoidaan hiiren napsautuksella. Painike kerää tiedot lomakkeesta ja lähettää ne käsiteltäväksi.
	text - Luo tekstikenttiä lomakkeeseen ja tulostaa yksirivisen tekstikentän tekstinsyöttöä varten.
	aika – voit syöttää ajan 24 tunnin muodossa käyttäen tt:mm-kuviota. Tuetuissa selaimissa se näkyy numeerisena syöttökentän ohjausobjektina, jossa on hiirellä muokattava arvo ja sallii vain aika-arvojen syöttämisen. Määritä aika:
	url — kenttä on tarkoitettu URL-osoitteiden määrittämiseen. Kotisivu:
	viikko - Vastaavan osoitintyökalun avulla käyttäjä voi valita yhden viikon vuodesta, jonka jälkeen se syöttää tiedot muodossa nn-yyyy. Vuodesta riippuen viikkojen lukumäärä voi olla 52 tai 53. Määritä viikko:
arvo	Määrittää tekstin, joka näkyy painikkeessa, kentässä tai siihen liittyvässä tekstissä. Ei määritetty tiedostotyypin kenttiin.
leveys	Attribuutin arvo sisältää pikselien määrän. Voit määrittää lomakekenttien leveyden.

4. Tekstinsyöttökentät

...-elementtiä käytetään elementin sijaan, kun haluat luoda suuria tekstikenttiä. Alkuperäisenä arvona näkyvä teksti sijoitetaan tunnisteen sisään. Kentän mitat asetetaan käyttämällä attribuutteja sarakkeet - vaakasuuntaiset mitat, rivit - pystymitat. Kentän korkeus voidaan asettaa korkeusominaisuuden avulla. Kaikki koot lasketaan yhden merkin koon perusteella monospace-fontissa.

Taulukko 4. Tunnisteen attribuutit Attribuutin arvo/kuvaus

automaattitarkennus	Kohdistus haluttuun alkutekstikenttään automaattisesti.
sarakkeet	Asettaa leveyden merkkien lukumäärän mukaan. Jos käyttäjä tulee sisään lisää tekstiä, vierityspalkki tulee näkyviin.
liikuntarajoitteinen	Poistaa käytöstä mahdollisuuden muokata ja kopioida kentän sisältöä.
muodossa	Attribuutin arvon on oltava sama kuin saman asiakirjan elementin id-attribuutin arvo. Tunnistaa yhden tai useamman lomakkeen, johon tämä tekstikenttä kuuluu.
Maksimi pituus	Attribuutin arvo määrittää enimmäismäärä kenttään syötettävät merkit.
nimi	Määrittää tekstikentän nimen.
paikanpitäjä	Määrittää lyhyen tekstikehotteen, joka kuvaa odotetun syöttöarvon.
Lue ainoastaan	Poistaa käytöstä mahdollisuuden muokata kentän sisältöä.
edellytetään	Näyttää viestin, joka ilmoittaa, että tämä kenttä on pakollinen.
rivit	Määrittää numeron, joka ilmaisee, kuinka monta riviä tekstialueella tulee näyttää.
kääri	Määrittää, tuleeko tekstin säilyttää rivinvaihdot lomaketta lähetettäessä. Kova arvo säilyttää kantavuuden, mutta pehmeä arvo ei. Jos arvoa hard käytetään, arvo on määritettävä cols-attribuutti.

5. Pudotusvalikko

Listat mahdollistavat suuren määrän esineiden järjestämisen tiiviisti. Avattavat luettelot luodaan käyttämällä ...-elementtiä. Niiden avulla voit valita yhden tai useamman arvon ehdotetusta joukosta. Oletusarvoisesti luetteloruudussa näkyy ensimmäinen elementti.

Lisää kohteita luetteloon, käytä elementtejä ..., jotka sijaitsevat sisällä.

Listojen järjestämiseen käytä ...-elementtiä, joka luo luetteloihin otsikot.

Luetteloissa voit muuttaa fontin kokoa, kirjasintyyppiä, väriä ja muita tekstin ominaisuuksia sekä lisätä reunuksia, taustaväriä ja taustakuvaa.

Taulukko 5. Tunnisteen attribuutit Attribuutin arvo/kuvaus

automaattitarkennus	Asettaa automaattisen tarkennuksen elementtiin, kun sivu latautuu.
liikuntarajoitteinen	Poistaa avattavan luettelon käytöstä.
muodossa	Määrittää muodon, johon se kuuluu tämä lista. Attribuutin arvo on lomakkeen tunniste.
useita	Voit valita yhden tai useamman kohteen, kun valitset, paina ja pidä painettuna Ctrl-näppäin.
nimi	Määrittää avattavalle luettelolle nimen. Attribuutin arvo sisältää nimen, joka kuvastaa luettelon aihetta.
edellytetään	Näyttää viestin, joka ilmoittaa, että käyttäjän on valittava arvo avattavasta luettelosta ennen lomakkeen lähettämistä.
koko	Asettaa näytöllä samanaikaisesti näkyvien luettelokohteiden määrän. Jos luettelokohteiden määrä ylittää asetetun määrän, näkyviin tulee vierityspalkki. Attribuutin arvo on määritetty positiivisena kokonaislukuna.

6. Lomakekenttien tarrat

Lomakeelementtien tunnisteet luodaan käyttämällä ...-elementtiä. On kaksi tapaa ryhmitellä tunnisteita ja kenttiä. Jos kenttä on elementin sisällä, for-attribuuttia ei tarvitse määrittää.

Kun sinä viime kerta lensitkö lentokoneella?

Kissa

7. Painikkeet

...-elementti luo klikattavia painikkeita. Toisin kuin painikkeilla ( , , , ), voit sijoittaa sisältöä - tekstiä tai kuvaa - elementin sisään.

Elementin näyttäminen oikein eri selaimet sinun on määritettävä type-attribuutti, esimerkiksi .

Painikkeiden avulla käyttäjät voivat lähettää tietoja lomakkeeseen, tyhjentää lomakkeen sisällön tai tehdä jotain muuta. Voit luoda reunuksia, muuttaa taustaa ja tasata tekstiä painikkeelle.

Taulukko 9. Tunnisteen attribuutit Attribuutin arvo/kuvaus

automaattitarkennus	Asettaa kohdistuksen painikkeeseen, kun sivu latautuu.
liikuntarajoitteinen	Poistaa painikkeen käytöstä, jolloin sitä ei voi klikata.
muodossa	Osoittaa yhden tai useamman lomakkeen, johon tämä painike kuuluu. Attribuutin arvo on vastaavan lomakkeen tunniste.
muodostumista	Attribuuttiarvo sisältää lomaketietojen käsittelijän URL-osoitteen, joka lähetetään, kun painiketta napsautetaan. Vain painiketyypin type="submit" kohdalla. Ohittaa elementille määritetyn action-attribuutin arvon.
formenctyyppi	Asettaa lomaketietojen koodaustyypin ennen sen lähettämistä palvelimelle, kun painikkeita, kuten type="submit" napsautetaan. Ohittaa elementille määritetyn enctype-attribuutin arvon. Mahdolliset arvot: Application/x-www-form-urlencoded on oletusarvo. Kaikki merkit koodataan ennen lähettämistä. multipart/form-data - merkkejä ei ole koodattu. Käytetään, kun tiedostot ladataan lomakkeella. text/plain - merkkejä ei koodata, ja välilyönnit korvataan +-symbolilla.
muotomenetelmä	Attribuutti määrittää menetelmän, jolla selain lähettää lomakkeen. Ohittaa elementille määritetyn method-attribuutin arvon. Määritetty vain painikkeille, joiden tyyppi on type="submit". Mahdolliset arvot: get - lomakkeen tiedot (nimi/arvo-pari) lisätään URL-osoitteeseen ja lähetetään palvelimelle. Tämä menetelmä on rajoitettu lähetettävän tiedon kokoon, eikä se sovellu salasanojen ja luottamuksellisten tietojen lähettämiseen. post - lomakkeen tiedot lisätään http-pyyntönä. Menetelmä on luotettavampi ja turvallisempi kuin get, eikä sillä ole kokorajoituksia.
muotonovalidaatti	Attribuutti määrittää, että lomaketietoja ei tule vahvistaa lähetyksen yhteydessä. Määritetty vain painikkeille, joiden tyyppi on type="submit".
muotokohde	Attribuutti määrittää, missä ikkunassa tulos näkyy lomakkeen lähettämisen jälkeen. Määritetty vain painikkeille, joiden tyyppi on type="submit". Ohittaa elementille määritetyn kohdeattribuutin arvon. _blank - lataa vastauksen uuteen ikkunaan/välilehteen _self - lataa vastauksen samaan ikkunaan (oletus) _parent - lataa vastauksen pääkehykseen _top - lataa vastauksen koko näytön kokoisena kehyksen nimi - lataa vastauksen kehykseen, jolla on määritetty nimi.
nimi	Asettaa painikkeen nimen, määritteen arvo on teksti. Käytetään linkittämiseen lomaketietoihin lomakkeen lähettämisen jälkeen tai linkittämiseen tätä painiketta(painikkeet) JavaScriptissä.
tyyppi	Määrittää painikkeen tyypin. Mahdolliset arvot: painike - napsautettava painike reset - nollauspainike, palaa alkuperäinen merkitys lähetä - painike lomaketietojen lähettämiseen.
arvo	Asettaa oletusarvon, joka lähetetään, kun painiketta napsautetaan.

8. Lomakkeiden valintaruudut ja valintanapit

Lomakkeiden valintaruudut määritetään konstruktilla ja valintanappi määritetään käyttämällä .

Valintaruudut, toisin kuin valintanapit, voidaan asettaa useiksi yhdessä muodossa. Jos valittu attribuutti on määritetty valintaruuduille, sivun latautuessa vastaavien lomakekenttien valintaruudut ovat jo valittuina.

Elementtiä käytetään toteutettaessa valintaa radiopainikkeiden ja valintaruutujen avulla. Voit valita haluamasi kohteen napsauttamalla siihen liittyvää tekstiä. Tätä varten sinun on asetettava se elementin sisään.

HTML-lomake on osa dokumenttia, jonka avulla käyttäjä voi syöttää kiinnostavia tietoja, jotka voidaan myöhemmin hyväksyä ja käsitellä palvelinpuolella. Toisin sanoen lomakkeita käytetään keräämään käyttäjien syöttämiä tietoja.

Jotta voit määrittää, mihin lomakeelementtiin nykyinen tunniste kuuluu, sinun on käytettävä tunnisteen for-attribuuttia. For-attribuutin arvon on vastattava sen lomakeelementin yleisen attribuutin arvoa, jota tunniste koskee. For-attribuuttia ei saa käyttää, jos elementti on elementin sisällä.

Katsotaanpa esimerkkiä käytöstä:

Esimerkki tagin käytöstä Kyllä Ei
Ei oikeastaan

Tässä esimerkissä me:

Sisällä ensimmäinen lomakkeet:
- Lähetetty kaksi radiopainikkeita ( ) valitaksesi yhden rajoitettu määrä vaihtoehtoja. Huomaa jälleen, että samassa lomakkeessa oleville valintanapeille on määritettävä sama nimi. varten ensimmäinen checked , joka määrittää, että elementti on esivalittava, kun sivu latautuu (tässä tapauksessa valintanappi, jonka arvo on kyllä ). Lisäksi olemme määrittäneet valintanapeille yleiset attribuutit, jotka määrittelevät elementille yksilöllisen tunnisteen.
- Sijoitimme kaksi elementtiä, jotka määrittävät tekstikenttiemme tekstitunnisteet. Huomaa, että määritimme for-attribuutin avulla, mihin lomakeelementtiin nykyinen tunniste kuuluu. For-attribuutin arvo vastaa tarvitsemamme valintanapin globaalin attribuutin arvoa.
Sisällä toinen lomakkeet:
- Lähetetty kaksi radiopainikkeita ( ) valitaksesi rajoitetusta vaihtoehdosta. varten toinen Olemme määrittäneet valintanapeille checked-attribuutin, joka ilmaisee, että elementti tulee olla esivalittu sivua latautuessa (tässä tapauksessa valintanappi, jonka arvo on no ). Lisäksi määritimme yksilölliset arvot lomakkeen valintanapeille ja samat nimet.
- Laitoimme kaksi elementtiä, niiden sisään asetimme radiopainikkeet. Toisin kuin edellisessä menetelmässä, valintanapeille ei tarvitse määrittää yleisiä attribuutteja (elementin tunnistetta) ja käyttää for-attribuuttia tekstitunnisteisiin viittaamaan niihin (tee sidonta).

Selaimessa molemmat tekstitunnisteiden käyttövaihtoehdot (menetelmät) näyttävät identtisiltä:

Työkaluvinkki syöttökentille

Katsotaanpa esimerkkiä käytöstä:

Esimerkki paikkamerkkien kirjautumismääritteen käytöstä:

Salasana:
Edelleen

SISÄÄN tässä esimerkissä määritimme elementille kanssa kirjoita tekstiä(yksirivinen tekstikenttä) ja kirjoita salasana (salasanakenttä) tekstivihje käyttäjälle (paikkamerkkiattribuutti), joka kuvaa syötteen odotetun arvon.

Esimerkkimme tulos:

Aiheeseen liittyviä kysymyksiä ja tehtäviä

Ennen kuin siirryt seuraavaan aiheeseen, suorita harjoitustehtävä:

Käytä saatuja tietoja, sävelle seuraavalla lomakkeella tilauksen tekeminen:

Varoitus: kentissä, joissa valintaa odotetaan, pitäisi olla mahdollista valita napsauttamalla tekstiä, ei vain itse elementtiä.

Kun olet suorittanut harjoituksen, tarkista sivun koodi avaamalla esimerkki erillinen ikkuna varmistaaksesi, että teit kaiken oikein.

Varoituslomake html. HTML-lomakkeiden luominen. Katsotaanpa pientä esimerkkiä

Lisää tästä aiheesta:

Muut artikkelit: