Article Categories

Selected Reading

Use HTML with jQuery to make a form

HTML Javascript Bootstrap jQuery

To create forms with HTML and jQuery, you can either write static HTML forms or dynamically generate them using jQuery's DOM manipulation methods.

Creating a Static HTML Form

The basic approach uses standard HTML form elements:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form id="studentForm" action="" method="get">
        <h3>Student Details:</h3>
        
        <label for="sname">Student Name:</label><br>
        <input type="text" id="sname" name="sname"><br><br>
        
        <label for="datetime">Exam Date and Time:</label><br>
        <input type="datetime-local" id="datetime" name="datetime"><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Creating a Dynamic Form with jQuery

You can also create forms dynamically using jQuery's methods:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="formContainer"></div>
    
    <script>
    $(document).ready(function() {
        // Create form element
        var $myform = $("<form></form>").attr({
            id: "dynamicForm",
            method: "get",
            action: ""
        });
        
        // Add form title
        $myform.append("<h3>Dynamic Form:</h3>");
        
        // Add student name field
        $myform.append("<label>Student Name:</label><br>");
        $myform.append('<input type="text" name="sname"><br><br>');
        
        // Add email field
        $myform.append("<label>Email:</label><br>");
        $myform.append('<input type="email" name="email"><br><br>');
        
        // Add submit button
        $myform.append('<input type="submit" value="Submit Form">');
        
        // Append form to container
        $('#formContainer').append($myform);
    });
    </script>
</body>
</html>

Adding Form Validation with jQuery

jQuery makes it easy to add client-side validation:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form id="validatedForm">
        <label>Name (required):</label><br>
        <input type="text" id="name" required><br><br>
        
        <label>Email (required):</label><br>
        <input type="email" id="email" required><br><br>
        
        <input type="submit" value="Submit">
    </form>
    
    <div id="message"></div>
    
    <script>
    $(document).ready(function() {
        $('#validatedForm').on('submit', function(e) {
            e.preventDefault();
            
            var name = $('#name').val().trim();
            var email = $('#email').val().trim();
            
            if (name === '' || email === '') {
                $('#message').html('<p style="color: red;">Please fill all required fields.</p>');
            } else {
                $('#message').html('<p style="color: green;">Form submitted successfully!</p>');
            }
        });
    });
    </script>
</body>
</html>

Key jQuery Methods for Form Creation

Method	Purpose	Example
`$("<form>")`	Create form element	`$("<form></form>")`
`.append()`	Add elements to form	`$form.append('<input>')`
`.attr()`	Set attributes	`.attr('method', 'post')`
`.on()`	Add event handlers	`.on('submit', handler)`

Conclusion

You can create forms using static HTML or dynamically with jQuery. jQuery provides powerful methods for form creation, validation, and event handling, making it easy to build interactive web forms.

Chandu yadav

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next