Farante HTML Butonoj sur Formoj

Uzante la Eniga Etikedo por Proponi Formojn

HTML-formoj estas unu el la plej bazaj manieroj por aldoni interagadon al via retejo. Vi povas demandi demandojn kaj peti respondojn de viaj legantoj, provizi pliajn informojn de datumbazoj, starigi ludojn kaj pli. Estas multaj HTML-elementoj kiujn vi povas uzi por konstrui viajn formojn. Kaj iam vi konstruis vian formon, ekzistas multaj malsamaj manieroj por sendi tiun datumon al la servilo aŭ simple funkciigi la agadon.

Ĉi tiuj estas pluraj manieroj, kiujn vi povas sendi viajn formojn:

La INPUT Elemento

La INPUT-elemento estas la plej komuna maniero por prezenti formon, ĉio, kion vi faras, elektas tipon (butonon, bildon aŭ submeton) kaj se necese aldonu iujn skripton por submetiĝi al la formularo.

La elemento povas esti skribita kiel tia. Sed se vi faros, vi havos malsamajn rezultojn en malsamaj retumiloj. La plej multaj foliumiloj faras butonon, kiu diras "Proponi", sed Firefox faras butonon, kiu diras "Proponi". Por ŝanĝi la butonon diras, vi devas aldoni atributon:

valoro = "Afiŝu Formo">

La elemento estas skribita kiel tio, sed se vi forlasos ĉiujn aliajn atributojn, ĉio, kio montriĝos en retumiloj, estas malplena griza butono. Por aldoni tekston al la butono, uzu la valorajn atributojn. Sed ĉi tiu butono ne submetos la formon krom se vi uzas JavaScript.

onclick = "submit ();">

La similas al la butono-tipo, kiu bezonas skripton por submeti la formon. Krom se anstataŭ valoro de teksto, vi devas aldoni bildan fonton URL.

src = "submit.gif">

La BOTO-Elemento

La elemento BUTTON postulas kaj malfermi etiketon fermantan etikedon Kiam vi uzas ĝin, ĉiu enhavo, kiun vi enmetos ene de la etikedo, estos fermita per butono. Tiam vi aktivigas la butonon per skripto.

Submetu Formon

Vi povas inkluzivi bildojn en via butono aŭ kombini bildojn kaj tekston por krei pli interesan butonon.

Submetu Formon

La COMMAND-Elemento

La COMMAND-elemento estas nova kun HTML5. Ĝi ne postulas uzi FORMON, sed ĝi povas agi kiel submeta butono por formo. Ĉi tiu elemento ebligas al vi krei pli interagajn paĝojn sen postuli formojn krom se vi vere bezonas formojn. Se vi volas la ordonon diri ion, vi skribas la informon per etikedo.

label = "Submetu Formon">

Se vi volas ke via komando estu reprezentata de bildo, vi uzas la ikonon-atributon.

ikono = "submit.gif">

Ĉi tiu artikolo estas parto de la HTML-Formoj-Tutorial. Legu tra la plena lernilo por lerni kiel uzi HTML-formojn.

HTML-formoj havas plurajn malsamajn manierojn submetiĝi, kiel vi lernis en la antaŭa paĝo. Du el tiuj metodoj estas la INPUT-etikedo kaj la BUTTON-etikedo. Estas bonaj kialoj por uzi ambaŭ el ĉi tiuj elementoj.

La INPUT Elemento

La etikedo estas la plej facila maniero por prezenti formon. Ĝi postulas nenion preter la etikedo mem, eĉ ne valoro. Kiam kliento alklakas la butonon, ĝi sendas aŭtomate. Vi ne bezonas aldoni ajnajn skriptoj, la retumiloj scias submeti la formularon kiam alŝutita INPUT-etikedo estas klakita.

La problemo estas, ke ĉi butono estas tre malbela kaj klara. Vi ne povas aldoni bildojn al ĝi. Vi povas stiri ĝin kiel ajnan alian elementon, sed ĝi ankoraŭ povas senti kiel malbela butono.

Uzu la INPUT-metodon kiam via formularo devas esti akcesebla eĉ en retumiloj, kiuj havas JavaScriptŝaltilon.

La BOTO-Elemento

La BUTTON-elemento proponas pli da ebloj por submeti formojn. Vi povas meti ion en BOTON-elementon kaj turnu ĝin en submetan butonon. Plej ofte homoj uzas bildojn kaj tekston. Sed vi povus krei DIV kaj fari tiun tutan aferon submeti butonon se vi volus.

La plej granda malavantaĝo al la BUTTON-elemento estas, ke ĝi ne aŭtomate prezentas la formon. Ĉi tio signifas, ke necesas esti ia tipo de skripto por aktivigi ĝin. Do ĝi estas malpli atingebla ol la INPUT-metodo. Ajna uzanto, kiu ne havas aktivan JavaScript, ne povos prezenti formon kun nur BUTON-elemento por submeti ĝin.

Uzu la BUTON-metodon sur formoj, kiuj ne estas tiel kritikaj. Ankaŭ, ĉi tio estas granda maniero aldoni pliajn submetajn eblojn ene de unu formo.

Ĉi tiu artikolo estas parto de la HTML-Formoj-Tutorial . Legu ĝin por lerni pli pri kiel uzi HTML-formojn