Forms and Data Safety

One-sentence summary

A form is the part of a web page where a user types information and sends it; in this lesson we learn to build an accessible form and the rules for keeping the information people enter safe.

Why does it matter?

You meet forms every day on the internet: a search box, a login screen, a survey, a comment field. Building a form correctly makes a page usable for everyone, and it helps you understand where the information you type actually goes.

This lesson teaches two things at once. The first is how forms are written. The second, and more important, is why personal information must be handled with care. Learning to code a form also means learning which information to share and which to keep to yourself.

Important: This academy has no real form and collects no personal information from you. Every example here is only for learning and sends data nowhere.

The basic parts of a form

A form is the HTML section where a user enters information and usually sends it somewhere. A few core tags make up a form.

The form tag

All form fields go inside the form tag. This tag marks which fields belong together and are sent together.

<form>
  <!-- Form fields go here -->
</form>

Attributes such as action and method say where and how the information is sent. In this lesson we leave them out on purpose, because we send no data at all.

label and input

An input is the box where a user types text or makes a choice. A label is the text that explains what that box is for. These two should always be used together.

<label for="nickname">Your nickname:</label>
<input type="text" id="nickname" name="nickname">

The link here matters: the for value in the label must be the same as the id value in the input. Because of this link, clicking the label selects the box, and screen readers read the field's name correctly.

input types

The type attribute decides what kind of information the box expects. A few common types:

<input type="text">      <!-- plain text -->
<input type="number">    <!-- a number -->
<input type="checkbox">  <!-- a tick box -->
<input type="password">  <!-- hidden text -->

Text in a password field is hidden behind dots, so someone next to you cannot read it. But remember: looking hidden does not mean it travels safely. We will explain this in the safety section.

The button tag

A button is the control a user clicks to send the form or start an action.

<button type="submit">Send</button>

Simple validation and submitting

Required fields with required

Validation means checking that a user has entered correct and complete information. The simplest validation is the required attribute. When you add it to a field, the form cannot be sent while that field is empty.

<label for="colour">Your favourite colour:</label>
<input type="text" id="colour" name="colour" required>

The browser warns the user automatically when this field is empty. This reduces mistakes and gives us a simple check without writing extra code.

The idea of submitting a form

When a form is submitted, the values of its fields are gathered and sent to the address given by action. In other words, the information you typed leaves your computer and goes to another computer (a server).

This is the moment to stop and think: once information is sent, it is no longer under your control. So before filling in any form, you should always ask, "Who is this information going to?"

Safety note

For this lesson, safety matters as much as the code. Try to understand the rules below rather than only memorising them.

Do not share personal information

Personal information is anything that identifies you or helps someone find you: your full name, home address, phone number, school, date of birth, photo. Before typing any of this into a form online, always ask an adult first.

• Use a nickname instead of your real name.
• Do not type your address, phone number or school.
• Do not enter any information on sites you do not know.

What is HTTPS?

If the address in the bar starts with https://, the information between your browser and the site is encrypted, meaning no one on the way can read it. If it only says http://, that protection is missing.

https://example-site.com   ->  encrypted, safer
http://example-site.com    ->  not encrypted, be careful

HTTPS shows that the information is protected on the way, but it does not show that the person receiving it is trustworthy. You need both.

Password fields

Never share a password with a friend, or with a site you do not know, even if it appears in a form. A strong password is long and hard to guess. Keep your passwords safe with the help of an adult.

This academy and your safety

Let us say it again: DorukVatansever.com collects no personal information from you. The forms here are only examples and send data nowhere. Our goal is to teach code, not to gather information.

Mini practice

Below is a small, accessible example form that does not submit anything. A user can enter a nickname and a favourite colour. No personal information is asked for, and no data is sent.

<form>
  <label for="nickname">Your nickname:</label>
  <input type="text" id="nickname" name="nickname" required>

  <label for="colour">Your favourite colour:</label>
  <input type="text" id="colour" name="colour">

  <button type="button" id="greet">Say hello</button>
</form>

<p id="message"></p>

Now let us add a small behaviour to the button with addEventListener, which you know from the DOM lesson. This code sends the information nowhere; it only shows it on the page.

const button = document.getElementById("greet");
const output = document.getElementById("message");

button.addEventListener("click", () => {
  const name = document.getElementById("nickname").value;
  output.textContent = "Hello, " + name + "!";
});

Tasks to try:

1. Add required to the colour field too and try sending it while empty.
2. Show the colour in the message as well.
3. Try type="number" instead of type="text" and observe what changes.

Common mistakes

Forgetting the label–input link

If the for in the label is not the same as the id in the input, the link is broken. People using a screen reader cannot tell what the field is.

<!-- Wrong: for and id are different -->
<label for="name">Name:</label>
<input type="text" id="username">

Leaving a button without a type

If you do not set a type on a button inside a form, the browser treats it as submit, and the page may reload unexpectedly. Give action buttons type="button".

Asking for personal information

Even in a practice form, do not ask for a real name, address or phone number. Always use a nickname in examples.

Not checking for HTTPS

A common mistake is not checking that the address starts with https:// before entering information. Do not type information into an unencrypted connection.

Lesson summary

• A form is where a user enters and sends information; form, label, input and button are its core parts.
• A label and an input are linked by the same for and id value, and this link is needed for accessibility.
• The required attribute is a simple validation that stops a field from being left empty.
• Submitted information leaves your computer, so it matters who it goes to.
• Do not share personal information, check for an HTTPS connection, and remember this academy collects no real data.

Check questions

1. What must the for value in a label match?
2. What does the required attribute do?
3. What does an address starting with https:// provide?
4. Why is it wrong to type your real home address into an example form?
5. If you leave out type="button" on a button, what does the browser assume?

Answers

1. It must match the id value of the input in the same form; this link makes clicking and screen readers work correctly.
2. It makes the field required; the form cannot be sent while the field is empty, and the browser warns the user.
3. It encrypts the information between your browser and the site, so no one on the way can read it.
4. Sent information leaves your control, an address is personal information, and it should not be shared with places you do not know. Besides, this academy collects no data anyway.
5. If no type is set, the browser treats the button as submit and tries to send the form.

Source and verification note

For “Forms and Data Safety”, verification focuses on whether the relationship between The basic parts of a form and label and input remains consistent across examples. Examples use standards-oriented HTML, CSS and browser JavaScript. A page should be checked not only visually but also for keyboard use, focus order, mobile layout and meaningful heading structure.

Next lesson

Accessibility Basics: Simple, powerful rules that let everyone, including users with different needs, use your pages easily.