Jak utworzyć proste pole komentarzy na stronie internetowej za pomocą HTML, CSS i JavaScript

Aby uzyskać opinię lub dowolną wiadomość od gościa witryny, potrzebujesz pola komentarza na swojej stronie internetowej. Pole komentarza można utworzyć za pomocą dowolnej technologii internetowej, niezależnie od tego, czy jest to proste HTML, CSS, czy nawet JavaScript. Trzy narzędzia HTML, CSS i JavaScript wystarczą, aby stworzyć w pełni funkcjonalne strony internetowe.

Zbadamy, jak zrobić proste pole komentarzy z HTML, CSS i JavaScript w tym poście.

Html

Otwórz swój ulubiony edytor i wpisz lub skopiuj kod poniżej podanego poniżej. Zapisz plik z rozszerzeniem HTML.

Post

W powyższym kodzie HTML użyliśmy połączyć znacznik w znaczniku głównym, aby odwołać się do pliku CSS, którego użyjemy później. Po tym, w ciało Tag Najpierw zainicjowaliśmy pole wejściowe, w którym użytkownik może wpisać swój komentarz. Następnie przycisk z nazwą post jest inicjowany, który zostanie kliknięty, aby wprowadzić komentarz. Następnie zainicjowaliśmy listę nieopisaną (UL) i pozostawiliśmy ją puste, ponieważ dodamy element Li z JavaScript w tym znaczniku. Możesz także zobaczyć, że używamy ID atrybut w powyższym kodzie, który zostanie użyty do odwołania się do odpowiednich elementów w kodzie JavaScript. Ostatni tag jest scenariusz Tag, w którym przeszliśmy odniesienie do pliku JavaScript, który zostanie dołączony do bieżącego pliku HTML. Nazwa pliku JavaScript to kod.JS.

CSS

Utwórz plik o nazwie stylu.CSS. Należy zauważyć, że możesz wymienić swój plik wszystko, ale pamiętaj, aby odwołać się do tej nazwy w znaczniku łącza pliku HTML. Skopiuj i wklej poniższy kod w pliku CSS:

ciało
Tło: Dodgerblue liniowy (45DEG, Aqua, DodgerBlue, Deeppink) ustalone;

#komentarz-box, #post
Border: Brak;
RADIUS BERDER: 5px;

#post: Hover
kolor tła: Deeppink;

W powyższym kodzie CSS, po pierwsze, odnieśliśmy się do ciało Tag html i ozdobił tło nadwozia różnymi kolorami. Następnie za pomocą ID atrybut pola wejściowego zniknęliśmy granicę pola wejściowego i daliśmy jej promień 5px. Ten sam styl został zastosowany do post przycisk. Po tym używa unosić się właściwość, którą ustawiamy kolor tła głęboko-różowego dla przycisku pocztowego, co oznacza, że ​​za każdym razem, gdy użytkownik unosi post przycisk jego kolor zmieni się na głęboki różowy.

JavaScript

Utwórz plik JavaScript z JS rozszerzenie na przykład kod.JS. Należy zauważyć, że nazwa pliku powinna być podobna do tego, do którego odniesiono się do znacznika skryptu pliku HTML.

w kod.JS Plik, najpierw, otrzymujemy element przycisku HTML za pomocą getElementById () Metoda i przekaż nazwę identyfikatora podanego do przycisku w HTML. Możesz także zobaczyć słuchacz zdarzeń dołączony do post który jest zasadniczo elementem przycisku. Ten słuchacz zdarzenia będzie ciągle słuchać i za każdym razem, gdy użytkownik kliknie post przycisk funkcji w obrębie Słuchacz wydarzenia zostanie wykonane.

var post = dokument.getElementById („post”);
post.addEventListener („kliknij”, funkcja ()
var commentBoxValue = dokument.getElementById („komentarz-box”).wartość;
var li = dokument.createElement („li”);
var text = dokument.CreateTextNode (CommentBoxValue);
Li.appendChild (tekst);
dokument.getElementById („Un -upored”).appendchild (li);
);

W przypadku funkcji słuchacza, po pierwsze, otrzymujemy wartość pola wejściowego, a potem utworzyliśmy element Li. Aby ustawić tekst elementu Li, którego użyliśmy CreateTextNode a po tym użyciu załącznik Metoda podaliśmy tekst do elementu Li. W końcu używając załącznik Metoda, którą dostarczamy nieoporządkowaną listę elementu Li, który właśnie utworzyliśmy.

Wniosek

HTML, CSS i JavaScript są blokami składowymi dla programisty internetowych, a wiele stron internetowych opracowuje się przy użyciu tych trzech technologii.

W tym poście przekazaliśmy ci kod i wyjaśnienie kodu na temat utworzenia pola komentarza za pomocą HTML, CSS i JavaScript. Ten projekt przydaje się, gdy tworzysz listy rzeczy do zrobienia, komentarze na stronie internetowej lub formularzach opinii, a także dołączają tekst do strony w dowolnym projekcie internetowym.