Forms in html represent one of the ways to enter and submit data. All form fields are placed between the <form> and </form> tags . For example, let’s create the simplest form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form In HTML5</title>
</head>
<body>
<form method="post" action="http://localhost:8080/formdata.php">
<input name="login" />
<input type="submit" value="Login" />
</form>
</body>
</html>
To customize forms, the form element has the following attributes:
method: sets the method for sending data to the server. Two values are allowed: post and get.
The value post allows data to be passed to the web server through special headers. And the value get allows you to pass data through the query string.
- action: sets the address to which the form data is sent
- enctype: sets the type of data to be transmitted. He, in turn, can take the following values:
- application/x-www-form-urlencoded: default encoding of sent data
- multipart/form-data: this encoding is applied when sending files
- text/plain: this encoding is applied when sending plain text information
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form In HTML5</title>
</head>
<body>
<form method="post" action="http://localhost:8080/formdata.php">
<input name="login" />
<input type="submit" value="Login" />
</form>
</body>
</html>
In the example used above:
the form has a “post” method, that is, all form values are sent in the request body, and the address is the string http://localhost:8080/formdata.php
The address is listed here at random.
As a rule, a web server runs at the specified address, which, using one of the server-side technologies (PHP, NodeJS, ASP.NET, etc.), can receive requests and return a response. In this case, we will not focus on server-side technologies, we will focus only on those HTML tools that allow you to send data to the server.
Autocompletion
Often, web browsers remember the input, and as you type, browsers can display a list of suggestions from previously entered words:
This may not always be convenient, and you can disable autocomplete using the autocomplete attribute :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form In HTML5</title>
</head>
<body>
<form method="post" action="http://localhost:8080/formdata.php" autocomplete="off">
<input name="login" />
<input type="submit" value="Login" />
</form>
</body>
</html>
If we need to enable auto-completion only for some specific fields, then we can apply the attribute to them autocomplete=”on”:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form In HTML5</title>
</head>
<body>
<form method="post" action="http://localhost:8080/formdata.php" autocomplete="on">
<input name="login" />
<input type="submit" value="Login" />
</form>
</body>
</html>
Now auto-completion will be disabled for the entire form, except for the second field.