NSI Rocks !

HTML Forms

HTML Forms

HTML forms allow users to enter data and send it to the server. They are very common on websites, for example to register, log in, or submit comments.

To create a form, we use the <form> tag. This tag contains different elements that allow collecting information, called "form elements" (or "inputs"). Here's a simple example:

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

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <button type="submit">Submit</button>
</form>

In this example:

  • The <form> tag has an action attribute that defines the URL where the form data will be sent, and a method attribute that specifies the HTTP method (here, post).
  • <input type="text"> is used to create a text area for the user to enter their username.
  • <input type="password"> creates an area for the password that hides the entered text.
  • <button type="submit"> allows submitting the form.

GET and POST methods

HTML forms can use two main methods to send data: GET and POST.

GET Method

The GET method is used when we want to retrieve a resource, and it sends form data by adding it to the URL as query parameters. This means the data is visible in the URL, making this method suitable for non-sensitive requests, for example a search on a site.

Example:

<form action="/search" method="get">
  <label for="query">Search:</label>
  <input type="text" id="query" name="q">
  <button type="submit">Search</button>
</form>

In this example, when the user submits the form, the URL will look like something like /search?q=entered_value. The GET method is convenient for actions that have no persistent effect on the server, like consulting information.

https://docs.gitlab.com/ee/api/topics.html
https://forge.apps.education.fr/api/v4/topics
https://docs.gitlab.com/ee/api/projects.html#list-all-projects
https://forge.apps.education.fr/api/v4/projects?topic=NSI

POST Method

The POST method is used to send data to the server, often when this data needs to be processed or stored (for example when creating an account). The data is not added to the URL but is sent in the request body, making it safer than GET for sensitive information.

Example:

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

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <button type="submit">Submit</button>
</form>

In this example, data is sent in the request body, which is more secure, especially for confidential information like passwords.

Different types of input

<input> elements can have different types, specified by the type attribute, like text, password, email, number, etc. Each input type allows collecting a particular type of data (for example, type="email" is used to enter an email address).

To discover all available input types and their particularities, I invite you to consult the MDN documentation: Input types on MDN.