How To Create A Comment Box In HTML And JavaScript
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Amruta
In this tutorial we will show you the solution of how to create a comment box in HTML and JavaScript, in html for comment box we need to use textarea tag and usually when we using comment box it will submitted to particular blog.
Comment box mostly used for collects viewers feedback and suggestions about our blog so we can get some idea from others thinking.
It really helpful when others gives their opinion we can improve our side in all ways.
Step By Step Guide On How To Create A Comment Box In HTML And JavaScript :-
In html we are using <textarea> tag for creating comment box. A comment box is an open-ended space where respondents can add comments or suggestions in the form of text.
Comment box can collect more number of information from users and its always created for collects users opinion then posted.
For posting we created submit button and posted below of comment box by javascript in our webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CommentBox</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="info">
<textarea id="example" placeholder="Hey! Say Something..."></textarea><br>
<input id="sent" type="submit" value="Send">
</div>
<p id="para"></p>
<script>
window.onclick=function(e){
var id=e.target.id;
if(id==='sent'){
var txt=document.getElementById('example').value
$("#para").empty().append(txt);
}
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Within <script> tags we defined jquery link for getting library support from online.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- First we created <div> tag with class ‘info’ its block level element. Then we defined <textarea> tag with attributes of ‘id,placeholder’ respective values ‘example, Hey! Say Something...’.
- Id attribute defined for access textarea value and the placeholder attribute used for specify user instruction about what user needs to fill on that input field.
- <input> tag we defined for create submit button so its type ‘submit’ with value of ‘Send’ and id attribute ‘sent’ created for needs to use in script.
- In <script> the window object defined with ‘onclick’ event so its wait for when user clicks on that window it loads function with parameter ‘e’. The ‘e’ parameter used for verify whether our submit button is clicked or not.
- Then textarea value collected by using id attribute ‘example’ and stored to variable ‘txt’. In jquery for select any element we need to specify ‘$’ before brackets and within brackets we defined our paragraph id ‘#para’.
- Using that we are appending textarea all value to the paragraph by append() method and empty() method used for removes all child nodes and content from the selected elements. So we can append new values only on below result otherwise it appends new values also to the old values continuously.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know about how to create comment box and post user inputs using html and javascript.
When we creating or making anything we need others opinion also by using comment box we can easily get widely using user’s opinion so we can improve our blog or product anything.
Eyeryone can share suggestions and solution for our any problem its really useful for worldwide.
I hope this tutorial on how to create a comment box in HTML and JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
