HTML Forms

In ancient Egypt, scribes recorded data on papyri - names, numbers, information about grain deliveries. HTML forms are the modern equivalent of a scribe's papyrus! They are a key tool for collecting information from website users. You can think of them as an interactive interface through which users enter data, which can then be processed, for example, by a server and saved in a database. Forms are essential for many activities, such as logging into a service, registering a new account, or sending messages.

Below we present the basic elements used when creating forms:

<form>: This is the tag that wraps the entire form. All form elements are typically contained within this tag.

<input>: This is the most versatile form element. It allows users to enter various types of data - from text, to checking options, to submitting the form. The type of data the user can enter depends on the type attribute of this element.

1<input type="text" name="username" placeholder="Enter your username">
2    

<textarea>: This element allows entering larger amounts of text. It's an ideal place for longer comments or opinions.

1<textarea id="comment" name="comment" rows="4" cols="50" placeholder="Enter your comment here..." required></textarea>

<select> and <option>: The <select> tag allows creating a dropdown list from which the user can choose one or more options. These options are defined by <option> elements placed inside <select>.

1<select name="choose">
2<option value="option1">Option 1</option>
3<option value="option2">Option 2</option>
4</select>

<button>: Allows creating buttons with various functions - they can be used to submit a form, reset entered data, or trigger a specific JavaScript function.

1<button type="submit">Click me!</button>

<label>: This is an element that allows adding a description to other form elements, such as <input>. It's extremely important for the user to understand what data should be entered in a given field.

1<label for="email">E-mail:</label>
2<input type="email" id="email" name="email_adres">

When creating a form, various attributes are often used to identify, label, and fill in default values for individual form fields. Example attributes include name, id, value, and placeholder.

Using the above elements and attributes, we can create forms of varying complexity that will adequately respond to the needs of our users.

Creating a Simple Form

A basic form starts with the <form> tag, which specifies where the data should be sent, using the action and method attributes.

1<form action="/submit" method="post">
2  <!-- Form fields -->
3</form>

Text Input Fields

Text input fields are used to collect small amounts of textual information from the user. They are created using the <input> tag.

1<label for="username">Username:</label>
2<input type="text" id="username" name="username">

Passwords

For entering passwords, the password type is used, which causes the entered characters to be hidden.

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

Drop-down List

A <select> drop-down list lets the user pick one of the prepared <option> choices.

1<label for="monument">Choose a monument:</label>
2<select id="monument" name="monument">
3  <option value="pyramids">Pyramids of Giza</option>
4  <option value="sphinx">Great Sphinx</option>
5</select>

Handling File Uploads

Forms can also handle file uploads, allowing users to send documents, photos, etc.

1<label for="file">Choose a file:</label>
2<input type="file" id="file" name="file">

Submit Button

To allow the user to submit the form, you need to add a submit button.

1<input type="submit" value="Submit">

Here's an example HTML form that contains various form elements:

1<form>
2  <label for="name">Name:</label>
3  <input type="text" id="name" name="name">
4
5  <label for="email">Email:</label>
6  <input type="email" id="email" name="email">
7
8  <label for="password">Password:</label>
9  <input type="password" id="password" name="password">
10
11  <label for="age">Age:</label>
12  <input type="number" id="age" name="age" min="0" max="120">
13
14  <label for="gender">Gender:</label>
15  <select id="gender" name="gender">
16    <option value="">Choose</option>
17    <option value="female">Female</option>
18    <option value="male">Male</option>
19    <option value="other">Other</option>
20  </select>
21
22  <label for="newsletter">Subscribe to newsletter:</label>
23  <input type="checkbox" id="newsletter" name="newsletter">
24
25  <label for="message">Message:</label>
26  <textarea id="message" name="message"></textarea>
27
28  <button type="submit">Submit</button>
29  <button type="reset">Clear</button>
30</form>

1<form>
2<label for="name">First name:</label>
3<input type="text" id="name" name="name" placeholder="Enter your name" required>
4
5<label for="email">E-mail:</label>
6<input type="email" id="email" name="email" placeholder="Enter your email address" required>
7
8<label for="password">Password:</label>
9<input type="password" id="password" name="password" placeholder="Enter your password" required>
10
11<label for="age">Age:</label>
12<input type="number" id="age" name="age" min="0" max="120">
13
14<label for="gender">Gender:</label>
15<select id="gender" name="gender">
16<option value="">Choose</option>
17<option value="female">Female</option>
18<option value="male">Male</option>
19<option value="other">Other</option>
20</select>
21
22<label for="newsletter">Subscribe to newsletter:</label>
23<input type="checkbox" id="newsletter" name="newsletter">
24
25<label for="message">Message:</label>
26<textarea id="message" name="message" placeholder="Enter your message"></textarea>
27
28<button type="submit">Submit</button>
29<button type="reset">Clear</button>
30</form>

This example form includes various form elements, such as <input>, <select>, <textarea>, and <button>. The user can enter their name, email address, password, age, gender, decide whether to subscribe to the newsletter, and type a message. After filling out the form, the user can submit it by clicking the "Submit" button or clear the form by clicking the "Clear" button.

Practical Applications of Forms

HTML forms are used everywhere on the internet - from simple contact forms, through registration and login, to advanced payment systems. Mastering form creation is a key skill for every web developer.

Exercise: Creating HTML Forms

In this exercise, you'll learn to create HTML forms, which are a key tool for collecting information from website users. Your task will be to create a web page containing a registration form.

Step 1: Create the Basic HTML Document Structure

First, create a new HTML file and add the basic HTML document structure.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Registration Form</title>
7</head>
8<body>
9    <main>
10        <!-- Place your form here -->
11    </main>
12</body>
13</html>

Step 2: Add an HTML Form

Now add a form inside the <main> element. Start by defining the form and basic text fields.

1<form action="/submit" method="post">
2    <label for="name">Name:</label>
3    <input type="text" id="name" name="name">
4
5    <label for="email">Email:</label>
6    <input type="email" id="email" name="email">
7
8    <label for="password">Password:</label>
9    <input type="password" id="password" name="password">
10</form>

Step 3: Add Additional Form Fields

Expand the form with additional fields, such as number, gender selection, newsletter subscription checkbox, and a textarea for messages.

1<form action="/submit" method="post">
2    <label for="name">Name:</label>
3    <input type="text" id="name" name="name">
4
5    <label for="email">Email:</label>
6    <input type="email" id="email" name="email">
7
8    <label for="password">Password:</label>
9    <input type="password" id="password" name="password">
10
11    <label for="age">Age:</label>
12    <input type="number" id="age" name="age" min="0" max="120">
13
14    <label for="gender">Gender:</label>
15    <select id="gender" name="gender">
16        <option value="">Choose</option>
17        <option value="female">Female</option>
18        <option value="male">Male</option>
19        <option value="other">Other</option>
20    </select>
21
22    <label for="newsletter">Subscribe to newsletter:</label>
23    <input type="checkbox" id="newsletter" name="newsletter">
24
25    <label for="message">Message:</label>
26    <textarea id="message" name="message"></textarea>
27</form>

Step 4: Add Buttons to the Form

Add buttons to submit and reset the form.

1<form action="/submit" method="post">
2    <label for="name">Name:</label>
3    <input type="text" id="name" name="name">
4
5    <label for="email">Email:</label>
6    <input type="email" id="email" name="email">
7
8    <label for="password">Password:</label>
9    <input type="password" id="password" name="password">
10
11    <label for="age">Age:</label>
12    <input type="number" id="age" name="age" min="0" max="120">
13
14    <label for="gender">Gender:</label>
15    <select id="gender" name="gender">
16        <option value="">Choose</option>
17        <option value="female">Female</option>
18        <option value="male">Male</option>
19        <option value="other">Other</option>
20    </select>
21
22    <label for="newsletter">Subscribe to newsletter:</label>
23    <input type="checkbox" id="newsletter" name="newsletter">
24
25    <label for="message">Message:</label>
26    <textarea id="message" name="message"></textarea>
27
28    <button type="submit">Submit</button>
29    <button type="reset">Clear</button>
30</form>

Result

After completing all steps, your HTML file should look like this:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Registration Form</title>
7</head>
8<body>
9    <main>
10        <form action="/submit" method="post">
11            <label for="name">Name:</label>
12            <input type="text" id="name" name="name">
13
14            <label for="email">Email:</label>
15            <input type="email" id="email" name="email">
16
17            <label for="password">Password:</label>
18            <input type="password" id="password" name="password">
19
20            <label for="age">Age:</label>
21            <input type="number" id="age" name="age" min="0" max="120">
22
23            <label for="gender">Gender:</label>
24            <select id="gender" name="gender">
25                <option value="">Choose</option>
26                <option value="female">Female</option>
27                <option value="male">Male</option>
28                <option value="other">Other</option>
29            </select>
30
31            <label for="newsletter">Subscribe to newsletter:</label>
32            <input type="checkbox" id="newsletter" name="newsletter">
33
34            <label for="message">Message:</label>
35            <textarea id="message" name="message"></textarea>
36
37            <button type="submit">Submit</button>
38            <button type="reset">Clear</button>
39        </form>
40    </main>
41</body>
42</html>

Now you have a complete web page with a registration form. You can experiment further by adding more fields, changing attributes, or styling elements with CSS to improve the form's appearance.