Lomakkeet muodossa html. HTML-lomakkeet
Hei, rakkaat blogisivuston lukijat. Jatkamme tutkimusta, siirrymme tarkastelemaan muotoa ja syötteitä attribuutteineen (), joilla voit luoda sivustolle monenlaisia lomakkeita.
Olipa tietyn verkkoresurssin aihe ja sisältö mikä tahansa, se sisältää todennäköisesti lomakkeita muodossa tai toisessa: tekstikenttiä, avattavia valikoita, erilaisia painikkeita tai kytkimiä. Muuten, yhdessä julkaisusta puhuin jo elementeistä, jotka auttavat monipuolistamaan muotoja.
Mikä on kaikkien erilaisten muotojen käytännön tarkoitus? Ensinnäkin niitä tarvitaan lähettämään käyttäjän syöttämiä tietoja palvelimelle jatkokäsittelyä varten erityisesti luodun skriptin (käsittelijän) avulla.
HTML-lomakkeet – miten ne luodaan lomakkeen ja syötteen avulla
Kuten alussa sanoin, millä tahansa enemmän tai vähemmän kehittyneellä verkkosivustolla on oltava jonkinlainen verkkolomake tai jopa useita kerralla. Ymmärtääksesi, kuinka tärkeitä ne ovat verkkoresurssin nykyaikaisten vaatimusten kannalta, riittää, kun annat sinulle suoraan kolme objektia, jotka käyttävät lomake- ja syöttötunnisteisiin perustuvia lomakkeita, jotka jo nimensä perusteella eivät jätä epäilystäkään välttämättömyys yhden tai toisen suunnan projektille:
Jos seuraat esimerkiksi linkkiä palautteen luomista käsittelevään artikkeliin (jolla kaikki käyttäjät voivat lähettää viestejä sivuston ylläpitäjälle), niin HTML-koodi lomakkeella, jossa on aukko (
) Osa:
Tässä lomakkeella on tärkeä rooli, koska se käynnistää verkkolomakkeen asennuksen. Se ei itse näytä aluetta verkkosivulla, vaan toimii säilönä, joka sisältää muita tunnisteita.
Meidän tapauksessamme (katso kuvakaappaus yllä), nämä sisältävät useita syöttö(tämä HTML-tunniste on yksittäinen, toisin sanoen siinä ei ole sulkevaa komponenttia) ja myös tekstialue, jossa on erilaisia määritteitä. Jokainen niistä määrittelee oman elementtinsä, joka sisältyy lomakkeeseen.
16. Automaattinen tarkennus(ei parametreja) on looginen attribuutti, joka asettaa kohdistuksen kenttään heti verkkosivun latautuessa, minkä seurauksena voit syöttää tietoja napsauttamatta sitä. Ei voida soveltaa vain syötteeseen type="hidden".
17. Liikuntarajoitteinen(ilman arvoja) - poistaa käyttäjältä lomakeelementin, johon se lisättiin. Useimmiten sitä käytetään yhdessä komentosarjojen kanssa, joissa määritellään ehdot, joiden mukaan saavuttamaton elementti aktivoidaan.
18. Lomake— yhdistää elementin muotoon, kun se sijaitsee säiliön ulkopuolella
. Linkitystä varten lomaketunnisteeseen lisätään yleinen id-attribuutti ja syöttötunnisteeseen form-attribuutti, jonka arvot ovat samat (esim. id="data" ja form="data") .19. Useita(ei parametreja) - asettaa monivalintavaihtoehto käyttäjälle, ja sitä käytetään vain yhdessä type="file"- ja type="email" kanssa.
Jos käytät tiedostojen latauskenttää, voit valita useita tiedostoja tietokoneeltasi kerralla Ctrl- tai Shift-näppäimillä. Jos näytössä on kenttä sähköpostiosoitteen syöttöä varten (type="email"), sähköpostit tulee kirjoittaa pilkuilla erotettuina.
20. Edellytetään(ei arvoja) – aktivoi käyttäjän tietojen syöttämisvaatimuksen. Siksi selain estää verkkolomakkeen lähettämisen, jos pakollinen kenttä jätetään tyhjäksi, ja näyttää vastaavan viestin sen täyttämisen tarpeesta.
Tätä määritettä ei käytetä graafisissa ja vakiopainikkeissa (type="button | image") eikä piilotetuissa syöttökentissä (type="hidden").
21. Koko— määrittää tekstikentän leveyden merkeissä (sopii vain tyyppielementeille, joiden parametrit ovat "email | password | search | tel | text | url"). Oletusarvo on 20 merkkiä.
Syötetunnisteen seuraavat neljä attribuuttia (22-25) sisältävät lähes saman toiminnallisuuden kuin , mutta täydellisyyden vuoksi mainitsen myös ne lyhyesti.
22. Maksimi pituus— asettaa rajoituksen tekstikenttään kirjoitettavien merkkien enimmäismäärälle. Jos yrität ylittää tämän rajan, lisäsyöttö estetään. Tämä määrite koskee vain tekstielementtejä, joissa on type="email | password | search | tel | text | url".
23. Minpituus— asettaa rajoituksen tekstialueelle kirjoitettavien merkkien vähimmäismäärälle. Jos yritetään lähettää vähemmän merkkejä sisältäviä tietoja, näyttöön tulee lyhyt viesti, joka ilmoittaa tarpeesta täydentää lomakkeen sisältöä ja tiedot jo syötettyjen merkkien määrästä. Käyttöehdot ovat täsmälleen samat kuin maxlengthin tapauksessa.
24. Paikanpitäjä— voit sijoittaa vihjeen (se toimii parametrina) suoraan tekstikenttään, joka katoaa heti, kun käyttäjä alkaa syöttää merkkejä. Vain kentille, jotka on muodostettu parametreilla sähköposti, salasana, haku, teksti, puh, url syöttötunnisteen type-attribuutti.
25. Lue ainoastaan(ei parametreja) - osoittaa, että kenttään aiemmin syötetty teksti on vain luettavissa ja kopioitavissa. Sitä käytetään yleensä yhdessä komentosarjojen kanssa, joissa on määritelty ehdot, jotka täyttyessään voivat aktivoida tämän lomakeelementin.
Ja lopuksi vielä muutama attribuutti, jotka täydentävät eri lomakeelementtien toimintoja:
26. Kuvio— arvossaan kuvastaa säännöllistä lauseketta, jonka perusteella asetetaan säännöt tietojen syöttämiselle. Tässä tapauksessa on suositeltavaa lisätä lisäksi globaali otsikko-attribuutti, jonka parametriksi voit lisätä selittävää tekstiä, joka auttaa käyttäjiä täyttämään kentät. Mallia käytetään vain sähköposti-, salasana-, haku-, teksti-, puhelin- ja url-elementteihin. Ymmärretään se esimerkin avulla. Tässä on yksinkertaistetun rekisteröintilomakkeen koodi (jossa ):
|
Kirjaudu sisään Salasana |
Kirjautumiskenttään (type="text") malliarvoksi on määritetty säännöllinen lauseke (5,), mikä tarkoittaa latinalaisten merkkien käyttöä, ja vähintään viisi merkkiä on syötettävä.
Suhteessa salasanan tekstialueeseen (type="password") arvoksi on asetettu (8,), joka määrittää yksinomaan latinalaisten kirjainten syöttämisen joka tapauksessa (isot ja pienet kirjaimet) sekä numerot, kun taas kaikkien merkkien kokonaismäärä ei saa olla pienempi kuin kahdeksan.
Jos määritettyjä syöttöehtoja rikotaan, selain ei salli tietojen lähettämistä ja näyttää asianmukaisen varoituksen:
27. Src— määrittää polun kuvaan (URL, joka on sen arvo) graafisen painikkeen "image" näyttämistä varten (katso syöttötyyppiparametrien taulukko yllä).
28. Vaihe— määrittää vaiheen elementeille, jotka tarjoavat valinnan numeerisia arvoja (syöttötyyppi = "päivämäärä | päivämäärä-aika-paikallinen | kuukausi | numero | alue | puh | aika | viikko.").
Se voi ottaa parametrina minkä tahansa kokonaisluvun tai murtoluvun. Oletusaskel="1". Lopullisen syöttöalueen asettamiseksi voit jälleen käyttää edellä mainittuja min ja max attribuutteja. Selvyyden vuoksi sisällytämme testilomakkeeseen 2 elementtiä type="number". Aseta ensimmäiselle step="2" ja toiselle step="0,1":
|
Anna arvo välillä -10 - 10: Anna arvo väliltä 0 ja 1: |
29. Arvo— määrittää käsittelijälle välitettävän lomakeelementin arvon. Nimi-parametri-pari lähetetään palvelimelle, jossa nimi määritetään syötetunnisteen name-attribuutilla ja parametri arvo-attribuutilla. Lisäksi erilaisille muotoelementeille arvolla on eri rooleja:
- for type="button | nollaa | lähetä" - asettaa painikkeiden tekstitunnisteen;
- for type="checkbox | radio | image" - tunnistaa jokaisen valintaruudun, kytkimen tai grafiikkapainikkeen, kun tietoja lähetetään ja käsitellään palvelimella;
- for type="password | text" - heti lomaketta ladattaessa se näyttää kentässä alustavan tekstin, jonka käyttäjä voi muuttaa tai poistaa kokonaan;
- for type="file" (tiedoston lataus) ei koske, koska se ei vaikuta tähän elementtiin.
Esimerkki kunkin yllä olevan vaihtoehdon käytöstä:
|
Valitse CMS: W.P. Joomla |
Tässä arvo attribuutin arvo määrittää kunkin elementin seuraavat komponentit: näyttää tekstifragmentin kenttään type="text" ("Sinun nimesi"), tunnistaa kunkin valintanapin ("1" ja "2"), jotka on asetettu type="radio", ja aktivoi myös merkinnän painikkeeseen ("Lähetä").
Esimerkki kauniin HTML-lomakkeen luomisesta
Seuraavaksi yritän esitellä sinulle esimerkkiverkkolomakkeen, jonka koodissa ei ole vain syöttötyyppiyhdistelmiä eri arvoilla, jotka muodostavat vakiotekstikenttiä ja -painikkeita, vaan myös esim. joiden avulla voit aloittaa keskittymisen elementti ei vain suoralla hiiren napsautuksella, vaan myös napsauttamalla tekstiä.
Huomaa, että ainutlaatuisen suunnittelun saamiseksi sijoitetaan yksittäisiä muotokomponentteja, joista jokaisessa on sarja:
Takaosa (max-width:350px; margin:50px auto 0; täyttö:20px; tausta:#f3ebe1; font-family:"Oswald", sans-serif;) .form-1, .form-2, .form-3 , .form-4 (padding:15px; border:4px double #909090) .form-1, .form-2, .form-3 (border-bottom:none) .form-1-syöttö (näyttö:lohko; marginaali- alaosa: 10px; leveys: 100%).in (täyttö-vasen:40px) .sisääntulo (leveys:100%) ..png) ei toistoa;tausta-sijainti:10px 10px) ..png) ei toistoa; background-position: 10px 10px) .form-4-syöttö (näyttö:lohko; korkeus: 50px; fontin koko: 24px; leveys: 100%; kohdistin: osoitin)
Tämän seurauksena tällaisen verkkolomakkeen ääriviivat ovat seuraavat:
Täydelliset tiedot tämän lomakkeen luomisesta löytyvät osoitteesta tämä sivu(muuten, siellä ei voi vain testata yksittäisten tekstialueiden toimivuutta syöttämällä niihin tietoja, vaan myös kokeilla verkkolomaketta muokkaamalla HTML-koodia ja/tai CSS-ominaisuuksia, muuttamalla sen ulkoasua kokonaan tai osittain).
Tavoitteeni oli esitellä sinulle algoritmi type-attribuutin ja lomaketunnisteen eri arvojen käyttämiseen erilaisten HTML-lomakkeiden luomiseen sivustolle. Toivottavasti tehtävä on suoritettu. Joka tapauksessa, jaa ajatuksesi tästä monipuolisesta aiheesta kommenteissa.
Luonnollisesti seuraavissa julkaisuissa jatkan hypertekstimerkintöjen tärkeimpien tunnisteiden kuvaamista, joten älä unohda tilata blogipäivitykset sähköpostitse. Tämän vahvistamiseksi katso myös toinen Evgeniy Popovin oppitunti yhteydenottolomakkeen luomisesta.
Lomakkeet on suunniteltu lähettämään tietoja käyttäjältä verkkopalvelimelle. HTML-lomakkeet voivat koostua tekstikentistä ja tekstialueista, valintaruuduista ja valintanapeista sekä avattavista luetteloista. Kaikki nämä ovat muodon elementtejä. Jokainen elementti välittää jonkin merkityksen sivustolle.
HTML-lomake on pohjimmiltaan web-sivu, jolla näet alueita tietojesi syöttämiseen. Kun olet täyttänyt lomakkeen ja napsauttanut Lähetä, lomakkeen tiedot pakataan ja lähetetään verkkopalvelimelle palvelinpuolen komentosarjan (käsittelijätiedoston) käsittelyä varten. Käsittelyn jälkeen toinen verkkosivu palautetaan sinulle vastauksena. Seuraava kuva osoittaa selvästi, kuinka lomake toimii:
HTML-lomakkeiden luomisessa ei ole mitään vaikeaa. Helpoin tapa saada käsitys lomakkeista on jäsentää hieman HTML-koodia ja katsoa sitten miten se toimii. Seuraava esimerkki näyttää syntaksin yksinkertaisen HTML-lomakkeen luomiseen:
Esimerkki: Yksinkertainen HTML-lomake
- Kokeile itse"
Ensimmäinen muotoni:
Nimi:
Sukunimi:
Elementti
Lomakkeet lisätään web-sivuille elementin avulla . Se tarjoaa säilön kaikelle lomakesisällölle, mukaan lukien elementit, kuten tekstikentät ja painikkeet, sekä kaikki muut HTML-tunnisteet. Se ei kuitenkaan voi sisältää muuta elementtiä
.
Lähettääksesi lomakkeen palvelimelle, käytä "Lähetä"-painiketta, sama tulos saadaan, jos painat "Enter"-näppäintä lomakkeen sisällä. Jos "Lähetä"-painiketta ei ole lomakkeessa, voidaan käyttää "Enter"-näppäintä.
Useimmat elementin attribuutit vaikuttaa lomakkeen käsittelyyn, ei sen suunnitteluun. Niistä yleisimmät ovat toiminta Ja menetelmä. Attribuutti toiminta sisältää URL-osoitteen, johon lomakkeen tiedot lähetetään palvelimen käsiteltäväksi. Attribuutti menetelmä on HTTP-menetelmä, jota selaimien on käytettävä lomaketietojen lähettämiseen.
Elementti
Lähes kaikki lomakekentät luodaan elementin avulla (englanninkielisestä syötteestä - input). Elementin ulkonäkö muuttua sen attribuutin arvon mukaan tyyppi:
Tässä on joitain määritteiden arvoja tyyppi:
Tekstin ja salasanan syöttäminen
Yksi yksinkertaisimmista lomakeelementtien tyypeistä on tekstikenttä, joka on suunniteltu tekstin syöttämiseen yhdelle riville. Tämä tekstinsyöttötyyppi on asetettu oletusarvoisesti, joten se on yksirivinen kenttä, joka näytetään, jos unohdat määrittää määritteen tyyppi. Jos haluat lisätä lomakkeeseen yksirivisen tekstinsyöttökentän, sinun tulee olla elementin sisällä rekisteröi attribuutti tyyppi tekstin arvolla:
Salasanan syöttökenttä on tavallisen tekstikentän tyyppi. Se tukee samoja määritteitä kuin yksirivinen tekstikenttä. Attribuutti nimi määrittää salasanan syöttökentän nimen, joka lähetetään palvelimelle käyttäjän syöttämän salasanan kanssa. Salasanakentän luomiseksi sinun on asetettava salasana-attribuutti arvoon tyyppi(salasana (englanniksi) - salasana):
Esimerkki lomakkeen luomisesta salasanakentällä:
Esimerkki: Salasanakenttä
- Kokeile itse"
Kirjautumistunnuksesi:
Salasana:
Voit käyttää määritettä yhdessä tämän määritteen kanssa maxpituus, jonka arvo määrittää tiettyyn merkkijonoon syötettävien merkkien enimmäismäärän. Voit myös määrittää syöttökentän pituuden attribuutilla koko. Oletuksena useimmat selaimet rajoittavat tekstikentän leveyden 20 merkkiin. Voit hallita uusien lomakeelementtien leveyttä määritteen sijaan koko, suosittelemme CSS:n (Cascading Style Sheets) käyttöä.
Attribuutti arvo määrittää arvon, joka näytetään oletusarvoisesti tekstikentässä, kun lomake ladataan. Syöttämällä oletusarvon kenttään voit selittää käyttäjälle tarkalleen, mitä tietoja ja missä muodossa haluat käyttäjän syöttävän tähän. Tämä on kuin esimerkki, koska käyttäjän on paljon helpompaa täyttää lomake, kun hän näkee esimerkin edessään.
Kytkimet (radio)
Elementti tyyppi radio luo kytkimiä, jotka käyttävät logiikkaa "OR"-periaatetta, jolloin voit valita vain yhden useista arvoista: jos valitset yhden asennon, kaikki muut muuttuvat passiivisiksi. Toggle-elementin perussyntaksi on:
Attribuutti nimi kytkimille tarvitaan ja sillä on tärkeä rooli useiden kytkinelementtien yhdistämisessä ryhmään. Jos haluat yhdistää valintanapit ryhmään, sinun on asetettava sama määritteen arvo nimi ja eri attribuutin arvot arvo. Attribuutti arvo asettaa palvelimelle lähetettävän valitun valintanapin arvon. Kunkin valintanappielementin arvon on oltava yksilöllinen ryhmässä, jotta palvelin tietää, minkä vastausvaihtoehdon käyttäjä valitsi.
Attribuutin läsnäolo tarkistettu(englanniksi - asennettu) kytkinelementissä osoittaa, mitkä ehdotetuista vaihtoehdoista tulisi valita oletusarvoisesti sivua ladattaessa tarvittaessa. Tämä määrite voidaan asettaa vain yhdelle ryhmän valintanappielementille:
- Kokeile itse"
Kuinka vanha olet?
- alle 18
- klo 18-24
- 25-35 välillä
- yli 35
Toiminnan attribuutti.
Pääelementille on attribuutti toiminta, joka määrittää lomakkeen tietojenkäsittelijän. Tiedonkäsittelijä on tiedosto, joka kuvaa mitä tehdä lomaketiedoilla. Tämän käsittelyn tuloksena on uusi HTML-sivu, joka palautetaan selaimeen. Toisin sanoen attribuutissa toiminta määrittää URL-polun palvelimella olevaan käsittelijätiedostoon (jota joskus kutsutaan komentosarjasivuksi) lomakkeen käsittelyä varten. Syntaksi on seuraava:
Käsittelytiedosto sijaitsee palvelimella mytestserver.com kansiossa nimikansio ja tiedot käsittelevän palvelinkomentosarjan nimi - obrabotchik.php. Kaikki verkkosivulla olevaan lomakkeeseen syöttämäsi tiedot siirretään hänelle. .php-laajennus osoittaa, että määritetty lomake käsitellään PHP:llä kirjoitetulla komentosarjalla. Itse käsittelijä voi olla kirjoitettu toisella kielellä, esimerkiksi se voi olla komentosarjakieli Python, Ruby jne.
Attribuutin arvo on aina suositeltavaa asettaa toiminta. Jos lomakkeen pitäisi välittää arvoja samalle sivulle, jossa se sijaitsee, anna action-attribuutin arvoksi tyhjä merkkijono: action="".
menetelmän attribuutti
Attribuutti menetelmä määrittää, kuinka tiedot tulee siirtää palvelimelle. Valitsemasi lomakkeen lähetystapa riippuu tiedoista, jotka haluat lähettää lomakkeella. Tietojen määrällä on tässä tärkeä rooli. Suosituimmat ovat kaksi tapaa siirtää lomakkeesi lähdetiedot selaimesta palvelimelle: SAADA Ja LÄHETTÄÄ. Menetelmä voidaan asettaa mihin tahansa valitsemasi, ja jos et määritä sitä, käytetään oletusmenetelmää SAADA. Harkitsemme jokaisen käyttöä.
POST-menetelmä
Menetelmä LÄHETTÄÄ paketit muodostavat tiedot ja lähettävät sen palvelimelle käyttäjän huomaamatta, koska tiedot sisältyvät viestin runkoon. Web-selain menetelmää käytettäessä LÄHETTÄÄ lähettää palvelimelle pyynnön, joka koostuu erityisistä otsikoista, joita seuraa lomaketiedot. Koska tämän pyynnön sisältö on vain palvelimen käytettävissä, menetelmä LÄHETTÄÄ käytetään luottamuksellisten tietojen, kuten salasanojen, pankkikorttitietojen ja muiden käyttäjien henkilötietojen välittämiseen. Menetelmä LÄHETTÄÄ soveltuu myös suurten tietomäärien lähettämiseen, koska toisin kuin menetelmä SAADA, sillä ei ole rajoituksia lähetettyjen merkkien lukumäärälle.
GET-menetelmä
Kuten jo tiedät, selaimen päätehtävä on vastaanottaa web-sivuja palvelimelta. Joten kun käytät menetelmää SAADA, selaimesi yksinkertaisesti hakee verkkosivun kuten aina. Menetelmä SAADA myös rivittää lomaketiedot, mutta liittää ne URL-osoitteen loppuun ennen pyynnön lähettämistä palvelimelle. Ymmärtääksesi kuinka menetelmä toimii SAADA, katsotaanpa sitä toiminnassa. Avaa ensimmäinen esimerkki tästä oppitunnista (Esimerkki: Yksinkertainen HTML-lomake) Muistiossa (esimerkiksi Notepad++) ja tee pieni muutos HTML-koodiin:
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
Tämän esimerkin tulos on esitetty kuvassa. 1.
Riisi. 1. Lomakeelementtien näkymä selainikkunassa
HTML-tunnisteet, jotka määrittävät sivuston HTML-lomakkeet
Luomme verkkosivustoja ja yksittäisiä sivuja Internetiin kommunikoida vierailijoiden kanssa.
HTML-lomakkeet käytetään vierailijoiden rekisteröimiseen sivustolle, interaktiivisiin kyselyihin ja äänestämiseen, joiden avulla voit lähettää viestejä, tehdä ostoksia ja niin edelleen. HTML Lomake on luotu yhtä tarkoitusta varten: tietojen kerääminen ja myöhempi siirtäminen käsittelyä varten ohjelmiston komentosarjalla tai sähköpostitse.
Esimerkki HTML-lomakkeesta | Syötä sivusto
Tunnisteet, attribuutit ja arvot
- - määrittää muoto.
- name="" - määrittää lomakkeen nimen.
- method="" - määrittää menetelmän tietojen lähettämiseen lomakkeesta. Arvot: "get" (oletus) ja "post" . "Post"-menetelmää käytetään usein, koska sen avulla voidaan siirtää suuria tietomääriä.
- action="" - määrittää URL-osoitteen, johon tiedot lähetetään käsittelyyn. Meidän tapauksessamme - enter_data.php ..
- - Määritä sellaiset lomakeelementit kuten painikkeet, kytkimet, tekstikentät tietojen syöttämistä varten.
- type="text" - määrittää tekstikentän tietojen syöttämistä varten.
- type="password" - määrittää kentän salasanan syöttämistä varten, jossa teksti näytetään tähtien tai ympyröiden muodossa.
- type="checkbox" - määrittää valintanapin.
- type="hidden" - määrittää piilotetun lomakeelementin - käytetään lisätietojen siirtämiseen palvelimelle.
- size="25" - tekstikentän pituus merkeissä.
- maxlength="30" - syötettyjen merkkien suurin sallittu määrä.
- value="" - määrittelee arvon, joka lähetetään käsittelyyn, jos se koskee valintapainikkeita tai kytkimiä. Tämän määritteen arvo osana tekstikenttää tai painiketta näytetään yllä olevassa esimerkissä esimerkiksi nimellä Vasya tai Login.
Esimerkki HTML-lomakkeesta | Kommentteja sivustolla
|
|