Skip to main content

HTML Forms

Forms allow users to enter and submit information on a webpage.

Forms are commonly used for:

  • Login systems
  • Registration pages
  • Contact forms
  • Surveys
  • Search boxes

Creating a Form

A form is created using the form element.

<form>

</form>

All form controls are placed inside the form element.

Text Input

Use the input element to create a text box.

<form>

    <input type="text">

</form>

Result:

Adding a Label

Labels describe the purpose of an input.

<form>

    <label>
        Username:
    </label>

    <input type="text">

</form>

Result:

Username:

Placeholder Text

Placeholders provide hints to the user.

<input
    type="text"
    placeholder="Enter username">

Result:

Password Input

Password fields hide the text being entered.

<input
    type="password"
    placeholder="Enter password">

Result:

Email Input

Email inputs help validate email addresses.

<input
    type="email"
    placeholder="Enter email">

Result:

Number Input

Number inputs only accept numeric values.

<input
    type="number">

Result:

Text Areas

Text areas allow users to enter multiple lines of text.

<textarea>

</textarea>

Result:

Checkboxes

Checkboxes allow multiple selections.

<input
    type="checkbox">

HTML

Result:

HTML

Radio Buttons

Radio buttons allow a single selection from a group.

<input
    type="radio"
    name="year">

Year 10

<br>

<input
    type="radio"
    name="year">

Year 11

Result:

Year 10


Year 11

Dropdown Lists

Use the select element to create a dropdown menu.

<select>

    <option>
        HTML
    </option>

    <option>
        CSS
    </option>

    <option>
        JavaScript
    </option>

</select>

Result:

Submit Button

Buttons are used to submit forms.

<button>

    Submit

</button>

Result:

Complete Login Form

<form>

    <label>
        Username
    </label>

    <br>

    <input
        type="text"
        placeholder="Username">

    <br><br>

    <label>
        Password
    </label>

    <br>

    <input
        type="password"
        placeholder="Password">

    <br><br>

    <button>

        Login

    </button>

</form>

Screenshot Placeholder

Insert screenshot showing the login form.

Form Submission

Forms can send data to another page.

<form
    action="process.php"
    method="post">

</form>

action

Specifies where the data will be sent.

action="process.php"

method

Specifies how the data will be sent.

method="post"

or

method="get"

Most login and registration systems use:

method="post"

Complete Example

<!DOCTYPE html>

<html>

<head>
    <title>Forms Example</title>
</head>

<body>

    <h1>Student Registration</h1>

    <form
        action="process.php"
        method="post">

        <label>
            Name
        </label>

        <br>

        <input
            type="text"
            name="name">

        <br><br>

        <label>
            Email
        </label>

        <br>

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

        <br><br>

        <label>
            Year Level
        </label>

        <br>

        <select name="year">

            <option>
                Year 10
            </option>

            <option>
                Year 11
            </option>

            <option>
                Year 12
            </option>

        </select>

        <br><br>

        <button>

            Submit

        </button>

    </form>

</body>

</html>

Quick Reference

Form

<form>

Text Input

<input type="text">

Password Input

<input type="password">

Email Input

<input type="email">

Number Input

<input type="number">

Text Area

<textarea>

Checkbox

<input type="checkbox">

Radio Button

<input type="radio">

Dropdown

<select>

Button

<button>

Form Action

action="process.php"

Form Method

method="post"

You now know how to collect user input using HTML forms.

Next tutorial: HTML Embeds and Comments

Back to top