Forms are made up of a certain number of input elements. All input elements are placed between tags <form>and </form>
The most common input element is the input element . However, the actual effect of this element depends on what value is set on its type attribute . And it can take the following values:
- text : a plain text field
- password : also a text field, only asterisks are displayed instead of the entered characters, so it is mainly used to enter a password
- email : field for entering an email address
- radio : radio button or radio button. Only one radio button can be selected from a group
- checkbox : a checkbox element that can be in a checked or unchecked state
- hidden : hidden field
- color : the color input field
- date : field for entering date
- datetime : field for entering the date and time, taking into account the time zone
- url : field for entering url address
- file : field for selecting the file to be uploaded
- datetime-local : field for entering date and time without regard to time zone
- month : field for entering the year and month
- number : field for entering numbers
- range : slider to select a number from a certain range
- tel : field for entering phone number
- time : field for entering time
- week : field for entering the year and week
- image : creates a button as an image
- submit : the submit button of the form
In addition to the input element in various modifications, there is a small set of elements that can also be used on the form:
- button : creates a button
- select : dropdown list
- label : creates a label that appears next to the input field
- textarea : multi-line text field
Name and value attributes
All input elements can have the name and attributes set value. These attributes are essential. By the attribute name we can identify the input field, and the attribute value allows us to set the value of the input field. For example:
<!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 ELEMENTS In HTML5</title>
</head>
<body>
<form method="get" action="index.php">
<input type="text" name="username" value="Hanberg" />
<input type="password" name="password" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Here the text field has the value “Hanberg” (as specified in the value attribute), so when the web page loads, we will see this text in this field.
Since the method for submitting form data is the “get” method, the data will be sent via the query string. Since in this case it is not important for us how the data will be received, the server that receives the data is not important, so I set the same page as the address – that is, the elements.html file. And when submitting, we will be able to see the entered data in the query string:
In the query string, we are interested in the following piece:
?username=Hanberg&password=1234123
When the form is submitted, the browser concatenates all the data into a set of key-value pairs. In our case, there are two such pairs: username=Hanberg and password=123123. The key in these pairs is the name of the input field, which is determined by the attribute name, and the value is the actual value that is entered in the input field (or the value of the attribute value).
Having received this data, the server can easily find out what values in which input fields were entered by the user.