freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 7.1 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Understanding HTML forms

Inside this lesson

  • What a form does
  • The <form> element, action, and method
  • GET vs POST
  • Why every field needs a name

Short answer

An HTML form collects input from visitors, like an inquiry, an order, or a search. The <form> element wraps the fields. Its action says where to send the data and its method says how: GET for searches, POST for messages and orders. Each field needs a name, or its value is not sent.

What forms do

  • Contact and inquiry forms
  • Order and booking forms
  • Search boxes
  • Newsletter signups
  • Login pages

HTML builds the form. A server or form service receives and processes the data. HTML alone cannot send emails or save data.

The form element

<form action="/send-inquiry" method="post">
  <label for="name">Your name</label>
  <input type="text" id="name" name="customer_name">
  <button type="submit">Send inquiry</button>
</form>
  • action: the URL that receives the data.
  • method: get or post.
  • name: the label the server sees, like customer_name=Ana.

GET vs POST

GETPOST
Where data goesIn the URL: ?q=pili+tartsIn the request body, not the URL
Good forSearches and filtersMessages, orders, logins
Bookmarkable?YesNo
Safe for passwords?NoYes, with HTTPS

How submission works

  1. The visitor fills in the fields and clicks the submit button.
  2. The browser checks built-in rules, like required fields.
  3. The browser sends name and value pairs to the action URL.
  4. The server processes the data and returns a thank you page.

If you do not have a server, form services like Formspree, Netlify Forms, or Google Forms can receive submissions for you.

Try it: make a search form

Set method to get, give the input a name of q, and press the button. The preview is sandboxed, so the submit will not go anywhere. Check the code.

Live preview

Quick quiz

1. Which attribute says where form data goes?
2. Which method fits a search form?
3. A field without name is?
4. Can HTML alone send an email from a form?

Common mistakes

  • Missing name attributes. The server receives nothing for that field.
  • GET for private data. GET puts values in the URL, history, and logs.
  • Forms with no thank you message. Visitors are not sure their message was sent.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

<form>
The container for form controls.
action
The URL that receives form data.
method
How data is sent: get or post.
name attribute
The key sent with a field's value.
GET
Sends form data in the URL.
POST
Sends form data in the request body.

Questions beginners ask

Can I use a form on a static site?

Yes, with a form service like Formspree or Netlify Forms.

Is a Google Form an HTML form?

Google builds it with HTML, and you can embed it with an iframe.

What is form spam?

Bots submit junk. Services add spam filters and honeypot fields.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.