Labs ICT
Pro Login

Form Attributes

You have built a form, but how does the data actually get from the browser to your server? That is where form attributes come in. These attributes control where the data goes, how it is sent, and what happens after submission.

The Action Attribute

The action attribute tells the browser where to send the form data when the user hits submit. It is a URL — it can point to a server-side script, an API endpoint, or even another HTML page.


<form action="/submit-contact">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">Send</button>
</form>
    

The Method Attribute

The method attribute decides how the data is sent. GET appends the data to the URL as query parameters — great for search forms. POST sends the data in the request body — the standard choice for forms that create or update data.


<form action="/search" method="get">
  <input type="text" name="q" placeholder="Search...">
</form>

<form action="/register" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
</form>
    

Enctype: How Data Is Encoded

The enctype attribute controls how the form data is encoded before being sent. For normal text forms, the default works fine. But if you are uploading files, you need multipart/form-data — otherwise the file data gets lost.


<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
  <button type="submit">Upload</button>
</form>
    

Novalidate and Target

Add novalidate to a form to skip browser validation entirely — useful when you want to handle all validation with JavaScript. The target attribute works just like on links: _blank opens the response in a new tab, _self loads it in the current window.


<form action="/process" method="post" novalidate target="_blank">
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>