Scribd
Upload
15 views6 pages

HTML Form Tag

The <form> tag in HTML is used to create forms for collecting user input, which can include various elements like text fields, checkboxes, and buttons. Key attributes include 'action' for the server URL and 'method' for data transmission type (GET or POST). Forms can be enhanced with attributes for validation and styled with CSS, while JavaScript can be used for added functionality.

Uploaded by

sameermadabhavi232
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views6 pages

HTML Form Tag

The <form> tag in HTML is used to create forms for collecting user input, which can include various elements like text fields, checkboxes, and buttons. Key attributes include 'action' for the server URL and 'method' for data transmission type (GET or POST). Forms can be enhanced with attributes for validation and styled with CSS, while JavaScript can be used for added functionality.

Uploaded by

sameermadabhavi232
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML <form> Tag – Notes & Explanation

The <form> tag in HTML is used to create a form that collects user input. Forms contain
input fields, buttons, checkboxes, dropdowns, and other elements to gather data from
users. The collected data is then sent to a server for processing.

1. Syntax of <form> Tag

<form action=”submit.php” method=”post”>

<label for=”name”>Name:</label>

<input type=”text” id=”name” name=”name”>

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

</form>

Action → Specifies where to send form data (server URL).

Method → Defines how to send data (GET for URL parameters, POST for secure
transmission).

2. Attributes of <form>

Action: Specifies the URL where the form data should be sent.
Method: Defines the HTTP method (GET for URL submission, POST for secure data
transmission).

Target: Specifies where to display the response (_self, _blank, _parent, _top).

Autocomplete: Enables or disables autofill (on allows browser suggestions, off prevents
autofill).

Novalidate: Disables browser validation when submitting the form.

3. Form Elements with Examples

1. Text Input (<input type=”text”>)

Used for entering single-line text such as a name or username.

<input type=”text” name=”username” placeholder=”Enter your name”>

2. Password Input (<input type=”password”>)

Masks the entered characters to keep passwords secure.

<input type=”password” name=”password” placeholder=”Enter password”>


3. Email Input (<input type=”email”>)

Accepts only valid email formats and provides automatic validation.

<input type=”email” name=”email” placeholder=”Enter your email”>

4. Number Input (<input type=”number”>)

Restricts input to numeric values only.

<input type=”number” name=”age” min=”1” max=”100”>

5. Radio Buttons (<input type=”radio”>)

Allows users to select only one option from a group.

<input type=”radio” name=”gender” value=”male”> Male

<input type=”radio” name=”gender” value=”female”> Female

6. Checkbox (<input type=”checkbox”>)

Allows users to select multiple options from a list.

<input type=”checkbox” name=”subscribe” value=”yes”> Subscribe to newsletter


7. Dropdown (<select> and <option>)

Creates a list of selectable options.

<select name=”country”>

<option value=”us”>USA</option>

<option value=”uk”>UK</option>

</select>

8. Text Area (<textarea>)

Allows users to enter multiple lines of text.

<textarea name=”message” rows=”4” cols=”30”>Enter your message...</textarea>

9. Buttons (<button> and <input type=”submit”>)

Used to submit, reset, or trigger actions within the form.

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

<button type=”reset”>Reset</button>
4. Example of a Complete Form

<form action=”submit.php” method=”post”>

<label for=”username”>Username:</label>

<input type=”text” id=”username” name=”username” required>

<label for=”email”>Email:</label>

<input type=”email” id=”email” name=”email” required>

<label>Gender:</label>

<input type=”radio” name=”gender” value=”male”> Male

<input type=”radio” name=”gender” value=”female”> Female

<label for=”comments”>Comments:</label>

<textarea id=”comments” name=”comments” rows=”4”></textarea>

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

</form>

5. Key Notes on <form> Tag

Forms are essential for collecting user input and sending it to a server.

The action attribute defines the processing script or API endpoint.


The method attribute specifies how the data is transmitted (POST for security, GET for
queries).

Form elements like text fields, checkboxes, and buttons allow different types of data
collection.

Using required, maxlength, and pattern attributes can enhance validation and user
experience.

Forms can be styled using CSS and enhanced with JavaScript for better functionality.

You might also like