Comment input type in html

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

Источник

HTML Input Types

This chapter describes the different types for the HTML element.

HTML Input Types

Here are the different input types you can use in HTML:

Tip: The default value of the type attribute is «text».

Input Type Text

defines a single-line text input field:

Example

This is how the HTML code above will be displayed in a browser:

Input Type Password

defines a password field:

Example

This is how the HTML code above will be displayed in a browser:

The characters in a password field are masked (shown as asterisks or circles).

Input Type Submit

defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form’s action attribute:

Example

This is how the HTML code above will be displayed in a browser:

If you omit the submit button’s value attribute, the button will get a default text:

Example

Input Type Reset

defines a reset button that will reset all form values to their default values:

Example

This is how the HTML code above will be displayed in a browser:

If you change the input values and then click the «Reset» button, the form-data will be reset to the default values.

Input Type Radio

defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example

Choose your favorite Web language:

This is how the HTML code above will be displayed in a browser:

Input Type Checkbox

defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

Input Type Button

defines a button:

Example

This is how the HTML code above will be displayed in a browser:

Input Type Color

The is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

Example

Input Type Date

The is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example

You can also use the min and max attributes to add restrictions to dates:

Example

Input Type Datetime-local

The specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

Example

Input Type Email

The is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and add «.com» to the keyboard to match email input.

Example

Input Type Image

The defines an image as a submit button.

The path to the image is specified in the src attribute.

Example

Input Type File

The defines a file-select field and a «Browse» button for file uploads.

Example

Input Type Hidden

The defines a hidden input field (not visible to a user).

A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is submitted.

Note: While the value is not displayed to the user in the page’s content, it is visible (and can be edited) using any browser’s developer tools or «View Source» functionality. Do not use hidden inputs as a form of security!

Example

Input Type Month

The allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

Example

Input Type Number

The defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

Example

Input Restrictions

Here is a list of some common input restrictions:

Attribute	Description
checked	Specifies that an input field should be pre-selected when the page loads (for type=»checkbox» or type=»radio»)
disabled	Specifies that an input field should be disabled
max	Specifies the maximum value for an input field
maxlength	Specifies the maximum number of character for an input field
min	Specifies the minimum value for an input field
pattern	Specifies a regular expression to check the input value against
readonly	Specifies that an input field is read only (cannot be changed)
required	Specifies that an input field is required (must be filled out)
size	Specifies the width (in characters) of an input field
step	Specifies the legal number intervals for an input field
value	Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:

Example

Input Type Range

The defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min , max , and step attributes:

Example

Input Type Search

The is used for search fields (a search field behaves like a regular text field).

Example

Input Type Tel

The is used for input fields that should contain a telephone number.

Example

Input Type Time

The allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

Example

Input Type Url

The is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds «.com» to the keyboard to match url input.

Example

Input Type Week

The allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Источник

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

Источник