Form Tag in Html with example

  • The HTML <form> tag is used to create a container for various types of user input fields within a web page. It’s a fundamental element when it comes to collecting and submitting data from users. Here’s an explanation of its main attributes and purpose:
  1. action attribute: This attribute specifies the URL where the form data will be sent when the user submits the form. It’s usually an address where the server-side script or program responsible for processing the form resides. For example: action="/submit_form"

2. method attribute: This attribute specifies the HTTP method to be used when sending the form data to the server. The two most common methods are:

  • GET: Appends the form data to the URL as query parameters. Typically used for simple queries or retrieving data.
  • POST:Sends the form data in the body of the HTTP request. Typically used for submitting data that modifies the server’s state, like sending data to be stored in a database.

3. Other attributes: You can also use various attributes to customize and define behaviors of the form:

  • id attribute: Provides a unique identifier for the form, which can be useful for styling or JavaScript interaction.
  • name attribute: Assigns a name to the form, which can be referenced in scripts or server-side code.
  • enctype attribute: Specifies the encoding type for the data when sending files. Common values include multipart/form-data for file uploads.
  • autocomplete attribute: Controls whether the browser should remember and suggest previously entered values for form fields.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up Form</title>
</head>
<body>

<h2>Sign Up</h2>

<form action="/register" method="post" id="signupForm">

<label for="username">Username:</label>
 <input type="text" id="username"
name="username" required><br><br>
    
<label for="email">Email:</label>
 <input type="email" id="email" name="email" required><br><br>
    
<label for="password">Password:</label>
 <input type="password" id="password" name="password" required><br><br>
    
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password" required><br><br>
    
 <label>Gender:</label>
 <input type="radio" id="male" name="gender" value="male">
    
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
    
<input type="checkbox" id="terms" name="terms" required>
    
<label for="terms">I agree to the Terms of Service</label><br><br>
    
<input type="submit" value="Sign Up">
</form>
</body>
</html>

Result

Leave a comment