Fer botons HTML en formularis

Ús de l'etiqueta d'entrada per enviar formularis

Els formularis HTML són una de les maneres més bàsiques d'afegir la interactivitat al vostre lloc web. Podeu fer preguntes i sol·licitar respostes dels vostres lectors, proporcioneu informació addicional de bases de dades, configuració de jocs i molt més. Hi ha diversos elements HTML que podeu utilitzar per crear els vostres formularis. I una vegada que hàgiu creat el vostre formulari, hi ha moltes maneres diferents de enviar aquestes dades al servidor o simplement iniciar l'acció del formulari en execució.

Aquestes són diverses maneres d'enviar els vostres formularis:

L'element INPUT

L'element INPUT és la forma més comú d'enviar un formulari, tot el que feu és escollir un tipus (botó, imatge o enviament) i, si cal, afegiu-hi alguns scripts per enviar-los a l'acció del formulari.

L'element es pot escriure de la mateixa manera. Però si ho feu, tindreu resultats diferents en diferents navegadors. La majoria dels navegadors fan un botó que diu "Enviar", però Firefox fa un botó que diu "Enviar consulta". Per canviar el que diu el botó, heu d'afegir un atribut:

value = "Submit Form">

L'element s'escriu així, però si deixeu de banda tots els altres atributs, tot el que es mostrarà als navegadors serà un botó gris buit. Per afegir text al botó, utilitzeu l'atribut de valor. Però aquest botó no enviarà el formulari a menys que utilitzeu JavaScript.

onclick = "submit ();">

És similar al tipus de botó, que necessita un script per enviar el formulari. Excepte que, en comptes d'un valor de text, heu d'afegir un URL d'origen de la imatge.

src = "submit.gif">

Element BUTTON

L'element BUTTON requereix un etiqueta d'obertura i una etiqueta de tancament. Quan l'utilitzeu, qualsevol contingut que inclogui dins de l'etiqueta quedarà tancat en un botó. A continuació, activeu el botó amb un script.

Envieu el formulari

Podeu incloure imatges al botó o combinar imatges i text per crear un botó més interessant.

Envieu el formulari

Element COMMAND

L'element COMMAND és nou amb HTML5. No requereix que s'utilitzi un FORMULARI, sinó que pot actuar com a botó de presentació d'un formulari. Aquest element us permet crear pàgines interactives sense necessitat de formularis a menys que realment necessiteu formularis. Si voleu que l'ordre digui alguna cosa, escriu la informació en un atribut d'etiqueta.

label = "Enviar formulari">

Si voleu que la vostra comanda sigui representada per una imatge, utilitzeu l'atribut d'icona.

icon = "submit.gif">

Aquest article forma part del Tutorial sobre formularis HTML. Llegeix el tutorial complet per aprendre a utilitzar els formularis HTML.

Els formularis HTML tenen diverses formes d'enviar, tal com heu après a la pàgina anterior. Dos d'aquests mètodes són l'etiqueta INPUT i l'etiqueta BUTTON. Hi ha bones raons per utilitzar aquests dos elements.

L'element INPUT

L'etiqueta és la forma més senzilla d'enviar un formulari. No requereix res més enllà de l'etiqueta, ni tan sols un valor. Quan un client fa clic al botó, s'envia automàticament. No cal que afegiu cap scripts, els navegadors saben que envien el formulari quan es fa clic a una etiqueta INPUT.

El problema és que aquest botó és molt lleig i senzill. No podeu afegir-hi imatges. Podeu estilar-lo com qualsevol altre element, però encara se sent un botó lleig.

Utilitzeu el mètode INPUT quan el formulari ha de ser accessible fins i tot en navegadors que tinguin JavaScript desactivat.

Element BUTTON

L'element BUTTON ofereix més opcions per enviar formularis. Podeu col·locar qualsevol element dins d'un element BUTTON i convertir-lo en un botó d'enviar. Més freqüentment, les persones utilitzen imatges i text. Però podeu crear un DIV i fer que tot això envieu un botó si voleu.

El major inconvenient de l'element BUTTON és que no envia automàticament el formulari. Això vol dir que cal que hi hagi algun tipus d'script per activar-lo. Per tant, és menys accessible que el mètode INPUT. Qualsevol usuari que no tingui JavaScript activat no podrà enviar un formulari amb només un element BUTTON per enviar-lo.

Utilitzeu el mètode BUTTON en formularis que no són tan crítics. A més, aquesta és una bona manera d'afegir opcions d'enviament addicionals d'un sol formulari.

Aquest article forma part del Tutorial sobre formularis HTML . Llegiu-ho per obtenir més informació sobre com utilitzar formularis HTML