Summary  
This chapter introduces the markup structure and attributes needed to create and style interactive HTML form elements for capturing user input.

General domain of usage  
Web development (user interaction on web pages)

Forms are the backbone of user interaction on web pages. They allow users to share information, engage with content, and complete essential actions, like purchases or searches, turning static websites into dynamic experiences.

This course will focus on the form markup. By the end, you'll confidently create functional forms that enhance user interaction.

Here's a quick example of a simple form in action:

<html lang="en">
  <head>
    <style>
      .border-container {
        border-radius: 10px;
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f5f5f5;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }

      .form1 {
        width: 400px;
        background-color: #fff;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .title1 {
        font-size: 24px;
        color: #333;
        margin-bottom: 20px;
        border-bottom: 2px solid #ff8a00;
        padding-bottom: 5px;
      }

      .label1 {
        font-size: 16px;
        color: #666;
        display: block;
        margin-top: 20px;
      }

      .input1 {
        width: 340px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .input1:focus,
      .input1:hover {
        outline: none;
        border-color: #ff8a00;
        box-shadow: 0 0 5px rgba(255, 138, 0, 0.5);
      }

      .input1[type="submit"] {
        background-color: #ff8a00;
        color: #fff;
        border: none;
        cursor: pointer;
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 4px;
        transition: background-color 0.3s ease;
        width: 100px;
        display: block;
        margin: 30px auto 0 auto;
      }

      .input1[type="submit"]:hover {
        background-color: #d27204;
      }
    </style>
    <link
      href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&amp;family=Montserrat:wght@400;500;600;700&amp;family=Play:wght@400;700&amp;family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;family=Ubuntu+Mono&amp;family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&amp;family=Inter:wght@400;500;600;700&amp;display=swap"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 18px;
        font-weight: 400;
        box-sizing: border-box;
        vertical-align: baseline;
      }
      body {
        font-family: "Hind Siliguri", sans-serif;
        line-height: 1;
        height: 100%;
        overflow: hidden;
      }
      img {
        display: block;
        width: 100%;
        max-width: 550px;
        margin: 0 auto;
      }
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body class="body1" style="padding: 1.5px 0">
    <div class="border-container">
      <form class="form1" onsubmit="return false">
        <h3 class="title1">Primary Contact</h3>
        <label class="label1" for="name">First Name</label>
        <input class="input1" type="text" />
        <label class="label1" for="sirname">Last Name</label>
        <input class="input1" type="text" id="sirname" />
        <label class="label1" for="phone">Phone Number</label>
        <input class="input1" type="tel" id="phone" />
        <label class="label1" for="mail">Email</label>
        <input class="input1" type="email" id="mail" />
        <input class="input1" type="submit" value="Submit" />
      </form>
    </div>
  </body>
</html>


Forms like this empower users to connect and interact with your website. Let's dive into functional forms!

> Note
>
> This course focuses on markup creation and formatting form elements. By the end, you'll know how to enable user interaction and engagement.
>
> However, processing the data submitted through forms - such as storing it in a database or using server-side languages like JavaScript (Node.js), Python, PHP, or Go - is not covered in this course.

What is the main purpose of forms on web pages?

Learn the essentials of HTML, the backbone of every website. Structure content with tags and attributes, build clear document layouts, and add images, links, and tables. Create accessible, user-friendly forms for capturing input and interaction. Practice crafting well-structured, functional web pages while following best practices. Start your web development journey by mastering HTML.

Explore the inner workings of the web. Learn how data travels across networks, discover the role of protocols, and unravel the mysteries of IP addresses and domain names. Gain a high-level understanding of how web browsers and servers communicate to deliver web content.

Discover the power of tags to structure content, from headings and paragraphs to lists and tables. Learn how to enhance the elements with attributes.

The core of HTML document structure. Learn the components of an HTML document, including the doctype declaration, head, and body. Understand the purpose of each element and how they contribute to the overall structure of a webpage.

Make a web page more appealing with the help of media such as images, audio, and video. Work with structured tabular data in the form of tables.

Explore the versatility of HTML forms. Learn to design intuitive and user-friendly forms by leveraging key concepts and techniques. Discover how forms enable user interaction and data submission on websites. 

Introduction to HTML Forms

Awesome!

Introduction to HTML Forms