Html user comments form

Create Comment Box in HTML and JavaScript

This tutorial is about creating a comment box using a form, getting data from user input in HTML, and displaying it using JavaScript events and functions.

Create Comment Box in HTML and JavaScript

In order to get comment and other user data from input fields we can create input forms as a comment box using default html and elements. We can define ids to that element and get the data of the value property of that element using ids.

To collect user input values, we used an HTML form element. Using the type attribute, we can display input elements differently.

form>  input type="text" id="inputId" name="username">  form> 

If there is a need to insert long text or multiple line texts, the element is perfect for getting comments and reviews from the user. We can specify the size of the text area by providing the maximum rows and columns in it using and or using CSS.

A fixed-width text area can be used for unlimited characters. We can define id to it as well to get the value.

textarea id="elementId" name="inputName" rows="3" cols="40"> Default placeholder or any dummy text.  textarea> 

Now, let’s create a simple webpage in which we will use both input field elements to get data like full name, email and comment from the user and display it on-click of the button.

 html>  body>  h2>DelftStack learningh2>  h3>JavaScript comment box exampleh3>  form id="myForm">  Full name: input id="userName" type="text" name="fname">  br>br>  Email : input id="userEmail" type="text" name="email">  br>br>  textarea id ="userComment" rows="4" cols="50" name="comment"> Enter comment here. textarea>  br>br>  input type="button" onclick="myFunction()" value="Submit">  form>  h5>Submitted data :h5>  p id="data">p>  script>  function myFunction()  let data = ""; let name = document.getElementById("userName").value  let email = document.getElementById("userEmail").value  let comment = document.getElementById("userComment").value   data = "User name : "+name+"
User email : "+email+ "
User comment : "+comment   document.getElementById("data").innerHTML = data // display data to paragraph  >  script>  body>  html> 

In the above html source, we have used the paragraph form tag to create user input fields. In that tag, we have defined multiple input elements type of text to get the user name and email, and we have to define ids to that element.

In myFunction() we are getting all the user input values using document.getElementById(«id») and storing into variables. We used concatenations (+) to create a single string and displayed that string in a paragraph which is under the submitted data heading.

Related Article — JavaScript Element

Источник

Comment Box in HTML & CSS Code

This tutorial explains how to create a simple comment box input in HTML, CSS, and JavaScript. Basically, it is a frontend functionality (that can be handled in both jQuery and Vue JS) to quickly append a comment to the webpage. Further, it can be submitted to the server through JSON to publish a comment in real-time.

You can use this simple project for appending strings to the page in comment forms, to-do lists, or feedback forms in HTML. Similarly, you can use this technique in any web project to quickly append the text to the page. Before starting with coding I would suggest checking the demo page to check the comment form in action.

This comment form only appends the comment text to a specific div element without actually publishing it on the page. So, the entered text will be lost after refreshing the page. You have to submit (and store) the comment to the server for permanent.

Comment Box HTML Code

In HTML, create a section with an id «app» and place a textarea (for comment input) and p element for comment output.

The CSS Styles

After creating the HTML structure, now it’s time to style it using CSS. So, target the very first element «container» class and define its max-width of 640px. Similarly, define the background, margin, and padding properties as follows:

Now, target the «comment» class and display it as a block element. Likewise, specify min-height, border, and padding properties for commentClicked the class ad described below:

You can style the textarea/comment box according to your needs. Anyhow, the basic styles of the comment input are given below:

The «primaryContained» class defined the style for the comment submit button. Specify its background color, padding, box-shadow, and border-radius property as follows. You can set the custom color and font-size in order to customize it.

Target the button class with a hover pseudo-selector in order to define the hover styles. There you can set a different background color that will show on the hover event. You can also set the 3D button hover effect if you want to make a mindblowing hover effect for your comment form.

button.primaryContained:hover

The JavaScript for Displaying Comments

You can handle the comment string in both jQuery and Vue JS to submit and append the comment. So, load the jQuery and Vue JavaScript libraries by adding the following CDN link to your HTML page.

Finally, initialize the comment append function in the jQuery document ready function and done.

$(document).ready(function()< $(".primaryContained").on('click', function()< $(".comment").addClass("commentClicked"); >);//end click $("textarea").on('keyup.enter', function()< $(".comment").addClass("commentClicked"); >);//end keyup >);//End Function new Vue(< el: "#app", data:< title: 'Add a comment', newItem: '', item: [], >, methods: < addItem ()< this.item.push(this.newItem); this.newItem = ""; >> >);

Note: The example provided above about creating an HMTL comment box is required an action page to process the content of the comment box when the user clicks on submit button.

What’s an “Action Page”?

An “action page” in web development is a web page that processes the data submitted by the user through a form. In the context of the content you provided earlier, an action page would be the page that receives and processes the contents of the comment box after the user clicks the “Submit” button.

Typically, an action page would contain a server-side script, such as PHP or Python, that processes the form data and performs some action with it, such as saving it to a database or sending it in an email.

Add Comments the Easy Way

There are free scripts available online that can help you create an action page to process the contents of a comment box submitted by users on your website. However, creating an action page can be complex, so using a pre-made script can be a simpler solution.

One such solution is HTMLCommentBox.com, which provides an easy way to add a comments section to your website by copying and pasting code. However, to moderate comments, you’ll need to log in using a Google account.

The advantage of using a pre-made script like this is that it’s free and easy to use. But keep in mind that you may have less control over how the script handles user comments. You can customize the comments section to some extent, but the level of control may be limited.

Ultimately, the decision to create your own script or use a pre-made one is up to you. There are also other pre-made guestbook scripts available online that you could consider, such as those from Matt’s Script Archive or JsWidget.com.

That’s all! I hope you have successfully created a simple comment box using HTML, CSS, and JS. If you have any questions or suggestions, let me know by commenting below.

Muhammad Asif

Muhammad Asif is a Front End Developer and Editor Staff at Codeconvey.com. He enjoys experimenting with new CSS features and helping others learn about them.

Источник

Comment Box Code

You can use the following HTML code to create a comment box within your HTML document.

Example Comment Box Code:

The following comment box code consists of a form containing a small textarea (the comment box) and an input field (the submit button).

Note that the above code assumes that there’s an «action page» to process the contents of the form. In this example, html_form_tag_action.cfm (located in the /html/tags/ directory) is the server-side script that processes the form.

Color

Background Picture

You can also add a background image to your comment box.

Scrollbars

Customize the scrollbars (only works on WebKit browsers such as Chrome, Safari, and Opera).

Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.

Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.

Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.

Borders

Heck, while you’re at it, why not add a border too!

Send Email from your Comment Box!

You can use your comment box to create a feedback form that sends you an email every time someone clicks the submit button. All you need to do is change the value of the action attribute to a script that processes the form and sends you an email.

Here’s an example of what I mean. This page provides you with all the code you need to create a feedback form.

Further Details

This info aims to help you understand the above code, which consists mainly of HTML tags (or HTML elements).

The form tags contain other tags nested within them. These other tags define the actual form elements that appear within the form — such as the actual comment box (otherwise known as the «textarea»).

You can use the following template as a basis for your HTML comment box code. Simply fill in the blanks or remove uneeded attributes.

1. The Tag

For an explanation of all the attributes, see the HTML form tag specifications.

2. The Tag

This tag defines the comment box within the form.

For an explanation of all the attributes, see the HTML textarea tag specifications.

3. The Tag

This tag defines input fields within the form and can be used for defining the submit button of the comment box.

For an explanation of all the attributes, see the HTML input tag specifications.

Related

Источник