HTML Forms: Syntax, Usage, and Examples

An HTML form allows you to collect user input on a webpage. Whether you’re gathering contact details, processing login credentials, or creating a search bar, forms help users interact with your website efficiently.

How to Use an HTML Form

To create a form in HTML, use the <form> element and include input fields, checkboxes, radio buttons, and buttons. Here’s a basic example:

                  

                    html
                    
                      
                    
                  
                  

                    <form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">Submit</button>
</form>

                  
                

• The <form> tag creates the structure.
• The action attribute specifies where to send the form data.
• The method attribute defines how data is sent (POST for sensitive data, GET for simple queries).
• The <input> elements collect user input.
• The <button> element submits the form.

When to Use HTML Forms

Use forms whenever you need to gather user input on your website. Here are three common scenarios:

1. User Registration and Login

You can use a form to collect user credentials for authentication.

                  

                    html
                    
                      
                    
                  
                  

                    <form action="/login" method="POST">
    <input type="text" name="username" placeholder="Enter username">
    <input type="password" name="password" placeholder="Enter password">
    <button type="submit">Login</button>
</form>

                  
                

2. Contact and Feedback Forms

Allow visitors to send inquiries or feedback directly from your site.

                  

                    html
                    
                      
                    
                  
                  

                    <form action="/contact" method="POST">
    <textarea name="message" placeholder="Enter your message"></textarea>
    <button type="submit">Send</button>
</form>

                  
                

3. Search Functionality

A search form helps users find information quickly.

                  

                    html
                    
                      
                    
                  
                  

                    <form action="/search" method="GET">
    <input type="text" name="query" placeholder="Search...">
    <button type="submit">Search</button>
</form>

                  
                

Examples of HTML Forms

Example 1: HTML Form with Validation

You can use built-in HTML validation to improve user experience.

                  

                    html
                    
                      
                    
                  
                  

                    <form action="/submit" method="POST">
    <input type="email" name="email" required placeholder="Enter your email">
    <input type="password" name="password" minlength="6" required placeholder="Enter password">
    <button type="submit">Register</button>
</form>

                  
                

• The required attribute ensures users complete the form.
• The minlength attribute enforces password length.

Example 2: HTML Form with Two Buttons

Need multiple submit buttons that perform different actions? Use formaction to specify separate destinations.

                  

                    html
                    
                      
                    
                  
                  

                    <form action="/action1" method="POST">
    <button type="submit" formaction="/action1">Submit to Action 1</button>
    <button type="submit" formaction="/action2">Submit to Action 2</button>
</form>

                  
                

Example 3: Viewing Form Results with JavaScript

You can process form data with JavaScript instead of sending it to a server.

                  

                    html
                    
                      
                    
                  
                  

                    <form id="myForm">
    <input type="text" id="nameInput" placeholder="Enter your name">
    <button type="button" onclick="showResults()">Show Name</button>
</form>

<p id="result"></p>

<script>
    function showResults() {
        let name = document.getElementById("nameInput").value;
        document.getElementById("result").textContent = "You entered: " + name;
    }
</script>

                  
                

Learn More About HTML Forms

1. The Action Attribute in an HTML Form

The action attribute tells the form where to send the data.

                  

                    html
                    
                      
                    
                  
                  

                    <form action="/submit-form">
    <input type="text" name="user">
    <button type="submit">Submit</button>
</form>

                  
                

2. HTML Form Elements

Forms support various input elements, each serving a different purpose:

• <input type="text"> for text input.
• <input type="email"> for email addresses.
• <input type="password"> for passwords.
• <textarea> for multi-line text.
• <select> for dropdown menus.

3. Submitting a Form

You can submit form data to a server using the submit button.

                  

                    html
                    
                      
                    
                  
                  

                    <form action="/submit" method="POST">
    <button type="submit">Submit Form</button>
</form>

                  
                

4. HTML Form Validation

Use HTML5 validation attributes like required, pattern, and minlength to improve form usability.

                  

                    html
                    
                      
                    
                  
                  

                    <input type="text" name="username" required pattern="[A-Za-z0-9]{5,}" title="At least 5 letters or numbers">

                  
                

HTML forms make it easy to collect and process user input. By combining form elements, JavaScript validation, and backend handling, you can create efficient and user-friendly forms for any website.

Looking to dive deeper into HTML forms and other essential HTML concepts? Check out our HTML course.