« Previous Next »

Forms in HTML

HTML forms are used to collect user input. A form allows users to submit data to a web server for processing, such as a login or registration form.

Why Use Forms?

Forms are essential for user interaction on web pages. They enable users to provide information, such as contact details, feedback, or search queries, which can then be processed by the website.

Basic Form Elements

Forms consist of various elements like text fields, checkboxes, radio buttons, and submit buttons. Here are some examples:

1. Simple Contact Form

A basic contact form where users can enter their name, email, and a message.

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Forms Page</title>
        </head>
        <body> 
          <form action="https://aitaurangabad.com/ContactUS2.aspx" method="post">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"><br>
          
            <label for="email">Email:</label>
            <input type="email" id="email" name="email"><br>
          
            <label for="message">Message:</label><br>
            <textarea id="message" name="message"></textarea><br>
                     
            <input type="submit" value="Submit">
          </form>
        </body>
      </html>

Output

2. Login Form

A simple form for users to log in with their username and password.

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Forms Page</title>
        </head>
        <body>
          <form action="/login" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username"><br>
    
            <label for="password">Password:</label>
            <input type="password" id="password" name="password"><br>
      
            <input type="submit" value="Login">
          </form>          
        </body>
      </html>

Output

3. Registration Form with Checkboxes and Radio Buttons

This form includes various input types, such as checkboxes and radio buttons.

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Ifarme Page</title>
        </head>
        <body>
          <form action="/register" method="post">
            <label for="firstname">First Name:</label>
            <input type="text" id="firstname" name="firstname"><br>
      
            <label for="lastname">Last Name:</label>
            <input type="text" id="lastname" name="lastname"><br>
        
            <p>Gender:</p>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label><br>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label><br>
        
            <p>Select your interests:</p>
            <input type="checkbox" id="sports" name="interest" value="sports">
            <label for="sports">Sports</label><br>
            <input type="checkbox" id="music" name="interest" value="music">
            <label for="music">Music</label><br>
            <input type="checkbox" id="movies" name="interest" value="movies">
            <label for="movies">Movies</label><br>
      
            <input type="submit" value="Register">
          </form>
        </body>
      </html>

Output

                    
  
          
            First Name:
            

    
            Last Name:
            

    
            Gender:
            
            Male

            
            Female

    
            Select your interests:
            
            Sports

            
            Music

            
            Movies

« Previous Next »