×

My First Form [1/18]

We use forms to send data from a web page to a web server that can process the data, i.e., register a user, post a message to a forum, send an E-mail, and so forth. We absolutely cannot get along without forms on the web.

To create a form, use the paired tag called <form>: all the fields of the form are contained within it. The <form> tag has two essential attributes:

  • action sets the address or URL to which the form data is submitted;

  • method specifies the method used to submit the form.

Here is an example:

<form action="https://echo.htmlacademy.org" method="get">
  form fields
 </form>

To submit a form, the get or post methods are usually used. If you omit the method attribute, the get method is used by default.

The get method sends the form data within the query string; it means that you can see them after the question mark in the browser address bar. For example:

https://www.google.com/search?q=htmlacademy

Use the get method in your search/query forms, as it allows you to get and deliver a link pointing to the results.

The post method sends the data in the HTTP message body; use it when you need to submit lots of data and you do not have to get a link to the processing results. This may be the case, for instance, when you edit a personal profile.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form Tag</title> </head> <body> <h1>Login Form</h1> <!-- Add your form here --> </body> </html>
CSS
h1 { font-size: 18px; }
HTML Academy
  1. Add a blank form onto a page
  2. Then, set the submit address: https://echo.htmlacademy.org
  3. and the data sending method, post.

After we have added a blank form, nothing has changed in the browser, but we are going to fix it in the next task.

Theory Check Next