header-logo

CODE WITH FAHIM

HTML Forms



An HTML form is a way to collect and submit data from users on a webpage. When you fill out things like search bars, login fields, contact forms, or sign-up pages, you are interacting with an HTML form.


Here’s what it does:


i.Collects user input: Forms allow users to type in text, select options, upload files, or choose items (like checkboxes or radio buttons).

ii.Sends data: Once submitted, the form sends the collected data to a server for processing. This could be to sign up for a website, post a comment, or make a purchase.


For example:

1. Login form: Collects your username and password, sends it to the server for verification.

2.Contact form: Lets you send a message to the website admin (name, email, message).

3.Search bar: Allows you to search for content on the site.


structure:

<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="username">

<input type="submit" value="Send">
</form>



Explanation of the tags:




⚙️ Form Attributes Summary:

action=> URL to send the form data to
method=> HTTP method: get or post
enctype=> Encoding type (e.g., multipart/form-data=> for file uploads)
target=> Where to open response (_self, _blank, etc.)
autocomplete=> Enable or disable browser auto-fill,



The required, minlength, and maxlength attributes enforce client-side validation.


Sample Form: Using All Types of <input> Elements=>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Form with All Input Types</title>
</head>
<body>

<h1>Sample Form</h1>
<form action="/submit" method="POST" enctype="multipart/form-data">

<!-- Text Input -->
<label for="text">Text Input (Name):</label>
<input type="text" id="text" name="name" placeholder="Enter your name" required>

<!-- Password Input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>

<!-- Email Input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>

<!-- Number Input -->
<label for="age">Age (Number):</label>
<input type="number" id="age" name="age" min="0" max="120" placeholder="Enter your age" required>

<!-- Date Input -->
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>

<!-- Time Input -->
<label for="appt">Appointment Time:</label>
<input type="time" id="appt" name="appt">

<!-- Color Input --> <label for="favcolor">Favorite Color:</label>
<input type="color" id="favcolor" name="favcolor">

<!-- File Input -->
<label for="file">Upload a File:</label>
<input type="file" id="file" name="file">

<!-- Radio Buttons -->
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<!-- Checkbox Input -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to Newsletter</label>

<!-- Dropdown Select Input -->
<label for="country">Select Country:</label>
<select id="country" name="country">
<option value="us">USA</option>
<option value="in">India</option>
<option value="ca">Canada</option>
<option value="bd">Bangladesh</option>
</select>

<!-- Textarea Input -->
<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Write your message here..."></textarea>

<!-- Range Input -->
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

<!-- Hidden Input -->
<input type="hidden" id="userID" name="userID" value="12345">

<!-- Submit Button -->
<input type="submit" value="Submit Form">
</form>


</body>
</html>




Output:

Sample Form

















Gender: