HTML Forms

1. Why do websites need forms?

Imagine this situation.

Your school is opening a new Coding Club. Students should be able to register online.

The website needs to collect:

student name;
school email;
grade;
programming interests;
preferred meeting day;
a short motivation message.

How can a web page collect all this information?

The answer is an HTML form. Forms create an interface through which users can enter, select and submit data.

Use HTML and CSS editor

1 User enters data

Name, email, password, date, number...

2 User makes choices

Radio buttons, checkboxes and lists.

3 User submits the form

The browser prepares the entered values for processing.

4 Application processes data

Later, server-side code can store the information in a database.

2. Recall: HTML basics

Before learning forms, check that you remember the basic HTML elements.

Which HTML element would you use for each purpose?

Main page heading
Paragraph
Hyperlink
Image
Table row

Check your answers

1. <h1>

2. <p>

3. <a>

4. <img>

5. <tr>

Remember:

HTML describes the structure and meaning of the page. CSS controls its visual presentation.

3. The <form> element

The <form> element groups controls that are used to collect data from a user.

<form>

 <label for="studentName">
 Student name:
 </label>

 <input type="text"
 id="studentName"
 name="studentName"
 required>

 <input type="submit" value="Submit">

</form>

Use HTML and CSS editor

Browser result

Student name:

Element	Purpose
<form>	Groups controls used to collect data.
<label>	Provides a description for a form control.
<input>	Creates an input control.
<button>	Creates a clickable button.

4. Common input types

The behaviour of an <input> depends on its type attribute.

Type	Purpose	Typical example
text	Short text	Student name
email	Email address	student@school.kz
password	Hidden text entry	User password
number	Numeric data	Age
date	Date selection	Date of birth
radio	One choice from a group	Grade 10 / 11 / 12
checkbox	Independent choices	HTML / CSS / Python
submit	Submit the form	Send application

5. Interactive Form Explorer

Select an element on the left. Experiment with the real form control and compare the browser result with its HTML code.

6. Important form attributes

Consider this input element:

<input
 type="email"
 id="schoolEmail"
 name="email"
 placeholder="name@school.kz"
 required>

type

Defines what kind of input control the browser should create.

type="email"

id

Uniquely identifies the element on the page. It can also connect the input to a label.

id="schoolEmail"

name

Identifies the data when the form is submitted.

name="email"

placeholder

Displays a short hint inside an empty field.

placeholder="name@school.kz"

required

Specifies that the user must complete the field before the form can be submitted.

required

value

Specifies the value associated with a control. It is particularly important for radio buttons, checkboxes and options.

value="html"

Why should we use <label>?

<label for="email">
School email:
</label>

<input
 type="email"
 id="email"
 name="email">

The for value in the label should match the id of its form control.

Try clicking the words School email in a correctly labelled form. The browser focuses the associated input field.

7. Radio buttons vs Checkboxes

These controls may look similar, but they solve different problems.

Radio buttons

Use when exactly one option should be selected.

Windows Linux macOS

Try selecting all three.

Checkboxes

Use when several options may be selected.

HTML CSS JavaScript

Try selecting all three.

Think:

A form asks a student which programming languages they know. A student may know Python, JavaScript and C++.

Should you use radio buttons or checkboxes?

Show answer

Checkboxes. Several answers may be selected at the same time.

8. Check your understanding

Choose an answer. Feedback appears immediately.

1. Which input type is most appropriate for a school email?

text email password

✓ Correct. type="email" is designed for email-address input.

✗ Try again. Think about the type of data being entered.

2. Which attribute identifies data when a form is submitted?

placeholder id name

✓ Correct. The name attribute identifies the submitted data.

✗ Try again. Which attribute becomes the name of the submitted value?

3. A student must choose exactly one year group. Which control is most appropriate?

radio checkbox textarea

✓ Correct. Radio buttons are appropriate for one choice from a group.

✗ Try again. The user must choose only one option.

4. Which element is best for a long written comment?

input type="number" textarea radio

✓ Correct. <textarea> is designed for multi-line text.

✗ Try again. Which control allows several lines of text?

9. Debug the form

A student wrote the following code:

<form>

<label for="email">
Email:
</label>

<input
 type="text"
 id="studentEmail">

<p>Choose your grade:</p>

<input type="radio"
 name="grade10">
Grade 10

<input type="radio"
 name="grade11">
Grade 11

</form>

Find at least three problems.

Think about:

the most appropriate input type;
the connection between label and input;
the name attribute;
radio button grouping.

Show explanation

Problem 1: The email field should preferably use type="email".

Problem 2: The label uses for="email", but the input has id="studentEmail". These values should match.

Problem 3: The email input has no name.

Problem 4: The two radio buttons use different names. Therefore, they do not form one exclusive-choice group.

Corrected version

Show corrected code

<form>

<label for="studentEmail">
Email:
</label>

<input
 type="email"
 id="studentEmail"
 name="email">

<p>Choose your grade:</p>

<label>
<input
 type="radio"
 name="grade"
 value="10">
Grade 10
</label>

<label>
<input
 type="radio"
 name="grade"
 value="11">
Grade 11
</label>

</form>

10. Common mistakes

❌ Wrong control

Using checkboxes when only one answer should be selected.

Better: use radio buttons.

❌ Different radio names

Radio buttons that belong to the same group have different name values.

Better: give them the same name.

❌ Missing name

The input looks correct but has no name attribute.

The form-processing system then cannot identify the submitted value properly.

❌ Placeholder instead of label

A placeholder is a hint. It should not normally replace a proper <label>.

❌ Everything is text

Using type="text" for email, numbers, dates and passwords.

Choose the most appropriate input type.

❌ Wrong label connection

The label's for value does not match the input's id.

11. Practical Challenge

School Coding Club Registration Form

Your school is launching a Coding Club. Create an HTML registration form for students.

Requirements

#	Required data	You decide
1	Student name	Choose the appropriate control
2	School email	Choose the appropriate input type
3	Age	Use a suitable numeric control
4	Year group	Only one option may be selected
5	Programming interests	Several options may be selected
6	Preferred meeting day	Use a drop-down list
7	Why do you want to join?	Allow multi-line text
8	Send the application	Add a Submit button

Minimum success criteria

All controls have meaningful labels.
The name and email fields are required.
Every submitted control has a suitable name.
Radio buttons are correctly grouped.
Checkboxes allow multiple interests.
The HTML is correctly nested.

Extension challenge

Improve your form using some of these attributes:

min max maxlength placeholder required

Then use CSS to improve the visual design of your form.

Show one possible solution

<form>

<label for="studentName">
Student name:
</label>

<input
 type="text"
 id="studentName"
 name="studentName"
 required>


<label for="email">
School email:
</label>

<input
 type="email"
 id="email"
 name="email"
 required>


<label for="age">
Age:
</label>

<input
 type="number"
 id="age"
 name="age"
 min="14"
 max="18">


<p>Year group:</p>

<label>
<input
 type="radio"
 name="grade"
 value="10">
Grade 10
</label>

<label>
<input
 type="radio"
 name="grade"
 value="11">
Grade 11
</label>

<label>
<input
 type="radio"
 name="grade"
 value="12">
Grade 12
</label>


<p>Programming interests:</p>

<label>
<input
 type="checkbox"
 name="interest"
 value="html">
HTML
</label>

<label>
<input
 type="checkbox"
 name="interest"
 value="python">
Python
</label>

<label>
<input
 type="checkbox"
 name="interest"
 value="javascript">
JavaScript
</label>


<label for="day">
Preferred meeting day:
</label>

<select id="day" name="day">

 <option value="tue">
 Tuesday
 </option>

 <option value="wed">
 Wednesday
 </option>

 <option value="thu">
 Thursday
 </option>

</select>


<label for="reason">
Why do you want to join?
</label>

<textarea
 id="reason"
 name="reason"
 rows="5">
</textarea>


<input type="submit"
value="Send application">


</form>

Self-assessment

Before finishing the lesson, check your form.

I used the <form> element.
I selected appropriate input types.
My controls have meaningful labels.
My radio buttons are correctly grouped.
I used checkboxes where several answers are possible.
I used <select> correctly.
I used <textarea> for longer text.
Required fields use the required attribute.
Every submitted field has a suitable name.

Vocabulary · English–Russian

English	Русский
HTML form	HTML-форма / веб-форма
data entry	ввод данных
form control	элемент управления формы
input field	поле ввода
label	подпись поля
text field	текстовое поле
radio button	переключатель
checkbox	флажок
drop-down list	раскрывающийся список
textarea	многострочное текстовое поле
submit	отправить данные
required field	обязательное поле
placeholder	текст-подсказка
attribute	атрибут
value	значение
validation	проверка корректности данных

Questions:

Answer these questions without looking at the examples.

What is the purpose of the <form> element?
What is the difference between a radio button and a checkbox?
Why is the name attribute important?
Which input type should be used for an email address?
How do you connect a <label> to an <input>?
Write HTML for a required field that asks for a student's name.

Check answers

1. It groups controls used to collect and submit user data.

2. Radio buttons normally allow one choice from a group; checkboxes allow independent or multiple choices.

3. The name identifies a control's value when the form data is submitted.

4. type="email"

5. The label's for value should match the input's id.

6.

<label for="studentName">
Student name:
</label>

<input
 type="text"
 id="studentName"
 name="studentName"
 required>

Всего комментариев: 0

1. Why do websites need forms?

2. Recall: HTML basics

3. The <form> element

Use HTML and CSS editor

Browser result

4. Common input types

5. Interactive Form Explorer

Text input

Email input

Password input

Number input

Date input

Radio buttons

Checkboxes

Drop-down list

Textarea

Submit button

6. Important form attributes

type

id

name

placeholder

required

value

Why should we use <label>?

7. Radio buttons vs Checkboxes

Radio buttons

Checkboxes

8. Check your understanding

9. Debug the form

Corrected version

10. Common mistakes

❌ Wrong control

❌ Different radio names

❌ Missing name

❌ Placeholder instead of label

❌ Everything is text

❌ Wrong label connection

11. Practical Challenge

School Coding Club Registration Form

Requirements

Questions:

Exercises:

Ex. 1 Create a webform