Tyhmä muoto html. HTML-lomakkeet. Useita tekstinsyöttösäätimiä

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.

Lomaketietojen vastaanottamiseen ja käsittelyyn web-ohjelmointikieliä, kuten PHP, Perl.

Ennen HTML5:n tuloa verkkolomakkeet koostuivat useista elementeistä , päättyy nappiin . Lomakkeiden muotoileminen eri selaimissa vaati paljon vaivaa. Lisäksi lomakkeet vaativat JavaScriptin syötteen vahvistamiseen, ja niistä puuttui erityisiä syöttökenttätyyppejä päivittäisten tietojen, kuten päivämäärien, sähköpostiosoitteiden ja URL-osoitteiden, määrittämiseen.

HTML5 lomakkeet ratkaisi useimmat näistä yleisistä ongelmista uusien attribuuttien avulla tarjoten mahdollisuuden muuttaa lomakeelementtien ulkoasua CSS3.

Riisi. 1. Parannetut verkkolomakkeet HTML5:llä

HTML5-lomakkeen luominen

1. Elementti

Minkä tahansa muodon perusta on elementti .... Se ei vaadi syöttöä, koska se on kontti, joka pitää kaikki lomakeohjaimet yhdessä - 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

Attribuutti	Merkitys/kuvaus
hyväksy-merkkisetti	Attribuutin arvo on välilyönnillä erotettu luettelo merkkikoodauksista, jota käytetään lomakkeen lähettämiseen esim. .
toiminta	Pakollinen attribuutti, joka määrittää sen palvelimen lomakkeenkäsittelijän URL-osoitteen, 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 asiakaspuolella JavaScript-skripteillä, voit määrittää arvon # action-attribuutille. Voit myös sopia, että vierailijan täyttämä lomake lähetetään sinulle sähköpostitse. Tätä varten sinun on tehtävä seuraava merkintä:
automaattinen täydennys
enctype	Käytetään osoittamaan MIME-lomakkeen mukana lähetettävät tiedot, esimerkiksi enctype="multipart/form-data" . Määritetty vain metodi="post" tapauksessa. application/x-www-form-urlencoded on oletussisältötyyppi, mikä 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ä välittää tiedot palvelimelle selaimen osoitepalkin kautta. 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 erikoismerkit 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 sekä luottamuksellisten tietojen ja salasanojen lähettämiseen. Tällä menetelmällä lähetetyt tiedot eivät näy URL-otsikossa, koska ne sisältyvät viestin runkoon.
nimi	Sarjat lomakkeen nimi, jota käytetään lomakeelementtien käyttämiseen komentosarjojen avulla, kuten 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) _top on ylimmän tason ikkuna suhteessa tähän kehykseen. Jos puhelu ei tule lapsikehyksestä, niin samaan kehykseen.

2. Lomakeelementtien ryhmittely

Elementti

...

suunniteltu ryhmittelemään toisiinsa liittyviä elementtejä ja siten jakamaan muodon loogisiksi fragmenteiksi.

Jokainen elementtiryhmä voidaan nimetä elementin avulla , joka tulee heti tagin jälkeen

. Ryhmän nimi näkyy vasemmassa yläreunassa

. Esimerkiksi jos elementissä

Yhteystiedot tallennetaan:

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

Taulukko 2. Tunnisteen attribuutit

Attribuutti	Merkitys/kuvaus
liikuntarajoitteinen	Jos attribuutti on olemassa, ryhmä toisiinsa liittyviä lomakeelementtejä, jotka sijaitsevat säilön sisällä , estetty täyttöä ja muokkaamista varten. 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 tämä elementtiryhmä kuuluu. Mikään selain ei tue määritettä tällä hetkellä.
nimi	Määrittää Nimi, jota käytetään linkittämään JavaScript-elementteihin tai linkittämään lomaketietoihin sen jälkeen, kun lomake on täytetty ja lähetetty. Se on analoginen id-attribuutin kanssa.

3. Luo lomakekenttiä

Elementti luo useimmat lomakekentät. 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 taustakuvaa. Kentän leveys määritetään leveysominaisuuden avulla.

Taulukko 3. Tunnisteen attribuutit

Attribuutti	Merkitys/kuvaus
hyväksyä	Määrittää palvelimelle lähetettävän tiedoston tyypin. Tarkoitettu 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 kirjoittaessasi: 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 fokusoitu (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 yhtä suuri kuin elementin id-attribuutti samassa asiakirjassa. 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 lomakkeen kohdeattribuutin arvon. _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"-tyyppisen lomakekentän korkeuden, esimerkiksi . On suositeltavaa asettaa sekä kentän korkeus että leveys samanaikaisesti.
lista	On viittaus elementtiin , 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 seuraavien kenttätyyppien kanssa: 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ää kenttään kirjoitettavien merkkien enimmäismäärän. Oletusarvo on 524288 merkkiä.
min	Mahdollistaa sallitun numeerisen syötteen rajoittamisen 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, jota käytetään elementin käyttämiseen , esimerkiksi css-tyylisivuilla. Se on analoginen id-attribuutin kanssa.
kuvio	Voit määrittää käyttämällä tavallinen ilme niiden tietojen syntaksi, jotka on sallittava syöttää tiettyyn kenttään. Esimerkiksi pattern="(3)-(3)" - hakasulkeet asettavat hyväksyttävien merkkien alueen, tässä tapauksessa - kaikki pienet kirjaimet, luku suluissa osoittaa, että tarvitaan kolme pientä kirjainta, joita seuraa viiva, 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 isolla englanninkielisellä T-kirjaimella erotettuna käyttämällä kuviota dd.mm.yyyy hh:mm. Syntymäpäivä - päivä ja aika:
	email – Tätä määritettä tukevat selaimet odottavat käyttäjän syöttävän tietoja, 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. Sen min , max ja step määritteet määrittävät ylä-, ala- ja arvojen välisen askeleen. Nämä attribuutit oletetaan kaikille elementeille, joilla on numeeriset indikaattorit. Niiden oletusarvot riippuvat elementtityypistä. 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 selaimen asentamilla kuvakkeilla. 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 viikkoja 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 sinun on luotava 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

<tr><th>Attribuutti</th>
<th>Merkitys/kuvaus</th>
</tr><tr><td>automaattitarkennus</td>
<td>Kohdistus haluttuun alkutekstikenttään automaattisesti.</td>
</tr><tr><td>sarakkeet</td>
<td>Asettaa leveyden merkkien lukumäärän mukaan.  Jos käyttäjä kirjoittaa lisää tekstiä, näkyviin tulee vierityspalkki.</td>
</tr><tr><td>liikuntarajoitteinen</td>
<td>Poistaa käytöstä mahdollisuuden muokata ja kopioida kentän sisältöä.</td>
</tr><tr><td>muodossa</td>
<td>Attribuutin arvon on oltava yhtä suuri kuin elementin id-attribuutin arvo <form>samassa asiakirjassa.  Tunnistaa yhden tai useamman lomakkeen, johon tämä tekstikenttä kuuluu.</td>
</tr><tr><td>Maksimi pituus</td>
<td>Attribuutin arvo määrittää kenttään kirjoitettavien merkkien enimmäismäärän.</td>
</tr><tr><td>nimi</td>
<td>Määrittää tekstikentän nimen.</td>
</tr><tr><td>paikanpitäjä</td>
<td>Määrittää lyhyen tekstikehotteen, joka kuvaa odotetun syöttöarvon.</td>
</tr><tr><td>Lue ainoastaan</td>
<td>Poistaa käytöstä mahdollisuuden muokata kentän sisältöä.</td>
</tr><tr><td>edellytetään</td>
<td>Näyttää viestin, joka ilmoittaa, että tämä kenttä on pakollinen.</td>
</tr><tr><td>rivit</td>
<td>Määrittää numeron, joka ilmaisee, kuinka monta riviä tekstialueella tulee näyttää.</td>
</tr><tr><td>kääri</td>
<td>Määrittää, tuleeko tekstin säilyttää rivinvaihdot lomaketta lähetettäessä.  Kova arvo säilyttää kääreen, mutta pehmeä arvo ei.  Jos kovaa käytetään, cols-attribuutin arvo on määritettävä.</td>
</tr></table><h3>5. Pudotusvalikko</h3>
<p>Listat mahdollistavat suuren määrän esineiden järjestämisen tiiviisti.  Pudotusvalikot luodaan elementin avulla <select>...</select>.  Niiden avulla voit valita yhden tai useamman arvon ehdotetusta joukosta.  Oletusarvoisesti luetteloruudussa näkyy ensimmäinen elementti.</p>
<p>Elementtejä käytetään kohteiden lisäämiseen luetteloon <option>...</option>, jotka sijaitsevat sisällä <select> .</p>
<p>Listojen systematisoimiseksi käytä elementtiä <optgroup>...</optgroup>, joka luo otsikoita luetteloihin.</p>
<p>Luetteloissa voit muuttaa fontin kokoa, kirjasintyyppiä, väriä ja muita tekstin ominaisuuksia sekä lisätä reunuksia, taustaväriä ja taustakuvaa.</p>
<table class="t3">Taulukko 5. Tunnisteen attribuutit <select>
<tr><th>Attribuutti</th>
<th>Merkitys/kuvaus</th>
</tr><tr><td>automaattitarkennus</td>
<td>Asettaa automaattisen tarkennuksen elementtiin, kun sivu latautuu.</td>
</tr><tr><td>liikuntarajoitteinen</td>
<td>Poistaa avattavan luettelon käytöstä.</td>
</tr><tr><td>muodossa</td>
<td>Määrittää lomakkeen, johon tämä luettelo kuuluu.  Attribuutin arvo on lomakkeen tunniste.</td>
</tr><tr><td>useita</td>
<td>Voit valita yhden tai useamman kohteen, kun valitset, paina ja pidä alhaalla Ctrl-näppäintä.</td>
</tr><tr><td>nimi</td>
<td>Määrittää avattavalle luettelolle nimen.  Attribuutin arvo sisältää nimen, joka kuvastaa luettelon aihetta.</td>
</tr><tr><td>edellytetään</td>
<td>Näyttää viestin, joka ilmoittaa, että käyttäjän on valittava arvo avattavasta luettelosta ennen lomakkeen lähettämistä.</td>
</tr><tr><td>koko</td>
<td>Asettaa näytöllä samanaikaisesti näkyvien luettelokohteiden määrän.  Jos luettelokohteiden määrä ylittää määritetyn määrän, näkyviin tulee vierityspalkki.  Attribuutin arvo on määritetty positiivisena kokonaislukuna.</td>
</tr></table><h3>6. Lomakekenttien tarrat</h3>
<p>Lomakeelementtien tunnisteet luodaan elementillä <label>...</label>.  On kaksi tapaa ryhmitellä tunnisteita ja kenttiä.  Jos kenttä on elementin sisällä <label>, silloin for-attribuuttia ei tarvitse määrittää.</p><p>
 
<label for="comments">Milloin lensit viimeksi lentokoneessa?</label>
<textarea id="comments">

Kissa

7. Painikkeet

Elementti luo klikattavia painikkeita. Toisin kuin luodut painikkeet ( , , , ), elementin sisällä .

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

Attribuutti	Merkitys/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ällä menetelmällä on rajoituksia 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äytetään 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ämään lomaketietoihin lomakkeen lähettämisen jälkeen tai linkittämään tiettyihin painikkeisiin JavaScriptissä.
tyyppi	Määrittää painikkeen tyypin. Mahdolliset arvot: painike - napsautettava painike reset - nollauspainike, palauttaa alkuperäisen arvon lähetä - painike lomaketietojen lähettämiseen.
arvo	Asettaa oletusarvon, joka lähetetään, kun painiketta napsautetaan.

8. Lomakkeiden valintaruudut ja valintanapit

Lomakkeiden valintaruudut asetetaan konstruktilla , ja kytkin - 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 elementin sisällä .

HTML-lomakkeita tarvitaan, kun haluat kerätä tietoja sivuston vierailijalta. Esimerkiksi käyttäjän rekisteröinnin yhteydessä haluat kerätä tietoja, kuten nimi, sähköpostiosoite, luottokortti jne.

Lomake ottaa syötteen sivuston vierailijalta ja lähettää sen sitten loppusovellukseen, kuten CGI, ASP-skripti tai komentosarja jne. PHP-pääsovellus suorittaa tarvittavan käsittelyn siirretyille tiedoille sovelluksen sisäisen liikelogiikan perusteella.

Saatavilla on erilaisia lomakeelementtejä, kuten tekstikentät, tekstialuekentät, pudotusvalikko, valintanapit, valintaruudut jne.

Tag HTML:ää käytetään HTML-lomakkeen luomiseen ja sillä on seuraava syntaksi:

lomakeelementit, kuten syöttö, tekstialue jne.

Lomakkeen attribuutit

Seuraavassa on yleisistä määritteistä erillään luettelo yleisimmin käytetyistä lomakemääritteistä:

Attribuutti	Kuvaus
toiminta	Taustaohjelma on valmis käsittelemään siirretyt tiedot.
menetelmä	Tietojen lataamiseen käytettävä menetelmä. Yleisimmin käytetyt RECEIVE- ja POST-menetelmät.
kohde	Määritä kohdeikkuna tai kehys, jossa komentosarjan tulos näytetään. Se hyväksyy arvot, kuten _blank, _self, _parent jne.
enctype	Enctype-attribuutin avulla voit määrittää, kuinka selain salaa tiedot ennen kuin se lähettää ne palvelimelle. Mahdolliset arvot ovat seuraavat: Application/x-www-form-urlencoded- Tämä on vakiomenetelmä useimmille lomakkeille, joita käytetään yksinkertaisissa skenaarioissa. moniosainen/form-data- Tätä käytetään, kun haluat ladata binääritietoja arkistojen muodossa, kuten kuva, arkisto jne. sanat

Huomautus: Voit viitata Perl & CGI saadaksesi lisätietoja lomaketietojen lataamisesta.

HTML-lomakkeen ohjaimet

Voit kerätä tietoja HTML-lomakkeen avulla erityyppisiä lomakeohjausobjekteja:

Valintaruudun säätimet

Radiolaatikon säätimet

Valitse ohjauslaatikko

Myymälän valintalaatikot

Piilotetut säätimet

Napsautettavat painikkeet

Imagine ja takaisin -painike

Tekstinsyötön säätimet

Lomakkeissa käytetään kolmenlaisia tekstinsyöttöjä:

Yksirivinen tekstinsyöttösäätimet - tätä ohjausobjektia käytetään kohteille, jotka vaativat vain yhden käyttäjän syötteen, kuten hakukentät tai nimet. Ne luodaan tunnisteen avulla HTML.

Salasanan syöttöhallinta - Tämä on myös yksirivinen tekstinsyöttö, mutta se peittää merkin heti, kun käyttäjä syöttää sen. Ne luodaan myös tunnisteen avulla HTML.

Moniriviset tekstinsyötön säätimet - tätä käytetään, kun vaaditaan antamaan käyttäjälle tiedot, jotka voivat olla pidempiä kuin yksittäinen tarjous. Monikaistaiset tulosäätimet luodaan tunnisteen avulla </b> HTML.</p> </ul><h2>Yksirivinen tekstinsyötön säätimet</h2> <p>Tätä ohjausobjektia käytetään kohteille, jotka vaativat vain yhden käyttäjän syötteen, kuten hakukentät tai nimet. Ne luodaan tunnisteen avulla <input>HTML.</p> <h3>Esimerkki</h3> <p>Tässä on perusesimerkki yksirivisestä tekstinsyötöstä, jota käytetään etu- ja sukunimen hyväksymiseen:</p><p> <!DOCTYPE html> <html> <head> <title>Tekstinsyötön ohjaus</title> </head> <body> <form >Etunimi: <input type="text" name="first_name" /> <br>Sukunimi: <input type="text" name="last_name" /> </form> <script type="text/javascript">  </script><br> <br> </body> </html> </p><p>Tämä antaa seuraavat tiedot:</p> <h3>Attribuutit</h3> <p> <input>luodaksesi tekstikentän.</p> <h2>Salasanan syöttöohjaimet</h2> <p>Tämä on myös yksirivinen tekstinsyöttö, mutta se peittää merkin, kun käyttäjä syöttää sen. Ne luodaan myös tunnisteen avulla <input> <b>Salasana</b>.</p> <h3>Esimerkki</h3> <p>Tässä on perusesimerkki yksirivisestä salasanan syötöstä, jota käytetään hyväksymään käyttäjän salasana:</p><p> <!DOCTYPE html> <html> <head> <title>Salasanan syöttöhallinta</title> </head> <body> <form >Käyttäjätunnus: <input type="text" name="user_id" /> <br>Salasana: <input type="password" name="password" /> </form> <script type="text/javascript">  </script><br> <br> </body> </html> </p><p>Tämä antaa seuraavat tiedot:</p> <h3>Attribuutit</h3> <p>Noudatetaan tunnisteen attribuuttiluetteloa <input>salasanakentän luomiseksi.</p> <h2>Useita tekstinsyöttösäätimiä</h2> <p>Tätä käytetään tarvittaessa antamaan käyttäjälle tiedot, jotka voivat olla pidempiä kuin yksittäinen tarjous. Monikaistaiset tulosäätimet luodaan tunnisteen avulla <textarea>HTML.</p> <h3>Esimerkki</h3> <p>Tässä on perusesimerkki monirivisesta tekstinsyötöstä, jota käytetään kohteen kuvauksen antamiseen:</p><p> <!DOCTYPE html> <html> <head> <title>Multi-Line Input Control</title> </head> <body> <form>Kuvaus: <br /> <textarea rows="5" cols="50" name="description">Kirjoita kuvaus tähän...

Tämä antaa seuraavat tiedot:

Attribuutit

Noudatetaan tunnisteen attribuuttiluetteloa .</p> <h2>Valintaruudun ohjaus</h2> <p>Valintaruutuja käytetään, kun useampi kuin yksi vaihtoehto on valittuna. Ne luodaan myös tunnisteen avulla <input>HTML, mutta type-attribuutti on asetettu arvoon <b>valintaruutu</b>.</p> <h3>Esimerkki</h3> <p>Tässä on esimerkki HTML-koodista lomakkeelle, jossa on kaksi valintaruutua:</p><p> <!DOCTYPE html> <html> <head> <title>Valintaruudun ohjaus</title> </head> <body> <form> <input type="checkbox" name="maths" value="päällä">Matematiikka <input type="checkbox" name="physics" value="päällä">Fysiikka</form> <script type="text/javascript">  </script><br> <br> </body> </html> </p><p>Tämä antaa seuraavat tiedot:</p> <h3>Attribuutit</h3> <p>Noudatetaan tunnisteen attribuuttiluetteloa <checkbox>.</p> <h2>Radiopainikkeen ohjaus</h2> <p>Radiopainikkeita on käytettävä, kun vaihtoehtoja on useita, vain yksi vaihtoehto. Ne luodaan myös tunnisteen avulla <input>HTML, mutta type-attribuutti on asetettu arvoon <b>radiolähetyksiä</b>.</p> <h3>Esimerkki</h3> <p>Tässä on esimerkki HTML-koodista lomakkeelle, jossa on kaksi valintanappia:</p><p> <!DOCTYPE html> <html> <head> <title>Radiolaatikon ohjaus</title> </head> <body> <form> <input type="radio" name="subject" value="matematiikka">Matematiikka <input type="radio" name="subject" value="fysiikka">Fysiikka</form> <script type="text/javascript">  </script><br> <br> </body> </html> </p><p>Tämä antaa seuraavat tiedot:</p> <h3>Attribuutit</h3> <p>Seuraavassa on luettelo valintanapin määritteistä.</p> <h2>Valitse laatikon ohjaus</h2> <p>Valintaruutu, jota kutsutaan myös pudotusvalikosta, on laatikko, joka tarjoaa mahdollisuuden listata erilaisia vaihtoehtoja alasvetoluettelon muodossa, josta käyttäjä voi valita yhden tai useamman vaihtoehdon.</p> <h3>Esimerkki</h3> <p>Tässä on esimerkki HTML-koodista lomakkeelle, jossa on yksi avattava valikko</p><p> <!DOCTYPE html> <html> <head> <title>Valitse Box Control</title> </head> <body> <form> <select name="dropdown"> <option value="Matematiikka" selected>Matematiikka</option> <option value="Fysiikka">Fysiikka</option> </select> </form> <script type="text/javascript">  </script><br> <br> </body> </html></p> <h2>Kuvaus</h2> <p>HTML-tunniste <form>luo HTML-lomakkeen, jota käytetään käyttäjän syötteiden lähettämiseen palvelimelle.</p> <p>Koska lomake itsessään ei tarjoa mitään keinoja käyttäjän syöttämiseen, elementin sisällä <form>sisältää muita elementtejä, joiden tarkoituksena on tarjota käyttäjälle erilaisia tapoja syöttää tietoja:</p> <p>Näiden elementtien lisäksi voit käyttää mitä tahansa muita HTML-elementtejä lomakkeen sisällä.</p> <p>Lomaketta ei oletuksena näytetä verkkosivulla millään tavalla, vain sen sisällä olevat elementit näkyvät, mutta CSS:n avulla lomakkeelle voi antaa minkä tahansa ulkonäön.</p> <h2>Attribuutit</h2>accept-charset: Määrittää merkistökoodauksen tai välilyönnillä erotetun merkistöluettelon lomakkeelle, joka lähetetään palvelimelle käsittelyä varten. Jos tiedoissa on merkkejä, joita määritetty koodaus ei tue, selain yrittää määrittää niille sopivan koodauksen. Jos sopivaa koodausta ei voida määrittää, merkit koodataan numeerisiksi koodeiksi. <p>Oletusarvo on varattu merkkijono "UNKNOWN" (selaimet tulkitsevat tämän arvon merkkikoodaukseksi, joka on identtinen elementin sisältävän asiakirjan kanssa <form>). toimenpide: Osoittaa täytetyn lomakkeen tietojen lähetysosoitteen, jossa nämä tiedot käsitellään. automaattinen täydennys: määrittää, otetaanko lomakkeiden automaattinen täydennys käyttöön vai poistetaanko se käytöstä. Kun automaattinen täyttö on käytössä, selain täyttää automaattisesti arvot, jotka käyttäjä on antanut edellisellä lomakkeella. Mahdolliset attribuuttiarvot:</p><ul><li><b>päällä:</b> selain näyttää automaattisesti käyttäjän aiemmin syöttämät arvot (oletusarvo).</li> <li><b>vinossa:</b> Käyttäjän on syötettävä arvot jokaiseen kenttään aina, kun lomaketta käytetään. Aiemmin syötettyjä arvoja ei näytetä.</li> </ul><p>Huomautus: Opera-selain ei tue automaattisen täydennyksen attribuuttia.</p><p>Enctype: Määrittää, kuinka lomaketiedot koodataan, kun ne lähetetään palvelimelle. Voidaan käyttää vain method="post"-attribuutin kanssa. Mahdolliset arvot:</p><ul><li><b>Application/x-www-form-urlencoded:</b> oletus: kaikki merkit koodataan ennen lähettämistä (välilyönnit muunnetaan "+"-merkeiksi ja erikoismerkit ASCII HEX -arvoiksi).</li> <li><b>moniosainen/lomake-data:</b> merkkejä ei ole koodattu. Käytetään elementeille <input>, jonka type-attribuutiksi on asetettu "file".</li> <li><b>teksti/tavallinen:</b> välilyönnit muunnetaan "+"-merkiksi, mutta ne eivät koodaa erikoismerkkejä, kuten heittomerkkejä, heksadesimaaliarvoiksi.</li> </ul> menetelmä: Määrittää HTTP-tiedonsiirtotavan, jota käytetään lomaketietoja lähetettäessä. Mahdolliset arvot: <ul><li><b>saada:</b> Tiedot välitetään selaimen osoitepalkkiin nimi=arvo-pareina liittämällä ne URL-osoitteen loppuun. Kysymysmerkkiä (?) käytetään erottimena pää-URL-osoitteen ja lähetetyn datan välillä ja et-merkkiä (&) käytetään erottamaan lähetetyt tiedot toisistaan. Tätä menetelmää käytetään pienten tietojen lähettämiseen.</li> <li><b>lähettää:</b> tietoja ei lähetetä osana URL-osoitetta, vaan selainpyynnön sisältönä. Tätä menetelmää käytetään suurten tietomäärien lähettämiseen.</li> </ul> Jos method-attribuuttia ei ole määritetty, GET-menetelmää käytetään oletuksena. nimi: Määrittää lomakkeen nimen. Nimeä voidaan käyttää JavaScriptissä viittaamaan elementtiin nimellä tai viittaamaan lomaketietoihin sen lähettämisen jälkeen. Jos yhdessä dokumentissa käytetään useita lomakkeita, niiden nimiä ei saa toistaa eikä attribuutin arvoksi saa jättää tyhjää merkkijonoa. novalidate: Ilmaisee, että lomakkeelle annettuja tietoja ei validoida ennen lähettämistä. Mahdolliset arvot novalidate boolean-attribuutille: <form novalidate> <form novalidate="novalidate"> <form novalidate=""> <p>Huomautus: Novalidate-attribuuttia ei tueta IE9:ssä ja aiemmissa versioissa eikä Safarissa.</p><p>Kohde: Määrittää kehyksen nimen tai avainsanan, joka määrittää, missä lomakkeen lähettämisen jälkeen saatu vastaus näytetään.</p><ul><li><b>_tyhjä:</b> avaa asiakirjan uuteen ikkunaan tai välilehteen.</li> <li><b>_self:</b> avaa asiakirjan samassa hakemistossa, jossa linkki sijaitsee (oletus).</li> <li><b>_parent:</b> avaa asiakirjan pääkehyksessä.</li> <li><b>_top:</b> avaa asiakirjan ikkunan koko leveydelle.</li> <li><b>frame_name:</b> avaa asiakirjan iframe-kehyksessä, jonka nimi määritettiin arvoksi.</li> </ul><p>Tag <form>tukee myös maailmanlaajuisia määritteitä ja tapahtumia</p> <h2>Oletustyyli</h2>muoto ( näyttö: lohko; marginaali yläosa: 0em; ) <h3>Esimerkki</h3> <form action="demo_form.asp">Nimi: <input type="text" name="fname" value="Mikki"><br>Sukunimi: <input type="text" name="lname" value="Hiiri"><br> <input type="submit" value="Lähetä"> </form> <br><p>HTML:n lomakkeet ovat monimutkaisin, mutta toisaalta ehkä mielenkiintoisin aihe HTML:ssä.</p> <p>Verkkolomakkeiden avulla sivuston vierailijat voivat syöttää tiettyjä tietoja erityiskenttiin, ja kehittäjä saa ne hänelle sopivassa muodossa.</p> <p>Esimerkki lomakkeesta voi olla vieraskirja, kyselylomake tai verkkotesti. Lomakkeet täytetään rekisteröityessä verkkosivulle, tehtäessä tilauksia verkkokaupassa jne.</p> <p>HTML:n avulla voit luoda lomakekehyksen: tekstikentät, valikot, luettelot, painikkeet, valintaruudut ja valintanapit. Eli ne elementit, joiden avulla tietyt tiedot syötetään lomakkeeseen.</p> <p>Tämän jälkeen lomakkeelle syötetyt tiedot lähetetään palvelimelle käsittelyä varten. Mutta HTML on tässä voimaton - siihen liitetty ohjelma tai komentosarja käsittelee jo lomaketta. Tällaiset ohjelmat on yleensä kirjoitettu PHP- tai JavaScript-kielellä.</p> <h4>Lomakkeen attribuutit - tag <form></h4> <p>Web-sivulla voi olla useita lomakkeita ( <i>niin paljon kuin kehittäjä tarvitsee</i>). Jokainen niistä alkaa tunnisteella <form>ja päättyy sulkevaan tagiin</form> .</p> <p>Action-attribuutti on pakollinen kaikille lomakkeille - se määrittää lomaketta palvelevan tiedoston osoitteen ( <i>käsittelee siihen syötettyjä tietoja</i>).</p> <p>Metod-attribuutti määrittää, kuinka lomakkeen sisältö lähetetään. On olemassa kaksi tapaa - GET ja POST. Nyt ei ole järkevää syventyä näihin parametreihin, koska tietojen lähettämisen aihe GET- ja POST-menetelmillä liittyy tietojenkäsittelykieliin ( <i>esimerkiksi PHP</i>). Riittää, kun tietää, että lomakkeissa käytetään useimmiten POST-tiedonsiirtomenetelmää.</p> <p>Tag name -attribuutti <form>on valinnainen. Mutta jos asiakirjassa on useita lomakkeita, käsittelijän on tunnistettava jokainen niistä jollakin tavalla. Siksi nimi-attribuutin läsnäolo tässä tapauksessa on välttämätöntä - se määrittää lomakkeen ainutlaatuisen nimen.</p> <p>Voit myös asettaa syötetietojen koodauksen - tästä vastaa attribuutti accept-charset, ja myös määrittää target-attribuutin avulla ikkuna, jossa lähetetyn lomakkeen käsittelyn tulos näytetään ( <i>uudessa tai nykyisessä ikkunassa</i>).</p> <p>Mutta itse tagi <form>ei ole mitään järkeä, koska lomake lähettää tietoja, jotka on ensin syötettävä jonnekin!</p> <h4>Datan syöttö. Lomakekentät - tag <input></h4> <p>Tag <input>Tämä on yleisin lomakkeista löytyvä tunniste. Se on suunniteltu luomaan erilaisia elementtejä, joita käytetään tietojen syöttämiseen lomakkeeseen: tekstikentät, painikkeet, valintaruudut, valintanapit.</p> <p>type on tunnisteen tärkein attribuutti <input>. Se asettaa kentän tyypin ( <i>elementti</i>) lomakkeet:</p> <table width="100%" border="1"><tr><td width="300px"> <p>Attribuutin arvon tyyppi="..."</p> </td> <td width="245px"> <p>Tulos</p> </td> <td> <p>Kuvaus</p> </td> </tr><tr><td> <p><input type="text" size="20" value="Sinun nimesi..." ></p> </td> <td align="center"> </td> <td><p>Yksirivinen tekstikenttä tekstin syöttämistä varten. Koko-attribuutti määrittää kentän leveyden merkeissä.</p> </td> </tr><tr><td><p><input type="password" maxlength="10" size="20" ></p> </td> <td align="center"> </td> <td><p>Tekstikenttä salasanan syöttämistä varten. <br>Maxlength-määrite määrittää syötettävien merkkien enimmäismäärän</p> </td> </tr><tr><td><p><input type="radio" name="radio" value="1" checked></p> <p><input type="radio" name="radio" value="2" ></p> <p><input type="radio" name="radio" value="3" ></p> </td> <td align="center"> </td> <td><p>Vaihtaa. <br>Voit valita vain yhden vaihtoehdon tarjotuista. Tarkistettu attribuutti määrittää esitarkistetun kentän.</p> </td> </tr><tr><td><p><input type="checkbox" name="flag" value="1" checked></p> <p><input type="checkbox" name="flag" value="2" ></p> <p><input type="checkbox" name="flag" value="3" ></p> </td> <td align="center"> </td> <td><p>Valintaruutu. <br>Valittavana on useita vaihtoehtoja.</span> Attribuutti <span>checked määrittää esitarkistetun kentän.</p> </td> </tr><tr><td><p><input type="button" value="Painike" ></p> </td> <td align="center"> </td> <td><p>Painike. <br>Arvo-attribuutti määrittää painikkeen tunnisteen.</p> </td> </tr><tr><td><p><input type="reset" value="Nollaa" ></p> </td> <td align="center"> </td> <td><p>Nollaus painike. <br>Palauttaa lomakekentät alkuperäiseen muotoonsa. Nollaa syötetyt tiedot.</p> </td> </tr><tr><td><p><input type="submit" ></p> </td> <td align="center"> </td> <td><p>Painike syötettyjen tietojen lähettämiseen.</p> </td> </tr><tr><td><p><input type="file" ></p> </td> <td align="center"> </td> <td><p>Kenttä lähetettävän tiedoston nimen kirjoittamiseen.</p> </td> </tr><tr><td><p><input type="image" src="img/buttom.gif" ></p> </td> <td align="center"> </td> <td><p>Kuvapainike. <br>Sitä käytetään myös tiedon lähettämiseen palvelimelle. Attribuutti src määrittää kuvatiedoston osoitteen.</p> </td> </tr><tr><td><p><input type="hidden" size="20" ></p> </td> <td align="center"> </td> <td><p>Piilotettu kenttä - käyttäjälle näkymätön.</p> </td> </tr></table><h3>Pudotusvalikko - Tunnisteet <select>Ja <option></h3> <p>Tag <select>sama kuin tag <input>palvelee tiedon keräämistä - se luo luettelon, josta voidaan valita yksi tai useampi elementti. Jokainen elementti vastaa arvoa, joka lähetetään palvelimelle käsittelyä varten.</p> <p>Luotavan luettelon tyyppi riippuu size-attribuutin arvosta: with size= "1" ( <i>oletusarvo</i>) luettelo avautuu.</p> <p>Koko-attribuutin eri arvo vastaa näytettyjen luettelokohteiden määrää. Esimerkiksi size="3":lla näkyy kolme elementtiä. Voit tarkastella muita luettelon kohteita ( <i>jos sellaisia on</i>) kannattaa käyttää pystysuoraa vierityspalkkia, joka lisätään automaattisesti.</p> <p>Oletuksena vain yksi luettelokohde voidaan valita. Useita määritteen lisääminen tunnisteeseen <select>voit valita useita luettelokohteita hiirellä ja Ctrl- ja Shift-näppäimillä.</p> <p>Jos useat määrite on olemassa, kaikki tai osa luettelon kohteista näytetään ( <i>selaimesta riippuen</i>), jos size-attribuuttia ei ole asetettu tiettyyn määrään näkyviä kohteita.</p> <p>Avattavan luettelon pakollinen elementti on tunniste <option>. Se sijaitsee tagin sisällä <select>ja luo jokaisen luettelokohteen.</p> <p>Tunnisteen nimi-attribuutin käyttäminen <select>listalle annetaan nimi ja käytetään tagin value-attribuuttia <option>listaelementille on määritetty arvo. Siten palvelimelle lähetetään "nimi=arvo" -pari - listan nimi ja valitun elementin arvo.</p> <p>Tunnisteen valittu attribuutti <option>määrittää aiemmin valitun luettelokohteen, ja estetty attribuutti estää luettelokohteen - sitä ei voi valita.</p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><form> <br><p>Pääsuunta on yksi neljästä pääsuunnasta:</p> <br> <select name= "storona" > <br> <option value= "pohjoinen" >pohjoinen</option><br> <option value= "Etelä" >Etelä</option><br> <option value= "länteen" >länteen</option><br> <option value= "Itään" >Itään</option> <br> </select><br><p>7 maailman ihmettä!</p> <br> <select name= "chudo" size= "4" multiple> <br> <option value= "1" >Cheopsin pyramidi</option><br> <option value= "2" selected> <span>Babylonin riippuvat puutarhat</span> </option><br> <option value= "3" disabled> <span>Zeus-patsas Olympiassa</span> </option><br> <option value= "4" > <span>Artemiksen temppeli Efesoksessa</span> </option><br> <option value= "5" > <span>mausoleumi Halicarnassuksessa</span> </option><br> <option value= "6" > <span>Rodoksen kolossi</span> </option><br> <option value= "7" > <span>Aleksandrian majakka</span> </option><br> </select><br><p> <input type= "reset" value= "Nollaa" > </p> <br> </form> </p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_result.jpg' height="61" width="200" loading=lazy loading=lazy></p> <h3>Monirivinen tekstikenttä - tag <textarea></h3> <p>Tag <textarea>luo monirivisen tekstikentän. On sallittua tehdä rivinvaihtoja, jotka säilyvät siirrettäessä tietoja käsittelijälle.</p> <p>Tag name -attribuutti <textarea>on pakollinen - sitä käyttämällä tekstikenttään annetaan nimi.</p> <p>Disable-attribuutti poistaa kentän käytöstä - kentän sisältöä ei voi muuttaa eikä se ole käytettävissä. Readonly-attribuutti ilmaisee, että kenttä on vain luku -tilassa - käyttäjällä ei ole mahdollisuutta muokata sisältöä, mutta se on käytettävissä - se voidaan valita ja esimerkiksi kopioida.</p> <p>Voit määrittää tekstikentän leveyden merkeissä ja kentän korkeuden riveinä käyttämällä cols- ja rows-attribuutteja.</p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Jos kentän sisältö ylittää sen koon, näkyviin tulee liukusäädin.</span>

Jos kentän sisältö ylittää sen koon, näkyviin tulee liukusäädin.

Esimerkki lomakkeen käytöstä

Katsotaan nyt kuinka lomake toimii.

Opetusvideon tilauslomake:

Sinun nimesi: *

Tilauksesi:

Valitse media:

CD

DVD

USB Flash

Sähköpostisi: *

Osoitteesi: *

Kuvaus

Tag
asentaa 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.

Lähettääksesi lomakkeen palvelimelle, käytä Lähetä-painiketta, sama voidaan tehdä painamalla Enter-näppäintä lomakkeen sisällä. Jos lomakkeessa ei ole Lähetä-painiketta, Enter-näppäin simuloi sen käyttöä.

Kun lomake lähetetään palvelimelle, tietojen hallinta siirtyy tunnisteen action-attribuutin määrittämälle ohjelmalle . Selain valmistelee ensin tiedot "nimi=arvo"-parin muodossa, jossa nimi määräytyy tagin name-attribuutin mukaan. , ja arvon syöttää käyttäjä tai se asetetaan oletuslomakkeen kenttään. Jos tietojen lähettämiseen käytetään GET-menetelmää, osoitepalkki voi olla seuraavanlainen.

http://www..cgi?nick=%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, jossa HH on ASCII-merkin arvon heksadesimaalikoodi), ja välilyönti korvataan plusmerkillä (+).

Sallittu säiliön sisällä sijoittaa muita tunnisteita, mutta itse lomake ei näy verkkosivulla millään tavalla, vain sen elementit ja sisäkkäisten tagien tulokset näkyvät.

Syntaksi
...

Attribuutit
Asettaa koodauksen, jolla palvelin voi vastaanottaa ja käsitellä tietoja. Lomaketietoja käsittelevän ohjelman tai asiakirjan osoite. Mahdollistaa lomakekenttien automaattisen täytön. Lomaketietojen koodausmenetelmä. HTTP-protokollamenetelmä. Lomakkeen nimi. Ohittaa sisäänrakennetun lomaketietojen tarkistuksen syötteiden oikeellisuuden varalta. Sen ikkunan tai kehyksen nimi, johon käsittelijä lataa palautetun tuloksen.
Sulkeva tagi

Edellytetään.

HTML5 IE Cr Op Sa Fx
FORM-tunniste

Mitä luulet lyhenteen "OS" tarkoittavan?

Upseerit
käyttöjärjestelmä
Suuri raidallinen perho

Tämän esimerkin tulos on esitetty kuvassa. 1.

Riisi. 1. Lomakeelementtien näkymä selainikkunassa