Elements of a form Tag

Input from the user is collected using form. It can be utilized for a variety of purposes, including website registration, login, profile creation, etc. There are many different kinds of information that can be gathered from a form. The backend manages the form data. We can utilize a variety of form elements, such as text fields, text areas, drop-down lists, choose boxes, radio buttons, etc.

Syntax

Following is the syntax for <form> tag in HTML

<form action="" method="">
   // different form element used of user wish
</form>

HTML <input> element

The foundational form element in HTML is the <input> element. It is used to construct form fields and collect user input. We can use several input fields to obtain various pieces of information from users.

Syntax

Following is the syntax for HTML <input> element

<form>
   <input type=" …. " name="….">
</form>

Example

Following is an example where we are going to use the <input> element and create a user input field.

<!DOCTYPE html>
<html>
<body style="background-color:#D2B4DE;">
   <form style="text-align:center;"> Enter E-Mail: <input type="text" name="e-mail">
   </form>
</body>
</html>

On running the above program, the output window will pop up, displaying the user input field to allow the user to enter input on the webpage.

HTML <label> element

It is used to specify the label for the field that we defined. When the user makes an effort to concentrate on the input element, it is helpful. We use the <label> element with the input element, if the ‘for’ attribute of the label element is equal to the ‘id’ attribute of the input element.

Syntax

Following is the syntax for HTML <label> element

<form>
   <label>……</label>
</form>

Example

In the following example we are going to create the simple sig-in form.

<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6;">
   <form>
      <label for="uname">UserName: </label>
      <input type="text" id="uname" name="uname">
      <br/>
      <label for="password">Password: </label>
      <input type="password" id="password" name="password">
   </form>
</body>
</html>

When the above code gets executed, it will generate an output consisting of the simple webpage displayed on the webpage.

HTML <select> element

It’s employed to produce a drop-down menu. Users are able to choose as many options as they wish. When we use this element to construct a drop-down list, the attribute’s behavior can be altered depending on the circumstances. Let’s have a look at such attributes.

Syntax

Following is the syntax for HTML <select> element

<form>
   <select>
      <option>…</option>
   </select>
</form>

Example

Considering the following example, where we are going to use the <select> element with no attributes

<!DOCTYPE html>
<html>
<body>
   <form style="text-align:center;"> Choose The Car: 
      <select>
         <option>RS7</option>
         <option>AUDI</option>
         <option>BMW</option>
      </select>
   </form>
</body>
</html>

HTML <button> element

This is done to provide a clickable button. It has one attribute, the ‘type’ attribute. This attribute is used to provide the button that will be used on the page depending on the circumstance. The button’s default styling in various browsers may vary.

Syntax

Following is the syntax for HTML <button> element

<form>
   <button>….</button>
</form>

Example

Following is an example where we are going to create a clickable button on the webpage using the <button> element.

<!DOCTYPE html>
<html>
<body>
   <h2 style="color:#6C3483;">Clickable Button</h2>
   <button type="submit">Click</button>
</body>
</html>

On running the above code, the output window will pop up, displaying the click button on the webpage.

Related Posts

What are custom events in JavaScript?

Custom events are the events that allow you to decouple the code you want to run after a specific piece of code runs. There are various in-built events…

How to use nested for loop in JavaScript?

We use the for loop statement of JavaScript for repeating a set of statements inside the loop body a specified number of times. A nested for loop, as the…

What are the basic rules for JavaScript parameters?

A JavaScript function is a code that performs a particular task. The function parameters are the name list in the function definition. Parameters are also known as…

How to stop refreshing the page on submit in JavaScript?

Using event.preventDefault() to stop page refresh on form submit In this section, we will see how to use event.preventDefault() to stop page refresh on form submission. The event.preventDefault() restricts the default…

Target a Window Using JavaScript or HTML

TARGET attribute of HTML A link’s opening named frame or window is specified using the Target attribute of the <a> anchor tag. The concluding </a> tag in…

What is the role of deferred scripts in JavaScript?

Since JavaScript is a loosely typed language, you are not required to correctly predict the kind of data that will be kept in a variable. Depending on the information…