HTML Forms
HTML forms are used to gather user input on a web page. They provide a way for users to interact with a web page and submit data to a server for processing.
A basic HTML form is made up of form elements, including text fields, radio buttons, checkboxes, and more. These elements are placed within a <form> tag and are usually accompanied by a <label> tag to provide a descriptive text for the form element.
Here is an example of a basic HTML form:
<form>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
<input type=”submit” value=”Submit”>
</form>
In this example, the form contains two text fields: one for the user’s name and one for their email address. The form also includes a submit button that the user can click to submit their information.
The <input> elements have a type attribute that defines the type of form element they represent (text, email, etc.). They also have an id attribute that can be used to uniquely identify the element and a name attribute that will be used to identify the data when it is submitted to the server.
The <label> elements have a for attribute that is associated with the id of the corresponding form element, providing a descriptive text for the element.
Once the form is submitted, the data is sent to the server for processing. The server can then store the data in a database, send an email, or perform some other action with the submitted information.
For Regular Off – Campus Job, Updates :- Click Here
There are many different form elements that can be used in HTML forms, including:
<input>: This is the most basic form element and is used to create text fields, checkboxes, radio buttons, and more. The type of form element created depends on the value of thetypeattribute (e.g. “text”, “radio”, “checkbox”).<textarea>: This element creates a multi-line text field where the user can enter multiple lines of text.<select>: This element creates a drop-down list of options that the user can select from.<option>: This element defines an option within a<select>element.<label>: This element provides a descriptive text for a form element.<fieldset>: This element groups related form elements together and can be used to create a visually distinct section of a form.<legend>: This element provides a title for a<fieldset>element.<button>: This element creates a button that can be used to submit the form or trigger other actions.<output>: This element is used to display the results of a calculation or form calculation.
Here is an example that demonstrates the use of some of these form elements:
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<label for="gender">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>
</fieldset>
<br>
<fieldset>
<legend>Hobbies</legend>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
<label for="traveling">Traveling</label>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">Sports</label>
</fieldset>
<br>
<fieldset>
<legend>Message</legend>
<textarea id="message" name="message"></textarea>
</fieldset>
<br>
<input type="submit" value="Submit">
</form>
In this example, the form contains several fieldsets, each with its own legend, that group related form elements together. The form includes text fields, radio buttons, checkboxes, and a textarea for a message. The form also includes a submit button that the user can click to submit the form data.
NEXT Topic
