Posts

Showing posts with the label Form

React Project Folder Structure Explained: Complete Beginner's Guide (2026)

Image
  React Project Folder Structure: Complete Guide with Examples 1. Introduction When you create your first React application, you will notice that it contains several folders and files. At first, understanding their purpose can be confusing, especially for students who are new to frontend development. However, learning the React project folder structure is an important step in becoming a React developer. A React project is organized into different folders to keep source code, images, stylesheets, configuration files and installed packages separate. Every file has a particular purpose, and knowing where to write your code makes development easier. In this tutorial, we will understand the React project folder structure created using Vite. You will learn about important folders such as src , public and node_modules , along with files like App.jsx , main.jsx, package.json and index.html. We will also create our own folders and components with practical code examples. This g...
Post a Comment
Read more

change password form

Image
  How to Create Reset password form using  html | bootstrap 👇 ஃ  Create a  Reset password form with  source code ஃ Source Code  :-   <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > User Registration </ title >     < link rel = "stylesheet" href = "css/bootstrap.css" > </ head > < body class = "" >         < div class = "col-md-4 bg-white shadow-lg mx-auto mt-3         p-3" >                         < h1 class = "text-center text-primary" >                 Change Password             </ h1 >           ...
Post a Comment
Read more

Reset password form

Image
 How to Create Reset password form using  html | bootstrap 👇 ஃ  Create a  Reset password form with  source code ஃ Source Code  :- < html >     < head >         < title > Reset password </ title >         < link rel = "stylesheet" href = "css/bootstrap.css" >         </ head >         < body >         < div class = "col-md-4 bg-white shadow-lg mx-auto mt-4 p-3" >         < form >             < h2 class = "text-center text-primary" > Reset Password </ h2 >             < label > New Password </ label >             < input type = "password" name = "psw" placeholder = "Enter New Password" class = "form-control" >        ...
Post a Comment
Read more

Forgot Password form

Image
  How to Create  Forgot Password  form using  html | bootstrap 👇 ஃ  Create a   Forgot Password  Form with  source code ஃ Source Code  :- HTML ,bootstrap Source code:-  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet"   href = "css/bootstrap.css" >     < title > Forgot password </ title > </ head > < body >     < div class = "col-md-4  bg-white shadow-lg mx-auto mt-5 p-3" >     < h3 class = "text-center text-primary" > Forgot Password </ h3 >     < form >         < label > Email Address </ label >         < input type = "email" name = "en" class = "form-control" pla...
Post a Comment
Read more

simple Login form in html

Image
How to Create Login form using  html | bootstrap 👇 ஃ  Create a  Login  Form with  source code ஃ Source Code  :- <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Login page </ title >     < link rel = "stylesheet" href = "css/bootstrap.css" > </ head > < body >< br >< br >     < div class = "col-md-7 bg-white bg-white shadow-lg mt-5 p-3 mx-auto" >     <!-- end contact section -->     <!-- footer section start -->   <?php include 'navigationbar.php' ; ? > <!-- footer  section Start --> < br ></ br >     < h1 class = "text-center text-primary" > Login Form </ h1 >     < form >     ...
Post a Comment
Read more

How to Use HTML Registration Forms Step-by-Step (Beginner Friendly Guide 2026)

Image
  Responsive Register Form design using HTML  Source Code :- HTML  Source code:-  <Doctype html> < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" cont ent = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "css/bootstrap.css" >     < title > Registration page </ title >     </ head > < body >     < div class = "col-md-4 bg-white shadow-lg mx-auto mt-5 p-3" >     < h3 class = "text-center text-primary" > Registration Form </ h3 >     < Form >         < label > Name </ label >         < input type = "text" name = "Name" required value = "" class = "form-control" >         < label > Mobile  Number </ label >       ...
Post a Comment
Read more

how to create Feedback form

Image
  How to Create Feedback Form using  html and CSS 👇 ஃ   Create a   Feedback Form  with  source code ஃ Source Code  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport"         content = "width=device-width,initial-scale=1.0" >     < title > Responsive Form Card </ title >     < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax /libs/font-awesome/6.5.1/css/all.min.css" >     < link rel = "stylesheet" href = "index.css" > < style >     /*style.css */ @import url ( 'https://fonts.googleapis.com/ css2?family=Poppins&display=swap' ); body {     margin : 0 ;     display : flex ;     align-items : center ;     justify-content : space-around ;     flex-direction : column ; ...
Post a Comment
Read more

How to create a Order Form

Image
             How to Create Order form using  html and CSS, JS   👇 ஃ  Create a  Order form with  source code ஃ Source Code  <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = " width=device-width, initial-scale=1.0" >   < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >   < title > Order Form </ title >     < link rel = "stylesheet" href = "style6.css" > < style >   * {   box-sizing : border-box ; } body {     color : #485e74 ;   line-height : 1.6 ;   font-family : 'Segoe UI' , Tahoma , Geneva, Verdana , sans-serif ;   padding : 1em ; } .container {   max-width : 1170px ;   margin-left : auto ;   margin-right : auto ;   padding : 1em ; } ul {   list-style : none ;   padding : 0 ; } .brand { ...
Post a Comment
Read more