HTML from Scratch: HTML Forms. Lesson #18 Overcod.net

HTML from Scratch: HTML Forms. Lesson #18

HTML forms are one of the most important elements in web development, as they allow for interaction with the user and the collection of data that can then be submitted to the server for processing.

Where and How Forms Are Used

Forms are used on almost every interactive website:

Registration and Authorization: Fields for entering login, password, and email.
Contact Forms: Collecting the user’s name, email, and message.
Online Stores: Cart, checkout process, entering payment details and shipping address.
Search: Field for entering a search query.
Surveys and Quizzes: Collecting answers to questions with various multiple-choice options.
File Uploads: Allow the user to select and submit a file to the server.

Basic Tags for Forms

All form elements must be enclosed within the <form> tag.

Tag	Purpose
`<form>`	Defines an HTML form. The container for all form controls.
`<input>`	The most common tag for input fields. Its type is specified by the `type` attribute.
`<label>`	Creates a caption (label) for a form element, improving accessibility.
`<textarea>`	Defines a multi-line text input field (for large amounts of text).
`<select>`	Creates a dropdown list.
`<option>`	Defines an option (item) in the `<select>` dropdown list.
`<button>`	Defines a clickable button.
`<fieldset>`	Groups related elements in a form.
`<legend>`	Defines a title for a group of elements inside `<fieldset>`.

Important `<form>` Tag Attributes

Attribute	Values	Description
`action`	URL Address	Required: Specifies the address of the server-side script where the form data will be sent after the “Submit” button is pressed.
`method`	`GET`, `POST`	Defines the HTTP method for sending data: `GET` (data is passed in the URL, for search) or `POST` (data in the request body, for registration, passwords). Default: `GET`.
`name`	text	Unique name of the form (for referencing via JavaScript).
`autocomplete`	`on`, `off`	Enables/disables browser auto-filling of fields.
`enctype`	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`	The encoding type for data submission. `multipart/form-data` is used when uploading files.

Basic `<input>` Field Types (`type` Attribute)

The <input> tag is versatile; its functionality is determined by the type attribute.

type	Description
`text`	A standard single-line text field. (Default if `type` is not specified)
`password`	Field for a password (characters are obscured).
`submit`	A button to submit the form.
`reset`	A button to clear (reset) all form fields.
`button`	A regular clickable button (often used with JavaScript).
`checkbox`	Checkbox (multiple options can be selected).
`radio`	Radio button (only one from a group can be selected).
`email`	Field for entering an email address (includes format validation).
`number`	Field for entering numbers (with optional `min` and `max` limits).
`file`	Button to select a file for upload.
`hidden`	A hidden field (not displayed, used for passing technical data).

Important `<input>` Field Attributes

Attribute	Purpose
`name`	Required: The name of the field, used on the server to identify the received data.
`value`	The default value of the field, or the value that will be sent to the server (for `checkbox`, `radio`).
`placeholder`	Hint inside an empty input field.
`required`	Makes the field mandatory to fill out before submission.
`disabled`	Makes the field inactive (cannot be edited and is not submitted).
`checked`	Used for `checkbox` and `radio` to mark it as selected by default.

Form Code Example

Let’s create a simple contact form using the tags and attributes discussed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lesson 18: HTML Forms</title>
</head>
<body>

    <h2>Contact Form</h2>

    <form action="/submit-form" method="POST"> 
        
        <fieldset>
            <legend>Personal Details</legend>
            
            <div>
                <label for="user_name">Your Name:</label><br>
                <input type="text" id="user_name" name="user_name" placeholder="John Doe" required>
            </div>
            <br>
            
            <div>
                <label for="user_email">Email:</label><br>
                <input type="email" id="user_email" name="user_email" placeholder="example@domain.com" required>
            </div>
            <br>

            <div>
                <label for="user_pass">Password:</label><br>
                <input type="password" id="user_pass" name="user_pass" minlength="8" required>
            </div>
            <br>
        </fieldset>

        <div>
            <label for="message_topic">Message Topic:</label><br>
            <select id="message_topic" name="message_topic" required>
                <option value="" disabled selected>-- Select a topic --</option>
                <option value="question">Product Question</option>
                <option value="support">Technical Support</option>
                <option value="suggestion">Suggestion</option>
            </select>
        </div>
        <br>

        <div>
            <label for="message_text">Your Message:</label><br>
            <textarea id="message_text" name="message_text" rows="5" cols="40" placeholder="Enter your message here..." required></textarea>
        </div>
        <br>
        
        <div>
            <input type="checkbox" id="agreement" name="agreement" required>
            <label for="agreement">I agree to the data processing terms</label>
        </div>
        <br>

        <div>
            <input type="submit" value="Submit Form">
            <input type="reset" value="Clear">
        </div>

    </form>

</body>
</html>

This was the basis for working with HTML forms. Mastering these elements is a crucial step in creating interactive web pages.

ADDITIONAL MATERIAL — extra HTML form fields and attributes

Extra `<input>` types

Special input fields

File upload

Color picker

Date picker

Local date and time

Month picker

Time picker

Week selector

Number input

Range slider

Search field

Telephone input

URL input