HTML brukes til å lage strukturen på websiden, og skriptspråkene som JavaScript brukes til å gjøre websiden mer interaktiv og dynamisk. Dessuten tilbyr HTML forskjellige attributter til sine elementer som hjelper til med å kode JavaScript. For eksempel trenger vi skjemaer i nesten alle applikasjoner for å legge inn informasjon. For å sende inn skjemadata til serveren, er det pålagt å ha en knapp som vil hente den skrevne informasjonen og sende den til JavaScript for videre behandling.

Denne guiden vil lære om HTML “”Å ha attributtverdi”sende inn”. Så la oss dykke inn!

Hvordan legge til HTML -knappetype = “Send” attributt?

I HTML, først, legg til et klassenavn “myform”. Utfør deretter følgende trinn:

• Inne i diven, legg til

  Tag for overskriften.

• Legg deretter til to tekstbokser for første og etternavn med etiketter. “til”Attributt til“merkelapp”Tag og“id”Attributt til“inngang”Tag må være den samme. Dette vil knytte bildeteksten til inngangskontrollen.
• Legg til en knapp med "type”Verdi satt som“sende inn”,“verdi" som "sende inn”, Og“id" som "sende inn”.
• Etter det, knytter “addata ()”Funksjon med sendeknappen, som vil utløse når knappen er klikket. Dette skjemaet vil ta dataene fra brukeren og vise dem på samme side.
• Til slutt, spesifiser

  Tagger der de innsendte dataene må vises. Disse

  Tagger har tildelt ID -er som "displayfname”Og“displaylname”Det vil bli brukt i JavaScript -filen for å få tilgang til dem og utføre den videre driften.

Html

Knappetypen "send inn" attributt

Fornavn:



Etternavn:



Sende inn

Du har sendt inn fornavn:> __________.

Du har sendt etternavn:> ___________.

La oss bruke noen CSS-stiler på ovennevnte div. Her, ".myform”Henviser til DIV -navnet som er nevnt i HTML -filen:

• Tilordne “bakgrunnsfarge”Eiendomsverdi som“#81B29A”.
• “Tekstalign" som "senter”Justerer innholdet i div i sentrum.
• “høyde”Eiendomsverdien er satt som“300px”.
• “skriftstørrelse”Er satt som“stor”.

CSS

.myform
Bakgrunnsfarge: #81B29A;
tekst-align: sentrum;
Høyde: 300px;
Font-størrelse: stor;

Merk: Vi har ikke lagt til JavaScript -koden. Som et resultat vil ikke send -knappen svare:

La oss nå flytte for å kode JavaScript -funksjonen som vil bli utløst på knappeklikk. For å gjøre det, for det første, opprette en ny fil som har en utvidelse som ".JS”. Deretter definerer du en funksjon som heter “addata ()”. Denne funksjonen vil først hente verdien av begge inngangsfeltene ved å få tilgang til dem ved hjelp av ID -ene i dokumentet.getElementById () -metode. Vis deretter den hentede verdien som den indre teksten til de ekstra etikettene.

JavaScript

funksjon addData ()
var fname = dokument.getElementById ("Fname").verdi;
var lname = dokument.GetElementById ("LName").verdi;
dokument.getElementById ("DisplayFname").innertekst = fname;
dokument.getElementById ("DisplayLName").innertekst = lname;

Det kan observeres at etter å ha kommet inn i første og etternavn når "Sende inn”Knappen klikker, navnene vises i etikettene:

Vi har lært hvordan HTML sender knappen fungerer med praktisk demonstrasjon.

Konklusjon

I HTML er det hundrevis av elementer som avsnitt, inngangsfelt, knapper og mer. Mer spesifikt, HTML -knappelementet med attributtverdien “sende inn”Brukes til å sende inn dataverdiene til skjemabehandleren eller for å behandle inngangsverdiene. I denne guiden har vi brukt sendeknappen for å påkalle en JavaScript -funksjon med praktiske eksempler.