Forms are essential for collecting user input in web applications. ASP.NET Web Pages provides a straightforward way to create forms using HTML helpers and standard HTML elements. This guide will walk you through the process of creating forms, handling form submissions, and validating user input.

1. Basic Structure of a Form

A form in ASP.NET Web Pages is created using the standard HTML <form> element. You can specify the method (GET or POST) and the action (the URL to which the form data will be sent).

        
            <form method="post" action="/submit">
                <!-- Form fields go here -->
            </form>
            

2. Creating a Simple Form

Below is an example of a simple registration form that collects a username, password, and email address.

        
            <h2>Registration Form</h2>
            <form method="post" action="/register">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" required placeholder="Enter your username" />

                <label for="password">Password:</label>
                <input type="password" name="password" id="password" required placeholder="Enter your password" />

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

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

3. Handling Form Submissions

To handle form submissions, you can check if the request is a POST request and then process the submitted data. Here’s how you can do this in your Razor page:

        
            @{
                if (IsPost)
                {
                    var username = Request.Form["username"];
                    var password = Request.Form["password"];
                    var email = Request.Form["email"];

                    // Process the data (e.g., save to database)
                    
Registration successful for @username!

                }
            }
            <h2>Registration Form</h2>
            <form method="post" action="/register">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" required placeholder="Enter your username" />

                <label for="password">Password:</label>
                <input type="password" name="password" id="password" required placeholder="Enter your password" />

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

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

4. Validating User Input

It is important to validate user input to ensure that the data is correct and secure. You can perform basic validation in your Razor page before processing the data.

        
            @{
                var errorMessage = "";
                if (IsPost)
                {
                    var username = Request.Form["username"];
                    var password = Request.Form["password"];
                    var email = Request.Form["email"];

                    // Simple validation
                    if (string.IsNullOrWhiteSpace(username) || string.IsNullOrWhiteSpace(password) || string.IsNullOrWhiteSpace(email))
                    {
                        errorMessage = "All fields are required.";
                    }
                    else
                    {
                        // Process the data (e.g., save to database)
                        <p>Registration successful for @username!</p>
                    }
                }
            }
            @if (!string.IsNullOrEmpty(errorMessage))
            {
                <p style="color:red;">@errorMessage</p>
            }
            <h2>Registration Form</h2>
            <form method="post" action="/register">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" required placeholder="Enter your username" />

                <label for="password">Password:</label>
                <input type="password" name="password" id="password" required placeholder="Enter your password" />

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

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

Conclusion

Creating forms in ASP.NET Web Pages is a straightforward process that allows you to collect user input effectively. By utilizing standard HTML elements and Razor syntax, you can create dynamic forms, handle submissions, and validate user input. This approach not only enhances user experience but also ensures that your application can process data securely and efficiently.