Hvordan lage en enkel kommentarfelt på en webside ved hjelp av HTML, CSS og JavaScript

For å få tilbakemelding eller en melding fra en besøkende på nettstedet, trenger du en kommentarfelt på websiden din. En kommentarfelt kan opprettes ved hjelp av hvilken som helst webteknologi enten det er enkel HTML, CSS eller til og med JavaScript. De tre verktøyene HTML, CSS og JavaScript er nok til å lage fullt funksjonelle nettsteder.

Vi skal utforske hvordan du lager en enkel kommentarfelt med HTML, CSS og JavaScript i dette innlegget.

Html

Åpne favorittredigereren din og skriv eller kopierer kode undergitt den gitte koden. Lagre filen med HTML -utvidelse.

Post

I HTML -koden ovenfor brukte vi lenke Tag i hodemerket for å referere til CSS -filen som vi vil bruke senere. Etter dette, i kropp Tag Først initierte vi en inngangsboks der en bruker kan skrive kommentaren sin. Deretter en knapp med navnet på post initieres som vil bli klikket for å legge inn en kommentar. Etter dette initierte vi en uordnet liste (UL) og lot den være tom fordi vi vil legge til et Li -element fra JavaScript i denne taggen. Du kan også se at vi bruker id Attributt i koden ovenfor som vil bli brukt til å referere til de tilsvarende elementene i JavaScript -koden. Den siste taggen er manus Tag der vi passerte referansen til JavaScript -filen som vil bli koblet til den gjeldende HTML -filen. Javascript -filnavnet er kode.JS.

CSS

Opprett en fil med navnet på stilen.CSS. Det skal bemerkes at du kan navngi filen din alt annet enn å huske å referere til navnet i HTML -fillenker -taggen. Kopier og lim inn koden nedenfor i CSS -filen din:

kropp
Bakgrunn: DodgerBlue Linear-gradient (45deg, Aqua, DodgerBlue, Deeppink) Fixed;

#kommentar-boks, #post
Grense: Ingen;
Border-Radius: 5px;

#post: Hopp
Bakgrunnsfarge: Deeppink;

I ovennevnte CSS -kode refererte vi først kropp Tag of HTML og dekorert kroppsbakgrunnen med forskjellige farger. Deretter ved å bruke id Attributt til inngangsboksen, vi forsvant grensen til inngangsboksen og ga den en radius på 5px. Den samme stylingen ble brukt på post knapp. Etter dette ved å bruke sveve Eiendommer vi setter en bakgrunnsfarge på dype rosa for innleggsknappen som betyr når en bruker vil sveve over post Knapp fargen vil endre seg til dyp rosa.

JavaScript

Opprette en JavaScript -fil med JS Forlengelse for eksempel kode.JS. Det skal bemerkes at navnet på filen skal være likt den som ble referert til i skriptkoden til HTML -filen.

I kode.JS Fil, først får vi HTML -knappelementet ved å bruke getElementById () Metode og send navnet på IDen gitt til knappen i HTML. Du kan også se en begivenhetslytter knyttet til post som i utgangspunktet er knappelementet. Denne hendelseslytteren vil kontinuerlig lytte, og når en bruker klikker på post knapp funksjonen innenfor Hendelseslytter vil bli henrettet.

var post = dokument.getElementById ("Post");
post.AddEventListener ("Klikk", funksjon ()
var commentBoxValue = dokument.getElementById ("Kommentarboks").verdi;
var li = dokument.CreateElement ("Li");
var tekst = dokument.CreateTextNode (CommentBoxValue);
li.vedlegg (tekst);
dokument.getElementById ("Uordnede").vedlegg (li);
);

I tilfelle lytterfunksjonen, først får vi verdien av inngangsboksen, og etter det opprettet vi et Li -element. For å angi teksten til Li -elementet vi brukte CreateTextNode Og etter det ved å bruke vedlegg metode Vi ga teksten til Li -elementet. Endelig ved å bruke vedlegg Metode Vi gir den uordnede listen over Li -elementet vi nettopp opprettet.

Konklusjon

HTML, CSS og JavaScript er byggesteinene for en nettutvikler, og mange nettsteder er utviklet ved hjelp av disse tre teknologiene.

I dette innlegget ga vi deg koden og forklaringen av koden på hvordan du oppretter en kommentarfelt ved hjelp av HTML, CSS og JavaScript. Dette prosjektet vil komme til nytte når du lager oppgavelister, kommenterer en webside eller tilbakemeldingsskjemaer, samt knytter tekst til en side i ethvert webprosjekt.