Form Tag in Html

Form Tag in Html

·

4 min read

Welcome to "HTML Tags Made Simple!"

In this blog, we'll delve into the world of HTML (Hypertext Markup Language) and break down some common HTML tags, making web development easy to understand.

We'll explain the purpose of each tag and provide clear examples to get you started. Whether you're a beginner or looking for a quick reference, this blog is your go-to guide for HTML essentials.

Form Tag in Html

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

  • The HTML <form> element is used to create an HTML form for user input

  • The <form> element is a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, etc.

<form>
.
form elements
.
</form>

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

TypeDescription
<input type="text">Displays a single-line text input field
<input type="radio">Displays a radio button (for selecting one of many choices)
<input type="checkbox">Displays a checkbox (for selecting zero or more of many choices)
<input type="submit">Displays a submit button (for submitting the form)
<input type="button">Displays a clickable button

Text Fields

The <input type="text"> defines a single-line input field for text input.

Input type is easy understand user and easy understand in push data base and Easy Retrive the data

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

The <label> Element

  • The <label> tag defines a label for many form elements.

  • The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

  • The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

  • The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.\

  • The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form> 

</body>
</html>

Checkboxes

The <input type="checkbox"> defines a checkbox.

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

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

The Submit Button

  • The <input type="submit"> defines a button for submitting the form data to a form-handler.

  • The form-handler is typically a file on the server with a script for processing input data.

  • The form-handler is specified in the form's action attribute.

  • form also Submit Button <button> </button>

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <button>Sumbit</button>
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>

Definition and Usage

The <form> tag is used to create an HTML form for user input.

The <form> element can contain one or more of the following form elements:

Attributes

Did you find this article valuable?

Support Gokil P by becoming a sponsor. Any amount is appreciated!