Inleiding tot HTML-formulierbesturing
HTML is de opmaaktaal voor het maken van webpagina's. Het definieert de structuur en het gedrag van de webpagina. HTML bestaat uit tags en elementen die helpen bij het structureren van de webpagina's. Deze elementen kunnen in een formulier worden gegroepeerd om op een gebruikersvriendelijke manier gegevens van een gebruiker te verzamelen. Houd er echter rekening mee dat HTML een stateless protocol is, wat betekent dat het niets kan opslaan en dat u de gegevens op een vernieuwde pagina verliest.
HTML-formulierbeheer
Er zijn verschillende soorten formulierbesturing die zijn gedefinieerd in de HTML. Deze besturingselementen zijn verantwoordelijk voor het accepteren van de invoer van de gebruiker op een specifieke manier. Laten we eens kijken naar de verschillende soorten beschikbare formulierbesturingselementen in HTML.
1) Invoertekstcontrole
Invoertekstbesturingselementen worden gebruikt om gebruikersgegevens als een vrije tekst te verzamelen. Op de webpagina vormt het een rechthoekig vak waar gebruikers de gegevens kunnen invoeren.
Er zijn verschillende typen invoertekstbesturingselementen die kunnen worden gebruikt in de HTML-formulieren. Laten we eens kijken naar de verschillende soorten invoertekstbesturingselementen.
- Tekstinvoer met één regel
Hiermee kan de gebruiker slechts één gegevensregel invoeren. Een typisch voorbeeld van dergelijke invoertekstbesturingselementen is voor het invoeren van de naam, het zoekvak, de stad, enz.
- Meerregelige tekstinvoerbesturing
Met dit invoerbesturingstype kan de gebruiker gegevens van meerdere lijnen invoeren. Typisch gebruik van dergelijke invoerbesturingselementen is voor opmerkingen, adressen, beschrijving enzovoort.
Hier geven rijen het aantal regels in het tekstgebied aan en geeft col het aantal kolommen aan.
- Wachtwoordinvoerbeheer
Zoals de naam suggereert, wordt dit meestal gebruikt voor het wachtwoordveld. Dit werkt op dezelfde manier als het invoertekstveld, maar de tekst wordt om veiligheidsredenen gemaskeerd.
2) Invoertype Verzenden
Wanneer het invoertype van verzenden is, voert het de actie uit die is gedefinieerd in de formulieractie en verzendt de formuliergegevens naar de server.
Hier worden de gebruikersnaam en wachtwoordwaarden aan de server voorgelegd bij de knopklikgebeurtenis van de knop Verzenden. De actie in het formulier is de servermethode die de invoer accepteert.
3) Ingangstype radio
Radioknoppen worden gebruikt wanneer u verwacht dat Gebruikers gegevens vullen als een Booleaanse waarde of als u slechts één invoer als waar verwacht uit meerdere opties. Een veelvoorkomend gebruik van keuzerondjes is geslachtsbepaling, type werknemer (Normaal / Tijdelijk) enzovoort.
4) Selectievakje Invoertype
Een selectievakje laat de gebruiker selecteren welke informatie in zijn geval waar is. Het is een zeer handige manier om de gegevens te accepteren wanneer de mogelijke invoer al bekend is.
Als u bijvoorbeeld het type verzekering wilt verzamelen dat een persoon heeft, kunt u dit eenvoudig doen met de selectievakjes, omdat de opties beperkt zouden zijn.
5) Vervolgkeuzelijst Invoertype
Met de vervolgkeuzelijst kan de gebruiker één optie selecteren uit meerdere mogelijke opties. Dit is een zeer gebruiksvriendelijke manier om de details van de gebruiker te krijgen, omdat het een uitputtende lijst van mogelijke opties biedt die de gebruiker helpt om de optie te identificeren die het beste bij hem past.
Bijvoorbeeld, vervolgkeuzelijst om een lijst weer te geven van de stad waartoe een werknemer kan behoren
6) Optietroep ingangstype
Optgroup werkt op dezelfde manier als in de vervolgkeuzelijst, het enige verschil is dat de optgroup u in staat stelt om logisch bepaalde opties onder één paraplu te groeperen. Het helpt de gebruiker om snel de relevante optie te identificeren met behulp van het optgroup-label.
Bijvoorbeeld vervolgkeuzelijsten om de steden van de verschillende staten in India weer te geven, gegroepeerd op staten.
7) Fieldset
Fieldset is een andere nuttige tag in de HTML-vorm waarmee de ontwikkelaar bepaalde besturingselementen logisch onder één legenda kan groeperen. Dit helpt de ontwikkelaar om de gebruiker een duidelijke instructie te geven over wat hij in deze sectie kan verwachten.
Bijvoorbeeld veldset voor de inlogpagina
8) HTML-uitvoertag
Deze uitvoertag wordt geïntroduceerd in HTML5. Hiermee kunt u de uitvoer van een berekening direct weergeven. Dit is vrij handig wanneer de gebruiker onmiddellijk een berekening moet uitvoeren en de resultaten moet zien. Een typisch voorbeeld van dergelijke gevallen is wanneer de gebruiker de som van alle items in de winkelwagen wil controleren.
In het bovenstaande voorbeeld hebben we het prijsbereik van het artikel gedefinieerd als 0 tot 100 en dit kan tijdens runtime worden gewijzigd. Het andere tekstvak met de waarde 12 is de belasting die op dat artikel wordt geheven, het kan ook tijdens runtime worden gewijzigd. Het uitvoerresultaat 58 is de som van beide waarden.
Opmerking: deze tag wordt niet ondersteund op Edge 12 of Internet Explorer van een eerdere versie.
9) Invoertype Kleur
In het formulier is het vaak nodig om alleen de kleur weer te geven in plaats van tekst. Met invoertype kleur in HTML 5 kunt u dat doen. Het toont de kleur die u in het formulier wilt weergeven. Typische scenario's waarbij het wordt gebruikt, is om de status van een project of een fase te tonen.
Opmerking : kleur wordt niet ondersteund in bepaalde versies van Internet Explorer en Edge.
10) Invoertype Datum
Invoertype datum wordt meestal gebruikt wanneer een datumtype veld als invoer wordt verwacht door de gebruiker, dit kan zoiets zijn als een geboortedatum, huurdatum, einddatum enzovoort. Het wordt geïntroduceerd in HTML 5 en de datumnotatie varieert enigszins met de verandering van browser.
Conclusie
- Met de introductie van HTML 5 is het aantal ondersteunde HTML-besturingselementen enorm toegenomen. Deze HTML-formulierbesturingselementen kunnen verschillende effecten en kleuren krijgen met behulp van CSS 3 en JavaScript / jQuery / Angular JS.
- In dit artikel hebben we alle veelgebruikte HTML-formulierbesturingselementen behandeld. Er zijn veel besturingselementen zoals verborgen, opnieuw instellen, week, URL, tijd, e-mail, bestand, DateTime-local, afbeelding, tel die niet in dit artikel worden behandeld. Het is heel belangrijk om de browsercompatibiliteit van deze besturingselementen te controleren voordat u dit in het project implementeert, omdat veel browserversies geen HTML 5-formulierbesturingselementen ondersteunen.
Aanbevolen artikelen
Dit is een gids geweest voor HTML-formulierbesturing. Hier bespreken we de introductie en verschillende soorten formulierbesturing die zijn gedefinieerd in de HTML. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie -
- HTML-kenmerken
- HTML-indeling Tags
- HTML-stijlbladen
- Carrière in HTML
- HTML-frames
- HTML-blokken
- Html5 Nieuwe elementen
- Stel een achtergrondkleur in HTML in met Voorbeeld