HTML Form and related tags

In this class we learnt the base of HTML forms

The <form></form> tag in HTML is used to handle forms.
- The action attribute in form is used to mention where the form will be submitted.
- The method attribute in form indicates how the form submission will be handled. It can be GET, POST i.e. the kinds of requests you can send to backend.
- Example - The fomrs in search engine use get request. For example the submission form on google looks like below -
```
<form action="/search" autocomplete="off" method="GET" role="search">...</form>
```
Here you can see the form is being submitted to “/search” i.e. “https://www.google.com/search” (This is an use of relative URL).

The method being used here is “GET”. The form being submitted with GET method makes the form submission result show up in the URL. That is the very reason why you will see
In form we can have quite a few HTML elements which make the forms functional the first of them is the <input /> element.
- One of the important attribute of input element is type. This sets the type of the input this can be text, number, email, password and many more.
- The name attribute of input elements assign a name by which the value is shown when a form is submitted.
- Another attribute of input element is required which indicates that the form field needs to be filled before submitting the form.
- Another attribute is placeholder which shows a text which is shown when the input is empty.
- Radio and checkboxes use their name attribute to group the inputs.
- There are other attributes in input please see MDN Documentation for more details.
All elements in HTML have two attributes id and class. While id needs to be unique for each element, one class can be assigned to many elements, and many classes to one element.
The <label></label> element is used to assign a label to an element. The for attribute of of <label></label> contains the id of the input element it represents. Having this for attribute makes the label interactive, focusing on the corresponding input element.

In this class we learnt a few more HTML tags used for input in forms

Select and option

The <select></select> and <option></option> tags work together in tandum to give us a dropdown for selection.

Example -

<select name="continent" id="continent" required>
    <option selected disabled hidden>Select your choice</option>
    <option value="africa">Africa</option>
    <option value="asia">Asia</option>
    <option value="europe">Europe</option>
    <option value="north-america">North America</option>
    <option value="south-america">South America</option>
    <option value="australia">Australia</option>
</select>

There are a few important attributes to the option tag -

value attribute indicates the value of the option
selected attribute denotes the option selected by default
hidden attribute hides any option
disabled attribute makes an option non selectable

Textarea

As seen before, textarea is a longer input field which can be used for longer text, especially for text with formatting and line breaks.

<textarea name="message" id="message" placeholder="Enter your message here..."></textarea>

Other lesser used input tags

<input type="date"> can be used for a date picker.
- You can use the attributes min and max to set the lower and upper bound of the date using the yyyy-mm-dd format
<input type="datetime"> can be used to give a datetime picker.
- You can use the attributes min and max to set the lower and upper bound of the date using the yyyy-mm-ddTHH:mm format (with 24 hours time format)
<input type="color"> gives us a color picker which returns the value of color in hex format.
- When URLencoded the # symbol is represented by %23 because the # symbol in URL indicates navigation by ID
<input type="range" name="range" id="range" min="0" max="5" step="0.5" value="4"> Can be used to give us a slider with range.
- The min and max values indicate the limits of the slider.
- The step attribute indicates the increments with each slide.
- The value attribute states the initial value from the slider.
<input type="file"> can be used to upload documents to a website.
- The accept attribute can be used to tell what to accept in the file input.
<input type="submit"> and <button type="submit"></button> can be used to submit a form. The only difference is where <input type="submit"> can only display the text set at its value attribute, whereas<button type="submit"></button> can have any HTML tag inside it so you can have an image as a button.
<input type="reset"> and <button type="reset"></button> can be used to reset a form i.e set the form fields to their starting values. The only difference is where <input type="reset"> can only display the text set at its value attribute, whereas<button type="reset"></button> can have any HTML tag inside it so you can have an image as a button.
There are a few more input and form related tags which you can read from MDN

Code from the class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>More about forms</title>
</head>
<body>
    <form action="" method="get">
        <label for="name">Select your continent</label>
        <select name="continent" id="continent" required>
            <option selected disabled hidden>Select your choice</option>
            <option value="africa">Africa</option>
            <option value="asia">Asia</option>
            <option value="europe">Europe</option>
            <option value="north-america">North America</option>
            <option value="south-america">South America</option>
            <option value="australia">Australia</option>
        </select>
        <textarea name="message" id="message" placeholder="Enter your message here..."></textarea>
        <input type="date" id="date" name="date" min="2024-01-01" max="2025-08-18">
        <input type="time" id="time" name="time">
        <input type="datetime-local" id="datetime" name="datetime">
        <input type="range" name="range" id="range" min="0" max="5" step="0.5" value="4">
        <div id="rangevalue"></div>
        <input type="color" name="color" id="color">
        
        <input type="file" name="picture" id="picture" accept="document/word">
        
        <input type="submit" value="Submit">
        <input type="reset" value="reset">
        
        
        <button type="reset">Reset</button>

    </form>
    <a href="#section2">Go to Section 2</a>
    <div id="section1" style="height: 100vh">
        <h2>Form Data</h2>
        <p id="formData"></p>
    </div>
    <div id="section2" style="height: 100vh; background-color: red;">
        <h2>Form Data</h2>
        <p id="formData"></p>
    </div>
    <script>
        document.getElementById("range").addEventListener("input", function() {
            document.getElementById("rangevalue").innerText = this.value;
        });
    </script>
</body>
</html>