HTML Form Attributes

⚙️ What are Form Attributes?

Form attributes control how forms work - where they send data, how they send it, and what happens when users interact with them.


<!-- Form with attributes -->
<form action="/submit" method="post">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

Essential Form Attributes

🎯

action

Where to send form data

<form action="/contact">

📤

method

How to send data (GET/POST)

<form method="post">

🎭

target

Where to display response

<form target="_blank">

📋

enctype

How to encode form data

<form enctype="multipart/form-data">

🔹 Action Attribute

The action attribute specifies where to send form data:

<!-- Send to a specific page -->
<form action="/process-form.php">
    <input type="text" name="name">
    <button type="submit">Submit</button>
</form>

<!-- Send to current page (default) -->
<form action="">
    <input type="text" name="search">
    <button type="submit">Search</button>
</form>

Action Examples:

action="/submit" - Send to /submit page
action="mailto:[email protected]" - Open email client
action="" - Send to current page

🔹 Method Attribute

The method attribute defines how to send data:

🔸 GET Method

<!-- GET - data appears in URL -->
<form action="/search" method="get">
    <input type="text" name="q" placeholder="Search...">
    <button type="submit">Search</button>
</form>
<!-- Result: /search?q=your+search+term -->

🔸 POST Method

<!-- POST - data sent privately -->
<form action="/login" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">Login</button>
</form>

When to use each:

GET: Search forms, filters, public data
POST: Login forms, sensitive data, file uploads

🔹 File Upload Form

For file uploads, use specific attributes:

<!-- File upload requires method="post" and enctype -->
<form action="/upload" method="post" enctype="multipart/form-data">
    <label for="file">Choose file:</label>
    <input type="file" id="file" name="upload">
    
    <label for="description">Description:</label>
    <input type="text" id="description" name="description">
    
    <button type="submit">Upload</button>
</form>

Output:

🔹 Target Attribute

Control where the form response appears:

<!-- Open in new tab -->
<form action="/external-site" target="_blank">
    <button type="submit">Open in New Tab</button>
</form>

<!-- Open in same window (default) -->
<form action="/same-page" target="_self">
    <button type="submit">Stay Here</button>
</form>