HTML-painikkeiden muodostaminen lomakkeille

Input-tunnisteen käyttäminen lomakkeiden lähettämiseen

HTML-lomakkeet ovat yksi tärkeimmistä tavoista lisätä interaktiivisuutta verkkosivustoosi. Voit esittää kysymyksiä ja pyytää vastauksia lukijoilta, antaa lisätietoja tietokannoista, perustaa pelejä ja paljon muuta. Lomakkeiden luomiseen voi käyttää useita HTML-elementtejä. Ja kun olet rakentanut lomakkeen, on olemassa monia eri tapoja lähettää nämä tiedot palvelimelle tai aloittaa lomakkeen toiminta käynnissä.

Voit lähettää lomakkeesi useita tapoja:

INPUT-elementti

INPUT-elementti on tavallisin tapa lähettää lomake. Valitse vain tyyppi (painike, kuva tai lähetä) ja lisää tarvittaessa komentotiedostoja lomaketoimintaan.

elementti voidaan kirjoittaa juuri sellaiseksi. Mutta jos et, sinulla on erilaisia ​​tuloksia eri selaimissa. Useimmat selaimet tekevät painiketta, joka sanoo "Lähetä", mutta Firefox tekee painikkeen, joka sanoo "Lähetä kysely". Jos haluat muuttaa mitä painiketta sanoo, lisää attribuutti:

value = "Lähetä lomake">

Elementti on kirjoitettu sellaisella tavalla, mutta jos jätät pois kaikki muut attribuutit, kaikki selaimissa näkyvät tyhjät harmaat painikkeet. Jos haluat lisätä tekstiä painikkeeseen, käytä attribuuttiarvoa. Mutta tämä painike ei lähetä lomaketta, ellet käytä JavaScriptia.

onclick = "lähetä ();">

Se on samanlainen kuin painotyyppi, joka tarvitsee komentosarjan, joka lähettää lomakkeen. Paitsi että teksti-arvon sijasta sinun on lisättävä kuvan lähde-URL-osoite.

src = "submit.gif">

PAINIKE-elementti

BUTTON-elementti vaatii sekä avaustunnisteen että sulkevan tunnisteen. Kun käytät sitä, kaikki sisältö, jonka liitetät tunnisteen sisällä, on suljettu painikkeeseen. Sitten aktivoidaan painike käsikirjoituksella.

Lähetä lomake

Voit liittää kuvia painikkeeseesi tai yhdistellä kuvia ja tekstiä, jotta voit luoda mielenkiintoisemmän painikkeen.

Lähetä lomake

Komento-elementti

COMMAND-elementti on uusi HTML5: n kanssa. Se ei vaadi lomaketta, mutta se voi toimia lomakkeen lähetyspainikkeena. Tämän elementin avulla voit luoda enemmän vuorovaikutteisia sivuja ilman muodollisia lomakkeita, ellet todellisuudessa tarvitse lomakkeita. Jos haluat komennon sanovan jotain, kirjoitat tiedot merkintäominaisuuteen.

label = "Lähetä lomake">

Jos haluat, että komento on kuvattu kuvana, käytä kuvakomponenttia.

ikoni = "submit.gif">

Tämä artikkeli on osa HTML-lomakkeiden opetusohjelmaa. Lue koko oppitunnin oppia käyttämään HTML-lomakkeita.

HTML-lomakkeilla on useita eri tapoja lähettää, kuten olet oppinut edellisellä sivulla. Kaksi näistä menetelmistä on INPUT-tunniste ja PAINIKE-tunniste. Näillä elementeillä on hyviä syitä.

INPUT-elementti

Tunniste on helpoin tapa lähettää lomake. Se ei vaadi mitään itse tagin lisäksi, ei edes arvoa. Kun asiakas napsauttaa painiketta, se lähettää automaattisesti. Sinun ei tarvitse lisätä komentosarjoja, selaimet osaavat lähettää lomakkeen, kun INPUT-tunnisteen napsautetaan.

Ongelma on, että tämä painike on hyvin ruma ja tavallinen. Et voi lisätä kuvia siihen. Voit muotoilla sitä aivan kuten minkä tahansa muun elementin, mutta silti voi tuntua ruma-painikkeelta.

Käytä INPUT-menetelmää, kun lomakkeesi on oltava saatavilla myös selaimissa, joissa JavaScript on poistettu käytöstä.

PAINIKE-elementti

Painike-elementti tarjoaa enemmän vaihtoehtoja lomakkeiden lähettämiseen. Voit laittaa minkä tahansa PAINIKE-elementin sisälle ja muuttaa sen lähetyspainikkeeksi. Yleisimmin ihmiset käyttävät kuvia ja tekstiä. Mutta voit luoda DIV: n ja tehdä siitä koko juttu lähetyspainikkeen, jos haluat.

PITKÄ-elementin suurin haittapuoli on, että se ei lähetä lomaketta automaattisesti. Tämä tarkoittaa sitä, että sen aktivoimiseen tarvitaan jonkinlainen käsikirjoitus. Ja niin se on vähemmän saatavilla kuin INPUT-menetelmä. Jokainen käyttäjä, jolla ei ole JavaScript-toimintoa käyttöön, ei voi lähettää lomaketta, jossa on vain PAINIKE-elementti sen lähettämiseen.

Käytä BUTTON-menetelmää lomakkeissa, jotka eivät ole yhtä kriittisiä. Tämä on myös erinomainen tapa lisätä lähetysvaihtoehtoja yhdessä muodossa.

Tämä artikkeli on osa HTML-lomakkeiden opetusohjelmaa . Lue lisätietoja HTML-lomakkeiden käytöstä