HTML5_Quick_Reference_Guide_ipynb.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "HTML5 Quick Reference Guide. ipynb",
      "provenance": [],
      "collapsed_sections": [
        "LTVIub6BS9jN",
        "ttpOPpkCSPyk",
        "z-PyYFvTQEpy",
        "sKEy44QaPCdq",
        "B4iI_EEVNZac",
        "7UJ5AVNDQOft",
        "M_ljWrOeQ1Pr",
        "cgvLBWy5RS60",
        "v3fUYfjmvKzK"
      ],
      "toc_visible": true,
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/scholargj/SRET-INT200-JUNE2021/blob/master/HTML5_Quick_Reference_Guide_ipynb.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 34
        },
        "id": "On1oQTQdZmOI",
        "outputId": "1d623828-7222-4a10-b117-ac756f8e67be"
      },
      "source": [
        "import IPython\n",
        "\n",
        "js_code = \\\n",
        "'''\n",
        "let message = \"Hello world!\";\n",
        "document.querySelector(\"#output-area\").appendChild(document.createTextNode(message));\n",
        "'''\n",
        "\n",
        "display(IPython.display.Javascript(js_code))"
      ],
      "execution_count": 7,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "application/javascript": [
              "\n",
              "let message = \"Hello world!\";\n",
              "document.querySelector(\"#output-area\").appendChild(document.createTextNode(message));\n"
            ],
            "text/plain": [
              "<IPython.core.display.Javascript object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "7hvtCBUTOXgt"
      },
      "source": [
        "# Quick reference to HTML 5\n",
        "\n",
        "Authored by\n",
        "\n",
        "**Dr. Jayanthi G, SRET**\n",
        "\n",
        "\n",
        "**Contents**\n",
        "1. HTML Forms\n",
        "2. Input elements in HTML Form\n",
        "\n",
        "2.1 Text Fields \n",
        "\n",
        "2.2 Radio Buttons\n",
        "\n",
        "2.3 Check Boxes\n",
        "\n",
        "2.4 File select box\n",
        "\n",
        "2.5 Text Area\n",
        "\n",
        "2.6 Select Box\n",
        "\n",
        "2.7 Submit and Reset buttons\n",
        "\n",
        "2.8 Grouping Form controls\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "LTVIub6BS9jN"
      },
      "source": [
        "#**1. HTML FORMS**\n",
        "The `<form>` element is a container in HTML. It contains different types of input elements like text fields, checkboxes, radio buttons, submit buttons, etc.\n",
        "\n",
        "\n",
        "#Applications:\n",
        "\n",
        "HTML Forms are required to collect different kinds of user inputs, such as contact details like name, email address, phone numbers, or details like credit card information, etc.\n",
        "\n",
        "Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit buttons, etc. Users generally complete a form by modifying its controls e.g. entering text, selecting items, etc. and submitting this form to a web server for further processing."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "8tj1pCqqLbX5"
      },
      "source": [
        "The `<form> `tag is used to create an HTML form. Here's a simple example of a login form:"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 36
        },
        "id": "bMTnKqDTOUqZ",
        "outputId": "feea6f2a-495e-4485-8c23-f2b3ed4807d4"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<form>\n",
        "    <label>Username: <input type=\"text\"></label>\n",
        "    <label>Password: <input type=\"password\"></label>\n",
        "    <input type=\"submit\" value=\"Submit\">\n",
        "\n",
        "    \n",
        "</form>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))\n"
      ],
      "execution_count": 8,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<form>\n",
              "    <label>Username: <input type=\"text\"></label>\n",
              "    <label>Password: <input type=\"password\"></label>\n",
              "    <input type=\"submit\" value=\"Submit\">\n",
              "\n",
              "    \n",
              "</form>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "ttpOPpkCSPyk"
      },
      "source": [
        "#1.1 Elements of FORM Tag\n",
        "\n",
        "`<form>...</form>`\n",
        "\n",
        "The parent tag for an HTML form.\n",
        "\n",
        "`action=\"url\"`\n",
        "\n",
        "The URL listed here is where the form data will be submitted once user fills it.\n",
        "\n",
        "`method=\"\"`\n",
        "\n",
        "This specifies which HTTP method (POST or GET) would be used to submit the form.\n",
        "\n",
        "`enctype=\"\"`\n",
        "\n",
        "Only for POST method, this dictates the data encoding scheme to be used when form is submitted."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "iFhHctmszKW8"
      },
      "source": [
        "**autocomplete**\n",
        "\n",
        "Determines if the form has auto-complete enabled.\n",
        "\n",
        "**novalidate**\n",
        "\n",
        "Determines whether the form should be validated before submission.\n",
        "\n",
        "**accept-charsets**\n",
        "\n",
        "Determines character encodings when form is submitted.\n",
        "\n",
        "**target**\n",
        "\n",
        "After submission, the form response is displayed whenver this refers to, usually has the following values:\n",
        "_blank, _self, _parent, _top\n",
        "\n",
        "`<fieldset>....</fieldset>`\n",
        "identifies the group of all fields on the form.\n",
        "\n",
        "\n",
        "`<label>....</label>`\n",
        "This is used to label a field in the form.\n",
        "\n",
        "\n",
        "`<legend>....</legend>`\n",
        "\n",
        "This operates as a caption for the `<fieldset>`\n",
        "\n",
        "\n",
        "`<input/>`\n",
        "\n",
        "Used to take input from the user. Input type is determined by a number of attributes."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Zm7ToNGY08Z9"
      },
      "source": [
        "#1.2 Input Type Attributes\n",
        "`type=\"\"`\n",
        "Determines which type of input (text, dates, password) is requested from the user.\n",
        "\n",
        "`name=\"\"`\n",
        "name specifies the name of the input field.\n",
        "\n",
        "`value=\"\"`\n",
        "specifies the value contained currently in the input field.\n",
        "\n",
        "`size=\"\"`\n",
        "Determines the input element width (number of characters).\n",
        "\n",
        "`maxlength=\"\"`\n",
        "Specifies the most input field characters allowed.\n",
        "\n",
        "**required**\n",
        "Makes an input field compulsory to be filled by the user. The form cannot be submitted if a required field is left empty.\n",
        "\n",
        "**width=\"\"**\n",
        "Determines the width of the input element, in pixel values.\n",
        "\n",
        "\n",
        "**height=\"\"**\n",
        "Determines height of the input element.\n",
        "\n",
        "\n",
        "**placeholder=\"\"**\n",
        "Can be used to give hints to the user about the nature of the requested data.\n",
        "\n",
        "\n",
        "**pattern=\"\"**\n",
        "Speciifes a regular expression, which can be used to look for patterns in the user's text.\n",
        "\n",
        "\n",
        "**min=\"\"**\n",
        "The minimum value allowed for an `<input>` element.\n",
        "\n",
        "**max=\"\"**\n",
        "The maximum value allowed for an `<input>` element.\n",
        "\n",
        "**autofocus**\n",
        "forces focus on the input element when web page loads completely.\n",
        "\n",
        "**disabled**\n",
        "Disables the input element. User can no longer enter data.\n",
        "\n",
        "\n",
        "`<textarea>...</textarea>`\n",
        "For longer strings of input. Can be used to get multisentence text from the user.\n",
        "\n",
        "`<select>...</select>`\n",
        "This tag specifies a list of options which the user can choose from.\n",
        "\n",
        "\n",
        "\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "y9wEVoAa6kFm"
      },
      "source": [
        "#1.3 Select Attributes\n",
        "**name=\"\"**\n",
        "The name of a particular list of options.\n",
        "\n",
        "**size=\"\"** \n",
        "The total number of options given to the user.\n",
        "\n",
        "**multiple**\n",
        "states whether the user can choose multiple forms in the list.\n",
        "\n",
        "**required**\n",
        "Specifies whether choosing an options is necessary for form submission.\n",
        "\n",
        "**autofocus**\n",
        "Specifies that a drop down list automatically comes into fous after a page loads.\n",
        "\n",
        "`<option>...</option>`\n",
        "Tag for listing individual items in the list of options.\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Gvh02mPe5VXF"
      },
      "source": [
        "#1.4 Option Attributes\n",
        "\n",
        "value=\"\"\n",
        "The text will be visible to the user for any given option.\n",
        "\n",
        "**selected**\n",
        "Determines which option is selected by default when the form loads.\n",
        "\n",
        "`<button> ...</button>`\n",
        "Tag for creating a button for form submission."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "z-PyYFvTQEpy"
      },
      "source": [
        "#Example: Forms in HTML 5"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "bTKMHijOKWXG",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 197
        },
        "outputId": "854b5676-3595-4c35-a022-4369a19bed84"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<html>\n",
        "<body>\n",
        "<form action=\"form_submit.php\" method=\"post\">\n",
        "\t<fieldset>\n",
        "\t\t<legend>Bio:</legend>\n",
        "\t\tFirst Name:<br>\n",
        "\t\t<input type = \"text\" name =\"first name\"\n",
        "\t\tvalue = \"Jayanthi\" placeholder=\"Enter your first name\"><br>\n",
        "\t\tLast Name:<br>\n",
        "\t\t<input type = \"text\" name =\"first name\"\n",
        "\t\tvalue = \"Ganapathy\" placeholder=\"Enter your first name\"><br>\n",
        "\t\tHobbies:<br>\n",
        "\t\t<select>\n",
        "\t\t\t\t<option value=\"reading\"> Reading Books</option>\n",
        "\t\t\t\t<option value=\"Cooking\"> Cooking</option>\n",
        "\t\t\t\t<option value=\"Gardening\"> Gardening</option>\n",
        "\t\t</select>\n",
        "\t\t<textarea name=\"description\">\n",
        "\t\t</textarea>\n",
        "\t\t<input type = \"submit\" value =\"Submit\">\n",
        "\t<fieldset>\n",
        "</form>\n",
        "\n",
        "</body>\n",
        "\n",
        "</html>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": 9,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<html>\n",
              "<body>\n",
              "<form action=\"form_submit.php\" method=\"post\">\n",
              "\t<fieldset>\n",
              "\t\t<legend>Bio:</legend>\n",
              "\t\tFirst Name:<br>\n",
              "\t\t<input type = \"text\" name =\"first name\"\n",
              "\t\tvalue = \"Jayanthi\" placeholder=\"Enter your first name\"><br>\n",
              "\t\tLast Name:<br>\n",
              "\t\t<input type = \"text\" name =\"first name\"\n",
              "\t\tvalue = \"Ganapathy\" placeholder=\"Enter your first name\"><br>\n",
              "\t\tHobbies:<br>\n",
              "\t\t<select>\n",
              "\t\t\t\t<option value=\"reading\"> Reading Books</option>\n",
              "\t\t\t\t<option value=\"Cooking\"> Cooking</option>\n",
              "\t\t\t\t<option value=\"Gardening\"> Gardening</option>\n",
              "\t\t</select>\n",
              "\t\t<textarea name=\"description\">\n",
              "\t\t</textarea>\n",
              "\t\t<input type = \"submit\" value =\"Submit\">\n",
              "\t<fieldset>\n",
              "</form>\n",
              "\n",
              "</body>\n",
              "\n",
              "</html>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "yFDO3IHN6G4x"
      },
      "source": [
        "\n",
        "\n",
        "---\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "JrvN0ntoNcxm"
      },
      "source": [
        "#**2. Input Element in HTML Form**\n",
        "\n",
        "\n",
        "This is the most commonly used element within HTML forms.\n",
        "\n",
        "Forms allows the user to specify various types of user input fields, depending on the type attribute. \n",
        "\n",
        "An input element can be of type text field, password field, checkbox, radio button, submit button, reset button, file select box."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "bAAurUhB1oOE"
      },
      "source": [
        "# 2.1 Text Fields\n",
        "Text fields are one line areas that allow the user to input text.\n",
        "\n",
        "Single-line text input controls are created using an `<input>` element, whose type attribute has a value of text. Here's an example of a single-line text input used to take username:"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 36
        },
        "id": "9J-wORBT5Hne",
        "outputId": "63a95522-c29d-4468-b72a-05236517c2a3"
      },
      "source": [
        "  html_code = \\\n",
        "  '''\n",
        "  <form>\n",
        "      <label>Username: <input type=\"text\"></label>\n",
        "        \n",
        "  </form>\n",
        "  '''\n",
        "  display(IPython.display.HTML(html_code))\n"
      ],
      "execution_count": 10,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<form>\n",
              "    <label>Username: <input type=\"text\"></label>\n",
              "      \n",
              "</form>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "udrY9867Obza"
      },
      "source": [
        "#2.2 Radio Buttons\n",
        "\n",
        "Radio buttons allows the user select exactly one option from a pre-defined set of options. \n",
        "\n",
        "It is created using an `<input>` element whose type attribute has a value of radio.\n",
        "\n",
        "Applications of radio button is to collect information when there is more than one option for a field."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "6GNLoUir4GRo"
      },
      "source": [
        "#Example: Radio Button"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 37
        },
        "id": "lAOWUfUaLaSp",
        "outputId": "281afb03-de12-4cff-e164-7f5a923f48a6"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<form>\n",
        "    <input type=\"radio\" name=\"gender\" id=\"male\">\n",
        "    <label for=\"male\">Male</label>\n",
        "    <input type=\"radio\" name=\"gender\" id=\"female\">\n",
        "    <label for=\"female\">Female</label>\n",
        "\n",
        "    \n",
        "</form>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))\n"
      ],
      "execution_count": 11,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<form>\n",
              "    <input type=\"radio\" name=\"gender\" id=\"male\">\n",
              "    <label for=\"male\">Male</label>\n",
              "    <input type=\"radio\" name=\"gender\" id=\"female\">\n",
              "    <label for=\"female\">Female</label>\n",
              "\n",
              "    \n",
              "</form>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "StC5SOp1PZsx"
      },
      "source": [
        "#2.3 Checkboxes\n",
        "\n",
        "Checkboxes allows the user to select one or more option from a pre-defined set of options.\n",
        " It is created using an` <input> `element whose type attribute has a value of checkbox.\n",
        "\n",
        "Applications: Checkboxes can be used to collect information about user's hobbies:"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "B4iI_EEVNZac"
      },
      "source": [
        "#Example : Checkboxes"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 37
        },
        "id": "4ARGr5YbPsqA",
        "outputId": "2229529c-6c6f-46fe-8182-fdd872da9930"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<form>\n",
        "        <input type=\"checkbox\" name=\"sports\" id=\"soccer\">\n",
        "    <label for=\"soccer\">Soccer</label>\n",
        "    <input type=\"checkbox\" name=\"sports\" id=\"cricket\">\n",
        "    <label for=\"cricket\">Cricket</label>\n",
        "    <input type=\"checkbox\" name=\"sports\" id=\"baseball\">\n",
        "    <label for=\"baseball\">Baseball</label>\n",
        "\n",
        "    \n",
        "\n",
        "</form>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))\n"
      ],
      "execution_count": 12,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<form>\n",
              "        <input type=\"checkbox\" name=\"sports\" id=\"soccer\">\n",
              "    <label for=\"soccer\">Soccer</label>\n",
              "    <input type=\"checkbox\" name=\"sports\" id=\"cricket\">\n",
              "    <label for=\"cricket\">Cricket</label>\n",
              "    <input type=\"checkbox\" name=\"sports\" id=\"baseball\">\n",
              "    <label for=\"baseball\">Baseball</label>\n",
              "\n",
              "    \n",
              "\n",
              "</form>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "7UJ5AVNDQOft"
      },
      "source": [
        "#2.4 File Select Box\n",
        "\n",
        "The file fields allow a user to browse for a local file and send it as an attachment with the form data. \n",
        "\n",
        "Web browsers such as IE, Google Chrome, and Firefox render a file select input field with a Browse button that enables the user to navigate the local hard drive and select a file.\n",
        "\n",
        "This is also created using an `<input>` element, whose type attribute value is set to file."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "2c10nKoGOfRq",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 40
        },
        "outputId": "c0adeb94-1089-42ce-b4bc-2a8ddb06ac60"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<form>\n",
        "    <label for=\"file-select\">Upload:</label>\n",
        "    <input type=\"file\" name=\"upload\" id=\"file-select\">\n",
        "\n",
        "\n",
        "    \n",
        "\n",
        "</form>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))\n"
      ],
      "execution_count": 13,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<form>\n",
              "    <label for=\"file-select\">Upload:</label>\n",
              "    <input type=\"file\" name=\"upload\" id=\"file-select\">\n",
              "\n",
              "\n",
              "    \n",
              "\n",
              "</form>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "M_ljWrOeQ1Pr"
      },
      "source": [
        "#2.5 Text Area\n",
        "\n",
        "Textarea is a multiple-line text input control that allows a user to enter more than one line of text. \n",
        "Multi-line text input controls are created using an `<textarea>` element.\n",
        "\n"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "isfxaz4aQ12N",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 72
        },
        "outputId": "ef9093ca-e61f-443d-b7f3-b2f189d36baf"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<form>\n",
        "       <label for=\"address\">Address:</label>\n",
        "    <textarea rows=\"3\" cols=\"30\" name=\"address\" id=\"address\"></textarea>\n",
        "\n",
        "</form>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": 14,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<form>\n",
              "       <label for=\"address\">Address:</label>\n",
              "    <textarea rows=\"3\" cols=\"30\" name=\"address\" id=\"address\"></textarea>\n",
              "\n",
              "</form>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "cgvLBWy5RS60"
      },
      "source": [
        "#2.6 Select Boxes\n",
        "\n",
        "A select box is a dropdown list of options that allows user to select one or more option from a pull-down list of options. \n",
        "\n",
        "Select box is created using the `<select>` element and `<option>` element.\n",
        "\n",
        "The `<option> `elements within the `<select> `element define each list item."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "UanlyDZaRSoP",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 36
        },
        "outputId": "b7d5919f-be15-4550-98d7-fb6d33204cad"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<form>\n",
        "       <label for=\"city\">City:</label>\n",
        "    <select name=\"city\" id=\"city\">\n",
        "        <option value=\"TN\">Tamil Nadu</option>\n",
        "        <option value=\"AP\">Andhra Pradesh</option>\n",
        "        <option value=\"KN\">Karnataka</option>\n",
        "    </select>\n",
        "</form>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": 15,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<form>\n",
              "       <label for=\"city\">City:</label>\n",
              "    <select name=\"city\" id=\"city\">\n",
              "        <option value=\"TN\">Tamil Nadu</option>\n",
              "        <option value=\"AP\">Andhra Pradesh</option>\n",
              "        <option value=\"KN\">Karnataka</option>\n",
              "    </select>\n",
              "</form>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "YCz4rmZ4T1ea"
      },
      "source": [
        "#2.7 Submit and Reset Buttons\n",
        "\n",
        "A submit button is used to send the form data to a web server. When submit button is clicked the form data is sent to the file specified in the form's action attribute to process the submitted data.\n",
        "\n",
        "A reset button resets all the forms control to default values. Try out the following example by typing your name in the text field, and click on submit button to see it in action."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "7FdTuzYFT1yb",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 36
        },
        "outputId": "1e2a21a9-b035-4ec0-a79c-176890dfb0a7"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<form action=\"action.php\" method=\"post\">\n",
        "    <label for=\"first-name\">First Name:</label>\n",
        "    <input type=\"text\" name=\"first-name\" id=\"first-name\">\n",
        "    <input type=\"submit\" value=\"Submit\">\n",
        "    <input type=\"reset\" value=\"Reset\">\n",
        "</form>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": 16,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<form action=\"action.php\" method=\"post\">\n",
              "    <label for=\"first-name\">First Name:</label>\n",
              "    <input type=\"text\" name=\"first-name\" id=\"first-name\">\n",
              "    <input type=\"submit\" value=\"Submit\">\n",
              "    <input type=\"reset\" value=\"Reset\">\n",
              "</form>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "v3fUYfjmvKzK"
      },
      "source": [
        "#2.8 Grouping Form Controls\n",
        "\n",
        "\n",
        "The `<legend>` element is used to group logically related controls and labels within a web form using  element. \n",
        "\n",
        "Grouping form controls into categories makes it easier for users to locate a control which makes the form more user-friendly. "
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 69
        },
        "id": "35qbrAyfvJIU",
        "outputId": "446e8137-b48f-4fd5-f051-68382263b521"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<form>\n",
        "    <fieldset>\n",
        "        <legend>Contact Details</legend>\n",
        "        <label>Email Address: <input type=\"email\" name=\"email\"></label>\n",
        "        <label>Phone Number: <input type=\"text\" name=\"phone\"></label>\n",
        "    </fieldset>\n",
        "</form>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": 17,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<form>\n",
              "    <fieldset>\n",
              "        <legend>Contact Details</legend>\n",
              "        <label>Email Address: <input type=\"email\" name=\"email\"></label>\n",
              "        <label>Phone Number: <input type=\"text\" name=\"phone\"></label>\n",
              "    </fieldset>\n",
              "</form>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    }
  ]
}