WEB TECHNOLOGY LAB
Build a Web application with HTML, CSS, JavaScript, jQuery
and PHP for online application/registration form. Form should
accept the information and print/display on a browser with
formatting/styling upon submission (Button click) on success.
Host the Website on a cloud platform.
Introduction:
Online application and registration forms are essential for efficiently collecting user data in
a digital format. This project involves developing a web application using HTML, CSS,
JavaScript, jQuery, and PHP to create a user-friendly form. The form collects information,
validates it, and displays the submitted data in a formatted style upon submission. The
application is hosted on a cloud platform, ensuring accessibility and scalability. This project
demonstrates the integration of web development and hosting technologies to create a
functional and accessible solution.
Registration form template:
This HTML code creates a simple online registration form. It starts with the basic HTML
structure, followed by the head section which includes meta tags, title, and a link to an
external stylesheet. The body section contains a form container, registration form, and form
fields for name, email, phone number, and date of birth. A submit button allows users to
submit the form, which is designed to send user information to a PHP script for processing.
The code also links to jQuery and a custom JavaScript file, providing a solid foundation for
a registration form that can be customized and expanded as needed.
Department of CS&E, CIT, Ponnampet Page 1 2024-25
WEB TECHNOLOGY LAB
Registration Form Processor:
This PHP code processes data submitted from an HTML registration form. It checks if the
request method is POST, retrieves and sanitizes form data (name, email, phone, and date of
birth) using htmlspecialchars(), and displays a success message with the submitted data in
an HTML format. If the request method is not POST, it displays an "Invalid Request"
message.
Registration Form Validation using jQuery
This code snippet uses jQuery to validate a registration form, ensuring that the name and
email fields are filled in before submitting the form. It prevents the default form submission
behavior if the fields are empty, and displays an alert message to the user. The code is
executed when the document is ready, providing a robust and user-friendly validation
experience.
Department of CS&E, CIT, Ponnampet Page 2 2024-25
WEB TECHNOLOGY LAB
Registration Form Styling with CSS
This CSS code styles a registration form, providing a visually appealing design. It starts
with global settings, defining the font family and background color. The form container is
styled with a maximum width, centered horizontally, and a clean appearance. The heading
elements are centered, and form labels and input fields are styled for clarity.
The submit button is designed with a modern look, featuring a green background color and
hover effect. This CSS code enhances the overall user experience, making the registration
form more engaging and professional-looking. It provides a comprehensive styling
solution, creating a consistent and visually appealing design for the registration form.
Department of CS&E, CIT, Ponnampet Page 3 2024-25
WEB TECHNOLOGY LAB
OUTPUT :
Department of CS&E, CIT, Ponnampet Page 4 2024-25
Page 5
