Scribd
Upload
8 views4 pages

Chapter 7 - Form Tag

Uploaded by

solographicdesigner.2002
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
8 views4 pages

Chapter 7 - Form Tag

Uploaded by

solographicdesigner.2002
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/ 4

Chapter 7: Form Tag

Form Tag: The <form> tag in HTML is used to create a form for user input. It serves as a container
for various form elements like text fields, checkboxes, radio buttons, submit buttons, and others. The
form tag defines how the form data is sent when submitted (usually to a server for processing).

Basic Structure of the <form> Tag:


<form action="submit_page.php" method="post">
<!-- Form elements go here -->
</form>

Common Attributes of <form>:


● action: Specifies the URL where the form data will be sent when the form is submitted.
○ Example: action="/submit-form"
● method: Specifies the HTTP method to be used when sending form data. Common values

S are:
○ GET: Data is sent in the URL.
○ POST: Data is sent in the request body (more secure).
○ Example: method="post"

HTML Form with All <input> Types:


IIC
<form action="/submit-form" method="post" enctype="multipart/form-data">

<!-- Text input -->


<label for="text">Text Input:</label>
<input type="text" id="text" name="text" placeholder="Enter text" maxlength="30" minlength="5"
required><br><br>

<!-- Password input -->


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

<!-- Email input -->


<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="[email protected]"
required><br><br>

<!-- URL input -->


<label for="url">Website:</label>
<input type="url" id="url" name="url" placeholder="https://example.com"><br><br>

<!-- Telephone input -->

INDIAN INSTITUTE OF COMPUTER SCIENCE 1


<label for="tel">Telephone:</label>
<input type="tel" id="tel" name="tel" placeholder="123-456-7890"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br><br>

<!-- Number input -->


<label for="number">Number:</label>
<input type="number" id="number" name="number" min="1" max="10" step="1"><br><br>

<!-- Date input -->


<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>

<!-- Time input -->


<label for="time">Time:</label>
<input type="time" id="time" name="time"><br><br>

<!-- Datetime-local input -->

S
<label for="datetime">Date and Time:</label>
<input type="datetime-local" id="datetime" name="datetime"><br><br>

<!-- Month input -->


<label for="month">Month:</label>
<input type="month" id="month" name="month"><br><br>
IIC
<!-- Week input -->
<label for="week">Week:</label>
<input type="week" id="week" name="week"><br><br>

<!-- Color input -->


<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color" value="#ff0000"><br><br>

<!-- File input -->


<label for="file">Upload File:</label>
<input type="file" id="file" name="file" accept=".jpg,.jpeg,.png,.pdf"><br><br>

<!-- Checkbox input -->


<label for="checkbox">Subscribe to newsletter:</label>
<input type="checkbox" id="checkbox" name="subscribe"><br><br>

<!-- Radio input -->


<label>Choose your 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>

INDIAN INSTITUTE OF COMPUTER SCIENCE 2


<!-- Range input -->
<label for="range">Choose a number (1-100):</label>
<input type="range" id="range" name="range" min="1" max="100"><br><br>

<!-- Hidden input -->


<input type="hidden" id="hidden" name="hidden_value" value="12345"><br><br>

<!-- Search input -->


<label for="search">Search:</label>
<input type="search" id="search" name="search" placeholder="Search..."><br><br>

<!-- Reset button -->


<input type="reset" value="Reset Form"><br><br>

<!-- Submit button -->


<input type="submit" value="Submit Form">

S
</form>

Explanation of <input> Types and Attributes:


1. Text Input (type="text"):
○ placeholder: Text shown when the field is empty.
IIC
○ maxlength/minlength: Limits the number of characters.
○ required: Makes the field mandatory.
2. Password Input (type="password"):
○ Masks the input to hide the entered value.
3. Email Input (type="email"):
○ Validates for a properly formatted email address.
4. URL Input (type="url"):
○ Requires a valid URL format.
5. Telephone Input (type="tel"):
○ Typically used for phone numbers, often combined with the pattern attribute.
6. Number Input (type="number"):
○ Allows numeric input with min, max, and step attributes.
7. Date, Time, Month, Week, and Datetime-local Inputs:
○ These types allow picking a date, time, or both.
8. Color Input (type="color"):
○ Displays a color picker.
9. File Input (type="file"):
○ Allows file upload. The accept attribute specifies file types.
10. Checkbox (type="checkbox"):
○ For selecting or deselecting options.
11. Radio (type="radio"):
○ Used for selecting one option out of a group.
12. Range Input (type="range"):

INDIAN INSTITUTE OF COMPUTER SCIENCE 3


○ Allows selecting a value from a range.
13. Hidden Input (type="hidden"):
○ Stores data that is not visible to the user but submitted with the form.
14. Search Input (type="search"):
○ A text input field designed for search queries.
15. Reset Button (type="reset"):
○ Resets all form fields to their initial values.
16. Submit Button (type="submit"):
○ Sends the form data to the server.

S
IIC

INDIAN INSTITUTE OF COMPUTER SCIENCE 4

You might also like