Een stapsgewijze handleiding om aan de slag te gaan met HTML-formulieren

HTML-formulier

Overzicht

HTML-formulieren zijn vereist als u gegevens wilt verzamelen van de persoon die uw website bezoekt. Wanneer u zich bijvoorbeeld registreert / aanmeldt voor toepassingen zoals Uber, Netflix of Facebook, voert u informatie in zoals Naam, E-mail en Wachtwoord via HTML-formulieren.

Nu leren we alle vereiste elementen voor het maken van een formulier.

OPMERKING: Ik heb de Styling al toegevoegd met behulp van CSS en dus zien mijn elementen er anders uit, maar ze werken op precies dezelfde manier.
Als je je elementen er dan als de mijne wilt laten uitzien, kun je mijn CSS-bestand vinden in de onderstaande links:
Aangepaste CSS: https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751
Normaliseer CSS:
https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Vormelement

Dit is het eerste element dat we zullen leren. Dit element omvat alle andere elementen die in onze vorm voorkomen. Dit is het vormelement.

Ons formulier verzendt de gegevens nergens, omdat deze niet zijn verbonden met een server. Om ons formulier te verbinden met een server en onze gegevens te verwerken, kunnen we elke taal aan de serverzijde gebruiken, zoals Node, Python, Ruby of PHP. Het deel van het verwerken van de gegevens omvat twee belangrijke attributen die aan het formulierelement zijn gekoppeld. Laten we die kenmerken eens bekijken.

attributen:

  1. actie: het actiekenmerk is het webadres (URL) van een programma dat de door ons formulier ingediende informatie verwerkt.
  2. methode: het is de HTTP-methode die de browser gebruikt om het formulier in te dienen, de mogelijke waarden zijn POST en GET.
  • POST - Gegevens uit de hoofdtekst van het formulier worden naar de server verzonden.
  • GET - Gegevens worden binnen de URL verzonden en parameters worden gescheiden door een vraagteken.
Opmerking: formulieren kunnen niet in een ander formulier worden genest. Dat betekent dat u geen
-element in een ander -element kunt hebben.

Invoerelement

Het invoerelement is het meest gebruikte formulierelement. Het wordt gebruikt om een ​​tekstveld te maken waar de gebruiker wat informatie kan typen, bijvoorbeeld e-mail, wachtwoord enz.

Laten we een tekstveld maken waarin de gebruiker zijn naam kan typen.

Opmerking: het invoerelement is een zelfsluitende tag, dus u hoeft geen afsluitende tag te typen die overeenkomt met de openingstag.

Ik heb drie attributen toegevoegd in de bovenstaande invoertag. Laten we elk in detail bekijken.

type

Het type attribuut geeft aan wat voor soort invoer we willen. Als we een waarde van tekst geven aan het kenmerk type, dan bedoelen we hier dat de waarde die we in het invoerveld invoeren, van het type tekst is. Er zijn veel mogelijke waarden voor dit specifieke kenmerk. Enkele mogelijke waarden zijn e-mail, telefoon voor telefoon en wachtwoord etc.

Voorbeeld: wanneer u zich aanmeldt bij een van uw accounts (Amazon / Netflix), moet u twee dingen invoeren: e-mailadres en wachtwoord. Dus in dit specifieke geval wordt het invoerelement gebruikt. Het type attribuut wordt gegeven met respectievelijk de waarde van e-mail en wachtwoord.

ID kaart

Het ID-kenmerk is niet verplicht, maar het is een goed idee om er een toe te voegen. In sommige gevallen is dit handig voor het richten van elementen met CSS / JavaScript. Het kenmerk ID wordt toegevoegd zodat we labels aan specifieke formulierbesturingselementen kunnen koppelen.

naam

Het kenmerk name is noodzakelijk. Wanneer een formulier wordt ingediend bij de servercode, kan de server de formuliergegevens begrijpen en de waarden op de juiste manier verwerken.

placeholder

Het is een korte hint die wordt weergegeven in het invoerveld voordat de gebruiker een waarde invoert. Wanneer de gebruiker in het invoerveld begint te typen, verdwijnt de tijdelijke aanduiding.

Laten we eens kijken hoe een paar andere basisinvoerelementen eruit zien.

Opmerking: het gebruik van verschillende waarden voor het kenmerk type levert verschillende resultaten op. U kunt bijvoorbeeld invoer invoeren van het type e-mail, tekst of wachtwoord enz. Ze vertonen allemaal iets ander gedrag, wat u hieronder zult zien.

Meerdere invoerelementen (tekst, e-mail, wachtwoord)

Meervoudig invoerelement (tekst, e-mail, wachtwoord)

Voer elementen in zonder plaatsaanduiding (links) & met plaatsaanduiding (rechts)

Textarea-element

Soms is een enkele regel tekst niet voldoende en werkt een eenvoudig invoerelement niet. Sommige websites hebben bijvoorbeeld een contactformulier waarmee mensen hun vragen of berichten kunnen typen. In deze gevallen is het het beste om het textarea-element te gebruiken.

Het