The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Creating a Basic Form

Next ►
►

In this section, we will learn how to create a basic HTML form. Forms are essential for collecting user input and are widely used in web applications. We will cover the following topics:

  1. Form Structure
  2. Form Elements
  3. Form Attributes
  4. Practical Example
  5. Exercises

  1. Form Structure

A form in HTML is defined using the <form> tag. The basic structure of a form looks like this:

<form action="submit_form.php" method="post">
    <!-- Form elements go here -->
</form>
  • action: Specifies the URL where the form data should be sent when the form is submitted.
  • method: Specifies the HTTP method to use when sending form data. Common methods are GET and POST.

  1. Form Elements

Forms can contain various types of input elements, such as text fields, checkboxes, radio buttons, and submit buttons. Here are some common form elements:

  • Text Input: <input type="text" name="username">
  • Password Input: <input type="password" name="password">
  • Submit Button: <input type="submit" value="Submit">

  1. Form Attributes

Forms and form elements can have various attributes to control their behavior and appearance:

  • name: Identifies the form element when data is submitted.
  • value: Specifies the initial value of the form element.
  • placeholder: Provides a hint to the user about what to enter in the input field.
  • required: Specifies that the input field must be filled out before submitting the form.

  1. Practical Example

Let's create a simple login form with username and password fields:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Form Example</title>
</head>
<body>
    <h1>Login Form</h1>
    <form action="submit_form.php" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" required>
        <br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" required>
        <br><br>
        <input type="submit" value="Login">
    </form>
</body>
</html>

Explanation:

  • <label>: Defines a label for an input element. The for attribute should match the id of the input element.
  • <input type="text">: Creates a text input field.
  • <input type="password">: Creates a password input field.
  • <input type="submit">: Creates a submit button.

  1. Exercises

Exercise 1: Create a Registration Form

Create a registration form with the following fields:

  • First Name (text)
  • Last Name (text)
  • Email (email)
  • Password (password)
  • Confirm Password (password)
  • Submit Button

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
</head>
<body>
    <h1>Registration Form</h1>
    <form action="register.php" method="post">
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" name="first_name" placeholder="Enter your first name" required>
        <br><br>
        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" name="last_name" placeholder="Enter your last name" required>
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
        <br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" required>
        <br><br>
        <label for="confirm_password">Confirm Password:</label>
        <input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm your password" required>
        <br><br>
        <input type="submit" value="Register">
    </form>
</body>
</html>

Exercise 2: Create a Feedback Form

Create a feedback form with the following fields:

  • Name (text)
  • Email (email)
  • Feedback (textarea)
  • Submit Button

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feedback Form</title>
</head>
<body>
    <h1>Feedback Form</h1>
    <form action="feedback.php" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your name" required>
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
        <br><br>
        <label for="feedback">Feedback:</label>
        <textarea id="feedback" name="feedback" placeholder="Enter your feedback" required></textarea>
        <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Conclusion

In this section, we have learned how to create a basic HTML form, including the structure, common form elements, and attributes. We also provided practical examples and exercises to reinforce the concepts. In the next section, we will dive deeper into form elements such as input, textarea, and select.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved