Forms are defined using the form element. All elements within form then belong to the form in question.
<form> ... </form>
The action attribute is expected in the introductory <form>. This is used to specify what should happen with the form data. This is usually a php application.
<form method="post" action="form.php"> ... </form>
Make sure that the specified file can actually be found. You must therefore set the correct path.
You can also enter an email address instead of a script.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> ... </form>
In this case, the form data is sent by email. Of course, this is not elegant, which is why the script variant is almost always used. However, if you don't have a script to hand, you can also send the form by e-mail if necessary.
Another important attribute for the form element is method. This is used to define the HTTP transmission method for sending the form content. Two different variants are available.
- post = The form data is transmitted to the specified address in two steps. First, the specified address is contacted by the browser. If this is successful, the form data is transferred to the script.
- get = With this method, the form data is appended to the end of the URL that was assigned to the action attribute. The form data can therefore also be seen in the address bar of the browser.
The question naturally arises as to which of these two variants should be used for sending the form data. In principle, you can use both. However, especially when it comes to large amounts of data and uploading files to the server, you should use post.
Simple form fields
So far, only the outer framework of the form has been defined. However, the form itself is not yet visible in the browser.
<form method="post" action="form.php"> ... </form>
Now it's time to fill the form with content/life.
The most frequently required field type is probably a single-line input field. These are used, for example, to query surnames, first names and email addresses. Single-line input fields are defined as follows:
<input type="text" name="firstname" />
The attribute-value combination type="text" is assigned to the input element. You should also give each input field an internal identifier. This identifier must be unique in the document. It is particularly interesting when it comes to processing the form data using a script. Do not use any spaces or special characters in the identifier.
If you look at the result in the browser, you will see the following picture:
The whole thing does not yet look particularly spectacular. But if you click into the text field, you will see that you can already make entries there.
So that visitors know what to enter in the field, a label is of course still missing.
First name: <input type="text" name="firstname" />
Here too, a look in the browser provides the desired result.
You can use the size attribute to determine the field width.
First name: <input type="text" name="firstname" size="30" /> <br /> Postcode: <input type="text" name="plz" size="5" />
The desired field width is assigned to the size attribute.
Here, 5 corresponds to exactly five characters. The maxlength attribute is also interesting in this context. This specifies the maximum number of characters that can be entered in the field. Here is another example:
First name: <input type="text" name="firstname" size="30" maxlength="40" />
If the value specified for maxlength is greater than the value specified for size, the field is automatically scrolled for longer entries.
You can use the value attribute to preset a field.
First name: <input type="text" name="firstname" value="Your name" />
The value assigned is to be seen as a field preallocation.
Users can delete this default value.
You can also prevent values from being deleted from fields. This involves defining an input field which is no longer an input field in the true sense of the word. In fact, such fields are often used for outputs. This could be interesting, for example, to display values determined by a script. Think of a calculator, for example. However, you can also manually pre-assign a field with a text that can no longer be changed by visitors. (Note: The euro sign is unfortunately not displayed correctly in the PDF view).
<input name="price" type="text" value="€ 699.-" readonly />
To set a field to read-only, assign it the readonly attribute. Again, take a look at the result:
The predefined text can be seen directly. However, it cannot be deleted.
Define password fields
You are of course familiar with password fields. Wherever you register, you have to enter a password. (Usually you even have to enter it twice).
The data entered in the input field is not visible, but is automatically replaced by the browser with asterisks/dots. The advantage of this variant is that people who may be looking over your shoulder when you enter your password cannot decrypt it. However, it is a misconception that password fields are automatically secure. In fact, with normal HTTP, passwords are transmitted in plain text when the form is sent.
Password fields are defined as follows:
<input type="password" name="password" />
The type attribute is assigned the value password. Again, take a look at the result.
If you type something there, it will be made unrecognizable by the browsers directly during input.
