Froms

Estimated reading: 1 minute 90 views

HTML Forms

				
					
<h2>HTML Forms</h2>

<form action="/action_page.php">
  <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>
  <input type="submit" value="Submit">
</form>

let's break down the HTML form structure and explain each element, attribute, and type of input:

				
					<form action="/submit_form.php" method="post">

<!--<form>: This element defines the start of the form. It is used to collect user input.-->
<!--action="/submit_form.php": The action attribute specifies the URL where the form data will be submitted when the form is submitted.-->
<!--method="post": The method attribute specifies the HTTP method to be used when submitting the form. In this case, it's set to post, which means the form data will be sent to the server in the body of the HTTP request.-->

				
					<label for="username">Username:</label>
<input type="text" id="username" name="username" required>


<!--<label>: This element defines a label for an <input> element. It helps in associating a text label with an input field.-->
<!--for="username": The for attribute specifies which input element the label is associated with. It matches the id of the input element.-->
<!--<input>: This element is used to create various types of input fields.-->
<!--type="text": The type attribute specifies the type of input field. In this case, it's set to text for accepting text input.-->
<!--id="username": The id attribute uniquely identifies the input element. It is used in conjunction with the for attribute of the <label> element.-->
<!--name="username": The name attribute specifies the name of the input field. It is used to identify the input field's value when the form is submitted.-->
<!--required: The required attribute specifies that the input field must be filled out before submitting the form.-->

				
					<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<!--Similar to the username field, this input field is for entering passwords. The type attribute is set to password, which hides the characters entered.-->

				
					<label for="email">Email:</label>
<input type="email" id="email" name="email" required>


<!--This input field is for entering email addresses. The type attribute is set to email, which provides validation for email addresses.-->

				
					<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100" required>


<!--This input field is for entering numeric values, specifically for age. The type attribute is set to number, which provides validation for numeric input.-->
<!--min="18" and max="100": These attributes specify the minimum and maximum allowed values for the input field, respectively.-->

				
					<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
    <option value="">Select</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
</select>


<!--This input field is for selecting a gender from a dropdown list. The <select> element creates a dropdown list.-->
<!--<option>: These elements define the options within the dropdown list.-->
<!--The required attribute specifies that a selection must be made before submitting the form.-->

				
					<label for="agree">I agree to the terms and conditions:</label>
<input type="checkbox" id="agree" name="agree" required>


<!--This input field is for accepting terms and conditions. The type attribute is set to checkbox.-->
<!--The required attribute specifies that the checkbox must be checked before submitting the form.-->

				
					<button type="submit">Submit</button>


<!--<button>: This element creates a button that can be used to submit the form.-->
<!--type="submit": The type attribute specifies the type of button, in this case, it's a submit button which submits the form when clicked.-->
<!--The text within the <button> element ("Submit") is the label displayed on the button.-->