HTML-formulieren zijn een van de meest basale manieren om interactiviteit aan uw website toe te voegen. U kunt vragen stellen en antwoorden van uw lezers vragen, aanvullende informatie uit databases geven, games opzetten en meer. Er zijn een aantal HTML-elementen die u kunt gebruiken om uw formulieren te bouwen. En als u eenmaal uw formulier hebt opgebouwd, zijn er veel verschillende manieren om die gegevens naar de server te verzenden of start u gewoon de formulieractie die wordt uitgevoerd.
Dit zijn verschillende manieren waarop u uw formulieren kunt indienen:
-
- Dit is de meest gebruikelijke methode om gegevens naar de server te krijgen, maar het kan er heel eenvoudig uitzien.
-
- Het gebruik van een afbeelding maakt het heel gemakkelijk om uw submit-knop passend te maken in de stijl van uw site. Maar sommige mensen herkennen het misschien niet als een verzendknop.
-
- De knop
INVOER tag geeft veel van dezelfde opties als de afbeelding
INVOER tag, maar lijkt meer op het standaard verzendtype. Het vereist JavaScript om te activeren.
- De knop
-
- De
KNOP tag is een veelzijdiger soort knop dan de
INVOER label. Voor deze tag moet Javacript worden geactiveerd.
- De
- De
COMMANDO element is nieuw in HTML5 en biedt een manier om scripts en formulieren met bijbehorende acties te activeren. Het is geactiveerd met JavaScript.
- De
Het INPUT-element
De invoer
INVOER element is de meest gebruikelijke manier om een formulier in te dienen, het enige dat u hoeft te doen, is een type kiezen (
knop,
beeldof
voorleggen) en voeg zo nodig wat scripts toe om in te dienen bij de formulieractie.
De element kan zomaar worden geschreven. Maar als u dat doet, heeft u verschillende resultaten in verschillende browsers. De meeste browsers maken een knop met de tekst "Submit", maar Firefox maakt een knop met de tekst "Submit Query." Om te wijzigen wat de knop zegt, moet u een attribuut toevoegen:
value = "Formulier verzenden">
Het element is zo geschreven, maar als u alle andere kenmerken laat staan, is alles dat in browsers wordt weergegeven een lege grijze knop. Gebruik de knop om tekst aan de knop toe te voegen
waardeattribuut. Maar deze knop verzendt het formulier alleen als u JavaScript gebruikt.
onclick = "submit ();">
Het is vergelijkbaar met de
knoptype, waarvoor een script nodig is om het formulier in te dienen. Behalve dat u in plaats van een tekstwaarde een afbeeldingsbron-URL moet toevoegen.
Het knopelement
De
KNOPelement vereist zowel een openingstag als een afsluitende tag. Wanneer u het gebruikt, wordt alle inhoud die u in de tag insluit, in een knop ingesloten. Vervolgens activeer je de knop met een script.
Formulier verzenden
U kunt afbeeldingen opnemen in uw knop of afbeeldingen en tekst combineren om een interessantere knop te maken.
Het besturingselement
De
COMMANDOelement is nieuw met HTML5. Het heeft geen a nodig
HET FORMULIER te gebruiken, maar het kan fungeren als een verzendknop voor een formulier. Met dit element kunt u meer interactieve pagina's maken zonder formulieren te hoeven maken, tenzij u echt formulieren nodig heeft. Als u wilt dat de opdracht iets zegt, schrijft u de informatie in a
labelattribuut.
label = "Formulier verzenden">
Als u wilt dat uw opdracht wordt weergegeven door een afbeelding, gebruikt u de
icoonattribuut.
icon = "submit.gif">
HTML-formulieren kunnen op verschillende manieren worden ingediend, zoals u op de vorige pagina hebt geleerd. Twee van die methoden zijn de
INVOERtag en de
KNOPlabel. Er zijn goede redenen om beide elementen te gebruiken.
Het invoerelement
De tag is de gemakkelijkste manier om een formulier in te dienen. Het vereist niets buiten de tag zelf, zelfs niet een
waardeWanneer een klant op de knop klikt, wordt deze automatisch verzonden. U hoeft geen scripts toe te voegen, de browsers weten het formulier in te dienen bij een inzending
INVOERtag wordt geklikt.
Het probleem is dat deze knop erg lelijk en duidelijk is. U kunt er geen afbeeldingen aan toevoegen. Je kunt het net als elk ander element stylen, maar het kan nog steeds een lelijke knop zijn.
Gebruik de
INVOERmethode wanneer uw formulier toegankelijk moet zijn, zelfs in browsers waarvoor JavaScript is uitgeschakeld.
Het KNOP Element
De
KNOPelement biedt meer opties voor het indienen van formulieren. Je kunt alles in een
KNOPelement en verander het in een verzendknop. Meestal gebruiken mensen afbeeldingen en tekst. Maar je zou een kunnen maken
DIV en maak van dat hele ding een verzendknop als je dat wilde.
Het grootste nadeel van de
KNOPelement is dat het formulier niet automatisch wordt ingediend. Dit betekent dat er een soort script moet zijn om het te activeren. En zo is het minder toegankelijk dan het
INVOERmethode. Elke gebruiker die JavaScript niet heeft ingeschakeld, kan geen formulier verzenden met alleen een
KNOPelement om het in te dienen.
Gebruik de
KNOPmethode op formulieren die niet zo kritisch zijn. Dit is ook een geweldige manier om extra inzendingsopties toe te voegen binnen één formulier.
