Lomake css html:n täyttämiseksi. HTML-lomakkeiden luominen. Monirivinen tekstikenttä - tag

Kun käyttäjä selaa verkkosivustoja, hän enimmäkseen vain napsauttaa linkkejä web-sivuilla selaamiseen.

Mutta on selvää, että käyttäjän on joskus tarjottava omansa syöttökenttiä. Tämän tyyppisiä vuorovaikutuksia ovat:

• rekisteröityminen ja kirjautuminen verkkosivustoille;
• syöttö henkilökohtaisia ​​tietoja(nimi, osoite, tiedot luottokortti jne.);
• sisällön suodatus (pudotusluetteloiden, valintaruutujen jne. avulla);
• etsintä;
• tiedostojen lataaminen.

Vastatakseen näihin tarpeisiin HTML tarjoaa interaktiivisia säätimet lomakkeet:

• tekstikentät (yhdelle tai useammalle riville);
• kytkimet;
• valintaruudut;
• avattavat luettelot;
• Ladattavat widgetit;
• lähetyspainikkeet.

Nämä kontrollit sisältävät erilaisia tunnisteet HTML, mutta useimmat käyttävät tunnistetta . Koska se on itsestään sulkeutuva elementti, kentän tyyppi määräytyy sen type-attribuutin perusteella:

Elementti

On lohkoelementti, joka määrittelee interaktiivinen osa web-sivua. Tämän seurauksena kaikki säätimet (esim , tai <button>) täytyy olla <i>sisällä</i> elementti <form> .</p><p>Kaksi <a href="https://battlecase.ru/fi/chto-takoe-html-tegi-i-atributy-validator-validator-w3c-struktura-i-pravila-napisaniya/">HTML-attribuutti</a> <b>tarpeellista</b>:</p><ul><li>toiminto sisältää osoitteen, joka määrittää <i>Missä</i> lomakkeen tiedot lähetetään;</li><li>menetelmä voi olla joko GET tai POST ja määrittää, onko <i>Miten</i> Lomakkeen tiedot lähetetään.</li> </ul><p>Yleensä lomakkeen tiedot lähetetään osoitteeseen <b>palvelin</b>. <i>Miten</i> näitä tietoja käsitellään tämän oppaan soveltamisalan ulkopuolella.</p><p>Ajattele lomaketta kokoelmana ohjaimia, jotka toimivat yhdessä <b>yksi</b> operaatio. Jos kirjoitit kirjautumislomakkeen sivustolle, saatat olla <b>kolme</b> kentät:</p><ul><li>sähköpostikenttä <input type="email"> </li><li>salasana kenttä <input type="password"> </li><li>lähetä -painiketta <input type="submit"> </li> </ul><p>Nämä kolme <a href="https://battlecase.ru/fi/kak-dobavit-shirinu-ramke-css-nalozhenie-tenei-dlya-sozdaniya-neskolkih/">HTML-elementti</a> sisällytetään yhteen lomakkeeseen <span><form action="/login" method="POST"> </span>.</p><p>Voit myös lisätä rekisteröintilomakkeen samalle HTML-sivulle erillisessä elementissä <form> .</p><h2>Tekstikentät</h2><p>Melkein kaikki muodot vaativat <b>teksti</b> syötteitä käyttäjiltä kirjoittaakseen nimensä, sähköpostiosoitteensa, salasanansa, osoitteensa jne. Lomakkeen tekstikentissä on erilaisia ​​vaihtoehtoja.</p><p>Vaikka nämä kentät ovat hyvin samankaltaisia ​​ja antavat käyttäjille mahdollisuuden kirjoittaa mitä tahansa tekstiä (jopa virheellisiä), niiden tyyppi antaa tietyn <b>semantiikka</b> syötettä varten määrittämällä, mitä tietoja kenttä on <b>on pakko</b> sisältää.</p><p>Selaimet voivat myöhemmin muuttaa säätimen käyttöliittymää hieman parantaakseen <i>interaktiivisuus</i> tai ehdota, mitä sisältöä odotetaan.</p><p>Esimerkiksi salasanakentässä näkyy pisteitä symbolien sijaan. Ja numerokentän avulla voit suurentaa/vähentää arvoa ylös- ja alasnäppäimillä.</p><h2>paikanpitäjä</h2><p>Tekstikentät voidaan näyttää <b>vihjailevaa</b> teksti, joka katoaa heti, kun tekstiä syötetään.</p><p> <input type="text" placeholder="Kirjoita nimesi"> </p><p>Jos alat kirjoittaa jotain, teksti "Anna nimesi" katoaa.</p><h2><label></h2><p>Koska lomakeelementit itsessään eivät ole kovin kuvaavia, niitä edeltää yleensä teksti. <b>etiketti</b>.</p><p> <label>Sähköposti</label> <input type="email"> </p><p>Vaikka paikkamerkki antaa jo vihjeen siitä, mitä sisältöä odotetaan, tunnisteiden etuna on, että ne ovat aina näkyvissä, ja niitä voidaan käyttää muun tyyppisten lomakeelementtien, kuten valintaruutujen tai valintanappien, rinnalla.</p><p>Vaikka voit käyttää lyhyitä kappaleita kuvaamaan lomakeelementtejä, käyttämällä <label>on semanttisesti oikeampi, koska ne ovat olemassa vain muodoissa. <label>voi myös liittyä <a href="https://battlecase.ru/fi/kak-udalit-opredelennyi-element-massiva-javascript-metody-massivov/">tietty elementti</a>-lomake käyttäen for-attribuuttia, joka vastaa kentän id-arvoa.</p><p> <label for="first_name">Nimi</label> <input id="first_name" type="text"> </p><p>Kun napsautat tarraa, kohdistus siirtyy tekstikenttään ja asettaa kohdistimen sen sisään. Toistaiseksi tämä paketti näyttää hyödyttömältä, mutta se on kätevä valintaruutujen ja kytkimien kanssa.</p><h2>valintaruudut</h2><p><b>valintaruudut</b>- Nämä ovat lomakeelementtejä, joilla on vain kaksi tilaa: päällä tai pois päältä. Pohjimmiltaan ne antavat käyttäjän sanoa "kyllä" tai "ei" jollekin.</p><p> <input type="checkbox">Muista minut</p><p>Koska pienen valintaruudun napsauttaminen voi olla vaikeaa, on suositeltavaa sijoittaa valintaruutu ja sen kuvaus sisään <label> .</p><p> <label> <input type="checkbox">Olen samaa mieltä ehdoista</label> </p><p>Voit vaihtaa valintaruudun napsauttamalla "Hyväksyn ehdot" -tekstiä.</p><p>Oletusarvoisesti valintaruutu on poistettu käytöstä. Voit merkitä sen käyttöön yksinkertaisesti käyttämällä valittua attribuuttia.</p><p> <label> <input type="checkbox" checked>Käytä laskutusosoitettani</label> </p><h2>Kytkimet</h2><p>Voit tarjota käyttäjälle <b>luettelo vaihtoehdoista</b> valittavissa kytkimillä.</p><p>Jotta tämä lomakeelementti toimisi, HTML-koodisi on oltava <b>ryhmä</b> valintanappien luettelo yhdessä. Tämä saavutetaan käyttämällä samaa arvoa name-attribuutille:</p><p> <label>Perhetilanne</label> <label> <input type="radio" name="status">Yksittäinen</label> <label> <input type="radio" name="status">Naimisissa</label> <label> <input type="radio" name="status">Eronnut</label> <label> <input type="radio" name="status">Leski</label> </p><p>Koska kaikki kytkimet käyttävät <a href="https://battlecase.ru/fi/kak-naiti-v-eksel-odinakovye-znacheniya-faily-dublikaty-ccleaner/">sama arvo</a> nimi attribuutti (in <a href="https://battlecase.ru/fi/papki-na-fleshke-stali-yarlykami-chto-delat-chto-delat-v-sluchae/">tässä tapauksessa</a> arvon tila ), yhden vaihtoehdon valitseminen peruuttaa kaikki muut. Kytkimet ovat <b>toisensa poissulkeva</b>.</p><h3>Ero valintanappien ja valintaruutujen välillä</h3><p>Vaikka valintaruutu on olemassa <b>omillani</b>, kytkimet voivat näkyä vain lomakkeessa <b>lista</b>(mikä tarkoittaa vähintään kahta vaihtoehtoa).</p><p>Lisäksi valintaruudun napsauttaminen on <b>mielivaltainen</b>, kun valitset yhden valintanapeista <b>pakollinen</b>. Tästä syystä kytkintä ei voi sammuttaa, jos valitset lähimmän vaihtoehdon. Lopulta yksi kytkimistä valitaan aina.</p><h2>Avattavat valikot</h2><p>Jos valittavien vaihtoehtojen määrä vie liikaa tilaa, voit käyttää avattavia valikoita <select> .</p><p>Ne toimivat samalla tavalla kuin kytkimet, vain asettelu on erilainen.</p><p> <select> <option>tammikuu</option> <option>helmikuu</option> <option>maaliskuuta</option> <option>huhtikuu</option> <option>saattaa</option> <option>kesäkuuta</option> <option>heinäkuu</option> <option>elokuu</option> <option>syyskuu</option> <option>lokakuu</option> <option>marraskuu</option> <option>joulukuu</option> </select> </p><h3>Useita valintoja pudotusvalikosta</h3><p>Jos lisäät useita määritteitä, voit tarjota mahdollisuuden valita useita vaihtoehtoja.</p><p> <label>Mitä selaimia käytät?</label> <select multiple> <option><a href="https://battlecase.ru/fi/nekotorye-skrytye-nastroiki-brauzera-google-chrome-skrytye-nastroiki-google-chrome/">Google Chrome</a></option> <option><a href="https://battlecase.ru/fi/istoriya-internet-explorer-protokol-tls-v-internet-explorer/">Internet Explorer</a></option> <option><a href="https://battlecase.ru/fi/sohranenie-parolei-v-mozilla-firefox-kak-pochistit-brauzer-mozilla-firefox-udalyaem/">Mozilla Firefox</a></option> <option>Ooppera</option> <option>Safari</option> </select> </p><p>Valitse useita vaihtoehtoja pitämällä Ctrl (tai ⌘) painettuna ja napsauttamalla. Tämä voi olla hyvä vaihtoehto useiden valintaruutujen käyttämiselle riviä kohden.</p><h2>Esimerkki: täydellinen rekisteröintilomake</h2> <form action="/signup" method="POST"> <p> <label>Vetoomus</label> <label> <input type="radio" name="title" value="Herra">Herra.</label> <label> <input type="radio" name="title" value="rouva">Rouva.</label> </p> <p> <label>Nimi</label> <input type="text" name="first_name"> </p> <p> <label>Sukunimi</label> <input type="text" name="last_name"> </p> <p> <label>Sähköposti</label> <input type="email" name="email"> </p> <p> <label>Puhelin</label> <input type="tel" name="phone"> </p> <p> <label>Salasana</label> <input type="password" name="password"> </p> <p> <label>Vahvista salasana</label> <input type="password" name="password_confirm"> </p> <p> <label>Maa</label> <select name="country"> <option>Kanada</option> <option>Ranska</option> <option>Saksa</option> <option>Italia</option> <option>Japani</option> <option>Venäjä</option> <option>Iso-Britannia</option> <option>USA</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Hyväksyn Käyttöehdot</label> </p> <p> <button>Rekisteröidy</button> </p> </form> <p>Myös muita muotoelementtejä on saatavilla, mutta olemme tarkastelleet eniten käytetyt.</p> <br><p>HTML:n lomakkeet ovat monimutkaisimpia, mutta toisaalta ehkä kaikkein eniten <a href="https://battlecase.ru/fi/sortirovka-prosmotra-istorii-v-instagrame-vse-pro-istorii-v-instagrame/">mielenkiintoinen aihe</a> 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 olisi <a href="https://battlecase.ru/fi/neosnovatelnyi-guest-book-html-skript-gostevoi-knigi-na-php/">Vieraskirja</a>, kyselylomake, <a href="https://battlecase.ru/fi/test-sistemy-na-proizvoditelnost-onlain-testirovanie-kompyutera-onlain/">online testi</a>. Lomakkeet täytetään rekisteröityessä verkkosivustolle, 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>Sitten 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 kirjoitetaan yleensä sisään <a href="https://battlecase.ru/fi/skachat-samouchitel-po-yazyku-php-pochemu-imenno-php-sposoby/">php kieli</a> tai javascriptiä.</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><a href="https://battlecase.ru/fi/obrabotka-formy-v-php-php-self-v-atribute-formy-action/">toiminta-attribuutti</a> on pakollinen mille tahansa lomakkeelle - 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ää, mikä siirtotapa tarkalleen on <a href="https://battlecase.ru/fi/peredat-dannye-metodom-post-v-formate-json-php-i-format-peredachi-dannyh-json/">Lähettää tietoja</a> useimmissa tapauksissa sitä käytetään muodoissa.</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öttötietojen 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"><form> <input type="text" size="20" value="Sinun nimesi..."></form> </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"><form> <input type="password" maxlength="10" size="20"></form> </td> <td><p>Tekstikenttä salasanan syöttämiseen. <br>Maxlength-attribuuttijoukot <a href="https://battlecase.ru/fi/gonka-za-ppi-novoe-bezumie-haiteka-vybiraem-smartfon-s-maksimalnym-kolichestvom/">enimmäismäärä</a> merkit, jotka voidaan syöttää</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"> <form> <input type="radio" name="radio" value="1" checked> 1 <input type="radio" name="radio" value="2"> 2 <input type="radio" name="radio" value="3"> 3 </form> </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"> <form> <input type="checkbox" checked>1 <input type="checkbox">2 <input type="checkbox">3 </form> </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"><form> <input type="button" value="Painike"></form> </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"><form> <input type="reset" value="Nollaa"></form> </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"><form> <input type="submit"></form> </td> <td><p>Painike syötettyjen tietojen lähettämiseen.</p> </td> </tr><tr><td><p><input type="file" ></p> </td> <td align="center"><form> <input type="file"></form> </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"><form> <input type="image" src="img/buttom.gif"></form> </td> <td><p>Painike-kuva. <br>Sitä käytetään myös tietojen 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"><form> <input type="hidden" size="20"></form> </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>Näytä <a href="https://battlecase.ru/fi/sozdanie-vypadayushchego-spiska-v-yacheike-sozdaem-svyazannye-vypadayushchie-spiski-v/">luotava luettelo</a> 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>) tulisi käyttää <a href="https://battlecase.ru/fi/sinie-vertikalnye-polosy-na-ekrane-aifon-6-pochemu-poyavilas-na-iphone/">pystysuora raita</a> vieritys, 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 <a href="https://battlecase.ru/fi/testirovanie-noutbuka-na-proizvoditelnost-ispolzovanie-indeksa/">Ctrl-näppäimet</a> ja Vaihto.</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://i0.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://i0.wp.com/webpupil.ru/img/java/java_result.jpg' height="61" width="200" loading=lazy loading=lazy></p> <form> <p>Pääsuunta on yksi neljästä pääsuunnasta:</p><p>Luoteis Lounais Itä</p><p>7 maailman ihmettä!</p><p>Kheopsin pyramidi Babylonin riippuvat puutarhat Zeuksen patsas Olympiassa Artemiksen temppeli Efesoksen mausoleumissa Halikarnassoksen kolossi Rodoksen majakka Aleksandriassa</p><p><input type="reset" value="Nollaa"></p> </form> <h3>Monirivinen tekstikenttä - tag <textarea></h3> <p>Tag <textarea>luo monirivisen tekstikentän. Siihen 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 asettaa leveyden <a href="https://battlecase.ru/fi/otstupy-i-polya-v-html-kak-sdelat-krasivoe-tekstovoe-pole/">tekstikenttä</a> merkeissä ja kentän korkeus riveissä käyttäen sarakkeita ja rivimääritteitä, vastaavasti.</p> <p><img src='https://i0.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:

HTML-opetusvideo
CSS-opetusvideo
Video opetusohjelma PHP

Valitse media:

CD

DVD

USB Flash

Sähköpostisi: *

Osoitteesi: *

Tag

(englannista muodossa-lomake) 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.

Voit lähettää lomakkeen palvelimelle käyttämällä Lähetä-painike, sama voidaan saavuttaa painamalla Enter-näppäintä lomakkeen sisällä. Jos lomakkeesta puuttuu Lähetä-painike, Enter-näppäin jäljittelee sen käyttöä.

Kun lomake toimitetaan palvelimelle, tietojen hallinta siirtyy elementin action-attribuutin määrittämälle ohjelmalle . Selain valmistelee tiedot ensin "nimi=arvo"-parin muodossa, jossa nimi määräytyy elementin 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.htmlbook.ru/handler.php?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Parametrit luetellaan palvelinohjelman osoitteen jälkeen määritetyn kysymysmerkin jälkeen ja erotetaan et-merkillä (&). Venäläiset kirjaimet muunnetaan heksadesimaalimuodossa (muodossa %HH, jossa HH on ASCII-merkin arvon heksadesimaalikoodi), välilyönti korvataan plusmerkillä (+).

Sallittu säiliön sisällä sijoittaa muut elementit, kun taas itse lomake ei näy verkkosivulla millään tavalla, vain sen sisällä olevat elementit näkyvät.

Syntaksi

...

Päättävä tagi on pakollinen.

WAI ARIA

Roolin oletusarvo: muodossa

Kelvolliset rooliarvot:

• ei mitään
• esittely
• Hae

Attribuutit

• accept-charset - Asettaa koodauksen, jolla palvelin voi hyväksyä ja käsitellä tietoja.
• toiminta - Lomaketietoja käsittelevän ohjelman tai asiakirjan osoite.
• automaattinen täydennys - Ottaa käyttöön lomakekenttien automaattisen täydennyksen.
• enctype – lomaketietojen koodaustapa.
• menetelmä - HTTP-protokollamenetelmä.
• nimi – lomakkeen nimi.
• novalidate - Peruuttaa sisäänrakennetun lomaketietojen vahvistuksen syötteen oikeellisuuden varmistamiseksi.
• kohde - Sen ikkunan tai kehyksen nimi, johon käsittelijä lataa palautetun tuloksen.

hyväksy-merkkisetti

Asettaa koodauksen, jolla palvelin voi hyväksyä ja käsitellä lomaketietoja.

Syntaksi

...

Arvot

Koodausnimi, esimerkiksi Windows-1251, UTF-8 jne.

Oletusarvo

Sivun koodaussarja.

toiminta

Määrittää käsittelijän, jonka lomaketietoja käytetään, kun ne lähetetään palvelimelle. Voi toimia ohjaajana palvelinohjelma tai HTML-dokumentti, joka sisältää palvelinpuolen komentosarjoja (esim. Parser). Kun käsittelijä on suorittanut lomakkeen tiedoilla toimintoja, se palauttaa uuden HTML-dokumentin.

Jos action-määrite puuttuu, tämänhetkinen sivu lataa uudelleen ja palauttaa kaikki lomakeelementit oletusarvoihinsa.

Syntaksi

...

Arvot

Arvoksi otetaan täysi tai suhteellinen polku palvelintiedostoon.

Oletusarvo

automaattinen täydennys

Ohjaa lomakekenttien automaattista täyttöä. Arvo voidaan ohittaa automaattisen täydennyksen attribuutilla erityisiä elementtejä lomakkeita.

Automaattisen täytön suorittaa selain, joka muistaa arvot, jotka kirjoitettiin ensimmäisen kerran, kun kirjoitat sen, ja korvaa ne, kun kirjoitat ne uudelleen lomakekenttiin. Tässä tapauksessa automaattinen täydennys voidaan poistaa käytöstä selaimen asetuksista, eikä sitä voi muuttaa tässä tapauksessa automaattisen täydennyksen attribuutilla.

Kun kirjoitat tekstin ensimmäiset kirjaimet, näkyviin tulee luettelo aiemmin tallennetuista arvoista, joista voit valita tarvitsemasi.

Syntaksi

...

Arvot

• päällä - Ottaa käyttöön lomakkeiden automaattisen täytön.
• off - Poistaa automaattisen täytön käytöstä. Tätä arvoa käytetään yleensä estämään selainta tallentamasta tärkeitä tietoja (salasanat, numerot pankkikortit), sekä harvoin syötetyt tai ainutlaatuiset tiedot (captcha).

Oletusarvo

enctype

Määrittää, kuinka lomaketiedot koodataan, kun ne lähetetään palvelimelle. Yleensä enctype-attribuuttia 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-attribuutiksi multipart/form-data.

Syntaksi

...

Arvot

• application/x-www-form-urlencoded - Välilyöntien sijaan laita + , symbolit, kuten venäläiset kirjaimet, koodataan niiden avulla heksadesimaaliarvot(esimerkiksi %D0%90%D0%BD%D1%8F Anyan sijaan).
• multipart/form-data - Tietoja ei ole koodattu. Tätä arvoa käytetään tiedostoja lähetettäessä.
• text/plain - Välilyönnit korvataan +-merkillä, kirjaimia ja muita merkkejä ei koodata.

Oletusarvo

Application/x-www-form-urlencoded

menetelmä

Metod-attribuutti kertoo palvelimelle pyyntömenetelmästä.

Syntaksi

...

Arvot

Method-attribuutin arvo ei välitä kirjainkoosta. On olemassa kaksi tapaa - hanki ja lähetä.

• get - Tämä menetelmä on yksi yleisimmistä, ja se on suunniteltu hankkimaan tarvittavat tiedot ja siirtämään tietoja osoitekenttä. Nimi=arvo-parit lisätään sitten 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 selaimesi kirjanmerkkeihin, ja voit myös muuttaa parametrien arvoja suoraan osoiterivillä.
• posti - Postitusmenetelmä lähettää tiedot palvelimelle selainpyynnössä. Tämän avulla voit lähettää Suuri määrä tietoja kuin on saatavilla hanki menetelmä, koska viestillä ei ole 4 kt:n rajaa. Foorumeilla käytetään suuria määriä dataa, postipalvelut, tietokannan täyttäminen, tiedostoja lähetettäessä jne.

Oletusarvo

nimi

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

Syntaksi

...

Arvot

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 name-attribuutissa.

Oletusarvo

novalidoida

Peruuttaa käyttäjän lomakkeelle syöttämien tietojen sisäänrakennetun tarkistuksen oikeellisuuden vuoksi. Selain suorittaa tämän tarkistuksen automaattisesti, kun lomake lähetetään palvelimelle ja se tapahtuu kentille , , sekä jos siinä on kuvio tai pakollinen attribuutti.

Syntaksi

...

Arvot

Oletusarvo

Oletuksena tämä määrite on poistettu käytöstä.

kohde

Kun lomakekäsittelijä on vastaanottanut tiedot, se palauttaa tuloksen HTML-dokumenttina. Voit määrittää kehyksen, johon tuloksena oleva verkkosivu latautuu. Tätä tarkoitusta varten sitä käytetään kohdemäärite, sen arvo on kehyksen nimi. Jos tavoitetta ei ole asetettu, palautettu tulos näytetään nykyisessä välilehdessä.

Syntaksi

...

Arvot

Arvo on elementin name-attribuutin määrittämä kehyksen nimi