1- // App.js
2- 3- // import "./App.css";
1+ import React from 'react' ;
42
53const Form = ( ) => {
4+ // Define submit handler function
5+ const handleSubmit = ( event ) => {
6+ event . preventDefault ( ) ; // Prevent default form submission behavior
7+ // Access form data
8+ const formData = new FormData ( event . target ) ;
9+ // Manipulate form data as needed
10+ const firstName = formData . get ( 'firstname' ) ;
11+ const lastName = formData . get ( 'lastname' ) ;
12+ const email = formData . get ( 'email' ) ;
13+ const gender = formData . get ( 'gender' ) ;
14+ // Do something with the form data, like sending it to a server or performing validation
15+ console . log ( 'Form submitted with data:' , { firstName, lastName, email, gender } ) ;
16+ alert ( `Form submmitted with First Name : ${ firstName } )
17+ } ;
18+ 619 return (
7- < div >
20+ < div >
821 < h1 > Form in React</ h1 >
922 < fieldset >
10- < form action = "#" method = "get" >
11- < label for = "firstname" > First Name*</ label >
23+ { /* Add onSubmit attribute to form */ }
24+ < form onSubmit = { handleSubmit } action = "#" method = "get" >
25+ < label htmlFor = "firstname" > First Name*</ label >
1226 < input
1327 type = "text"
1428 name = "firstname"
@@ -17,7 +31,7 @@ const Form = () => {
1731 required
1832 />
1933 < br /> < br />
20- < label for = "lastname" > Last Name*</ label >
34+ < label htmlFor = "lastname" > Last Name*</ label >
2135 < input
2236 type = "text"
2337 name = "lastname"
@@ -26,7 +40,7 @@ const Form = () => {
2640 required
2741 />
2842 < br /> < br />
29- < label for = "email" > Enter Email* </ label >
43+ < label htmlFor = "email" > Enter Email* </ label >
3044 < input
3145 type = "email"
3246 name = "email"
@@ -35,16 +49,13 @@ const Form = () => {
3549 required
3650 />
3751 < br /> < br />
38- < label for = "gender" > Gender*</ label >
52+ < label htmlFor = "gender" > Gender*</ label >
3953 < br />
40- < input type = "radio" name = "gender"
41- value = "" id = "male" />
54+ < input type = "radio" name = "gender" value = "male" id = "male" />
4255 Male
43- < input type = "radio" name = "gender"
44- value = "" id = "female" />
56+ < input type = "radio" name = "gender" value = "female" id = "female" />
4557 Female
46- < input type = "radio" name = "gender"
47- value = "" id = "other" />
58+ < input type = "radio" name = "gender" value = "other" id = "other" />
4859 Other
4960 < br /> < br />
5061 < label > Submit OR Reset</ label >
@@ -61,4 +72,4 @@ const Form = () => {
6172 ) ;
6273}
6374
64- export default Form ;
75+ export default Form ;
0 commit comments