Prev Next

HTML Forms

HTML forms collect user input. They typically include inputs, checkboxes, radio buttons, and a submit button. Forms are essential for surveys, login pages, and data entry, sending the submitted information to a server for processing.

Key Topics

The <form> Element

Example: A basic form specifying the method and action.

<form action="/submit" method="post">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

Form Controls

Inputs, selects, textareas, and buttons gather user input. Each control has attributes like name that identify the data when submitted.

Form Example

This example shows a login form. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Login Form</title>
</head>
<body>
    <form action="/login" method="post">
        <label for="user">Username:</label>
        <input type="text" id="user" name="username">

        <label for="pass">Password:</label>
        <input type="password" id="pass" name="password">

        <button type="submit">Login</button>
    </form>
</body>
</html>

Explanation: The form sends the username and password to the server via POST for authentication. Each input is identified by a name attribute.

Key Takeaways

  • Use <form> to create interactive data entry interfaces.
  • Specify action and method for server communication.
  • Use various input types for different data (text, email, password).
  • Labels improve accessibility by linking text to form controls.
  • Forms are crucial for user interaction with web applications.
Prev Next