Form in react

V.V.V IMP note: name properties should be same as the object name that is stated in the state of react



1))) READ THE DATA ON CONSOLE SCREEN FROM THE INPUT TEXT  IN FORM 
import React from "react";


export default function Form(){
  const [firstName ,setFirstName] = React.useState("")

  function handleChange(event){
    console.log(event.target.value)
  
  }
  


  return <div>
    <form>

   <input
    type="text"
     placeholder="Name" 
     onChange={handleChange}
     />

    </form>
  </div>
}

2)))  --------------------------------Update first name in every key stroke--------------------------------------------------------------------------------

import React from "react";


export default function Form(){
  const [firstName ,setFirstName] = React.useState("")

  console.log(firstName)
  function handleChange(event){
   setFirstName(event.target.value)
  
  }
  


  return <div>
    <form>

   <input
    type="text"
     placeholder="Name" 
     onChange={handleChange}
     id="firstName"
     />

    </form>
  </div>
}


3))))---------------------------------------------STATE OBJECT IN FORM-------------------------------------------------------------------

// Bulding a meme generator | forms state object 

import React from "react";

export default function Form(){
  const [formData ,setFormData] = React.useState({
    firstName : "",
    lastName : "",
    E_mail : ""
  })

  console.log(formData)

  function handleChange(event){
    setFormData(preFormData => {
      return {
        ...preFormData,
        [event.target.name ]: event.target.value
      }
    })
  
  
  }
  


  return <div>
    <form>

   <input  type="text" placeholder="First Name" onChange={handleChange} name = "firstName" />
   <input  type="text" placeholder=" Last Name" onChange={handleChange} name = "lastName"/>
 <input  type="email" placeholder="G-mail" onChange={handleChange} name = "E_mail"/>

    </form>
  </div>
}





3))))---------------------------------------------TEXT AREA-------------------------------------------------------------------

// form in react  :Tetarea

import React from "react";

export default function Form(){
  const [formData ,setFormData] = React.useState({
    firstName : "",
    lastName : "",
    E_mail : "",
    comment :""
  })

  console.log(formData)

  function handleChange(event){
    setFormData(preFormData => {
      return {
        ...preFormData,
        [event.target.name ]: event.target.value
      }
    })
  
  
  }
  
  return <div>
    <form>

   <input  type="text" placeholder="First Name" onChange={handleChange} value={formData.firstName} name = "firstName" />
   <input  type="text" placeholder=" Last Name" onChange={handleChange} value={formData.lastName} name = "lastName"/>
   <input  type="email" placeholder="G-mail" onChange={handleChange}    value={formData.E_mail} name = "E_mail"/>
   <textarea  rows= "5" cols="23" value={formData.comment} onChange={handleChange} placeholder="Comment" name="comment"/>

    </form>
  </div>
}




4))))))  ---------------------------------------------------CHECKBOX--------------------------------------------------------------------


// form in react  :Checkbox

import React from "react";

export default function Form(){
  const [formData ,setFormData] = React.useState({
    firstName : "",
    lastName : "",
    E_mail : "",
    comment :"",
    isFriendly:false

  })

  console.log(formData)

  function handleChange(event){

    const {name,value,checked,type} = event.target
    setFormData(preFormData => {
      return {
        ...preFormData,
        // [event.target.name ]:event.target.value     
          // {instead of defining in this way  we can do in shortcut way}
        [name] :type === "checked" ? checked:value
      }
    })
  
  
  }
  
  return <div>
    <form>
   <input  type="text" placeholder="First Name" onChange={handleChange} value={formData.firstName} name = "firstName" /><br/>
   <input  type="text" placeholder=" Last Name" onChange={handleChange} value={formData.lastName} name = "lastName"/><br/>
   <input  type="email" placeholder="G-mail" onChange={handleChange}    value={formData.E_mail} name = "E_mail"/><br/>
   <textarea  rows= "3" cols="23" value={formData.comment} onChange={handleChange} placeholder="Comment" name="comment"/><br/>


     {/* checkbox hold only boolean value i.e either true or false   */}
   <input type="checkbox" id="isFriendly" name="isFriendly" checked={formData.isFriendly} 
  //  there is not the "value" property but there is checked property because checkbox checked either it is false or true
    onChange={handleChange} />
   <label htmlFor="isFriendly">Are you friendly ?</label><br/>



    </form>
  </div>
}



4))))))   ----------------------------------------------RADIOBOX-------------------------------------------------------------------------


// form in react  :Radiobox

import React from "react";

export default function Form(){
  const [formData ,setFormData] = React.useState({
    firstName : "",
    lastName : "",
    E_mail : "",
    comment :"",
    isFriendly:false,
    employment: ""

  })

  console.log(formData)

  function handleChange(event){

    const {name,value,checked,type} = event.target
    setFormData(preFormData => {
      return {
        ...preFormData,
        // [event.target.name ]:event.target.value     
          // {instead of defining in this way  we can do in shortcut way}
        [name] :type === "checked" ? checked:value
      }
    })
  
  
  }
  
  return <div>
    <form>
   <input  type="text" placeholder="First Name" onChange={handleChange} value={formData.firstName} name = "firstName" /><br/>
   <input  type="text" placeholder=" Last Name" onChange={handleChange} value={formData.lastName} name = "lastName"/><br/>
   <input  type="email" placeholder="G-mail" onChange={handleChange}    value={formData.E_mail} name = "E_mail"/><br/>
   <textarea  rows= "3" cols="23" value={formData.comment} onChange={handleChange} placeholder="Comment" name="comment"/><br/>


     {/* checkbox hold only boolean value i.e either true or false   */}
   <input type="checkbox" id="isFriendly" name="isFriendly" checked={formData.isFriendly} 
  //  there is not the "value" property but there is checked property because checkbox checked either it is false or true
    onChange={handleChange} />
   <label htmlFor="isFriendly">Are you friendly ?</label><br/>



{/*  Now radio box */}

<fieldset style={{width:223}}>

  <legend>Current employment employment</legend>
<br/>
  <input type="radio" name="employment" value="unemployment" onChange={handleChange}></input>
  <label  htmlFor="Unemployment">Unemployment</label><br/>

  <input type="radio" name="employment" value= "Part Time"  onChange={handleChange}></input>
  <label  htmlFor="partTime">Part Time</label><br/>

  <input type="radio" name="employment" value="Full TIme" onChange={handleChange}></input>
  <label  htmlFor="fullTime">Full Time</label><br/>
</fieldset>

{/* in  radio box we should not use checked property because we need the value of the clicked on  */}

    </form>
  </div>
}




5))))))  ---------------------------------------SELECT & OPTION--------------------------------------------------------------------------------



// form in react  :select & option

import React from "react";

export default function Form(){
  const [formData ,setFormData] = React.useState({
    firstName : "",
    lastName : "",
    E_mail : "",
    comment :"",
    isFriendly:false,
    employment: "",
    favColor : ""

  })

  console.log(formData)

  function handleChange(event){

    const {name,value,checked,type} = event.target
    setFormData(preFormData => {
      return {
        ...preFormData,
        // [event.target.name ]:event.target.value     
          // {instead of defining in this way  we can do in shortcut way}
        [name] :type === "checked" ? checked:value
      }
    })
  
  
  }
  
  return <div>
    <form>
   <input  type="text" placeholder="First Name" onChange={handleChange} value={formData.firstName} name = "firstName" /><br/>
   <input  type="text" placeholder=" Last Name" onChange={handleChange} value={formData.lastName} name = "lastName"/><br/>
   <input  type="email" placeholder="G-mail" onChange={handleChange}    value={formData.E_mail} name = "E_mail"/><br/>
   <textarea  rows= "3" cols="23" value={formData.comment} onChange={handleChange} placeholder="Comment" name="comment"/><br/>


     {/* checkbox hold only boolean value i.e either true or false   */}
   <input type="checkbox" id="isFriendly" name="isFriendly" checked={formData.isFriendly} 
  //  there is not the "value" property but there is checked property because checkbox checked either it is false or true
    onChange={handleChange} />
   <label htmlFor="isFriendly">Are you friendly ?</label><br/>



{/*  Now radio box */}

<fieldset style={{width:223}}>

  <legend>Current employment employment</legend>
<br/>
  <input type="radio" name="employment" value="unemployment" onChange={handleChange}></input>
  <label  htmlFor="Unemployment">Unemployment</label><br/>

  <input type="radio" name="employment" value= "Part Time"  onChange={handleChange}></input>
  <label  htmlFor="partTime">Part Time</label><br/>

  <input type="radio" name="employment" value="Full TIme" onChange={handleChange}></input>
  <label  htmlFor="fullTime">Full Time</label><br/>
</fieldset>

{/* in  radio box we should not use checked property because we need the value of the clicked on  */}



{/* Now select option */}
<br/>
<label htmlFor="favColor">What is your favorite color?</label><br/>
<select id="favColor" value={formData.favColor} onChange={handleChange} name="favColor">
  
  <option>--CHOOSE--</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
  <option value="brown">Brown</option>
  <option value="pink">pink</option>
  
</select>

    </form>
  </div>
}





6))----------------------------------------SUBMITTING THE FORM------------------------------------------------------------------------------



// form in react  :submitting the form data useing buttom

import React from "react";

export default function Form(){
  const [formData ,setFormData] = React.useState({
    firstName : "",
    lastName : "",
    E_mail : "",
    comment :"",
    isFriendly:false,
    employment: "",
    favColor : ""

  })

  // console.log(formData)

  function handleChange(event){

    const {name,value,checked,type} = event.target
    setFormData(preFormData => {
      return {
        ...preFormData,
        // [event.target.name ]:event.target.value     
          // {instead of defining in this way  we can do in shortcut way}
        [name] :type === "checked" ? checked:value
      }
    })
  
  
  }
  
  function handleSubmit(event){
    event.preventDefault()  
    //  it prevent a page from being refresh if we didnt use that the all data will get vanished

    // submitToApi(formData) => we should pass this formData to apifunction but for now we dont have that api function 

    console.log(formData)
  }
  return <div>
    <form onSubmit={handleSubmit}>
   <input  type="text" placeholder="First Name" onChange={handleChange} value={formData.firstName} name = "firstName" /><br/>
   <input  type="text" placeholder=" Last Name" onChange={handleChange} value={formData.lastName} name = "lastName"/><br/>
   <input  type="email" placeholder="G-mail" onChange={handleChange}    value={formData.E_mail} name = "E_mail"/><br/>
   <textarea  rows= "3" cols="23" value={formData.comment} onChange={handleChange} placeholder="Comment" name="comment"/><br/>


     {/* checkbox hold only boolean value i.e either true or false   */}
   <input type="checkbox" id="isFriendly" name="isFriendly" checked={formData.isFriendly} 
  //  there is not the "value" property but there is checked property because checkbox checked either it is false or true
    onChange={handleChange} />
   <label htmlFor="isFriendly">Are you friendly ?</label><br/>



{/*  Now radio box */}

<fieldset style={{width:223}}>

  <legend>Current  employment</legend>
<br/>
  <input type="radio" name="employment" value="unemployment" onChange={handleChange}></input>
  <label  htmlFor="Unemployment">Unemployment</label><br/>

  <input type="radio" name="employment" value= "Part Time"  onChange={handleChange}></input>
  <label  htmlFor="partTime">Part Time</label><br/>

  <input type="radio" name="employment" value="Full TIme" onChange={handleChange}></input>
  <label  htmlFor="fullTime">Full Time</label><br/>
</fieldset>

{/* in  radio box we should not use checked property because we need the value of the clicked on  */}



{/* Now select option */}
<br/>
<label htmlFor="favColor">What is your favorite color?</label><br/>
<select id="favColor" value={formData.favColor} onChange={handleChange} name="favColor">
  
  <option>--CHOOSE--</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
  <option value="brown">Brown</option>
  <option value="pink">pink</option>
  
</select>
<br/>

<button>Submit</button>
    </form>
  </div>
}




7)))))------------------------------------short final form ----------------------------------------------------------------

// sign up form in react   

import React from "react";

export default function Form(){
  // making state of object to collect data
const[formData , setFormData] = React.useState({
  email: "",
  password: "",
  conformPassword : "",
  newsLetter : false
})
// console.log(formData)

function handleinput(event){

  const {name,value,checked,type} = event.target
 setFormData(previousData => {
 return {
      ...previousData,
      [name] : type == "checkbox" ? checked:value
 }
 })}

// you can make another function for checkbox but above is short 

//  function handleinputCheckbox(event){
//   setFormData(previousData => {
//   return {
//        ...previousData,
//        [event.target.name] : event.target.checked
//   }
//   })}

function submitFormData(event){
  event.preventDefault()  
        if(formData.password === formData.conformPassword  && formData.newsLetter === true){
        
          // if(formData.password === !null || formData.conformPassword === !null ){
            console.log("you are signed in ")
          // }

        }
        else{
          // if(formData.newsLetter === false && formData.password !== formData.conformPassword){
            console.log("please recheck the password")
            // }  
        }
      }
    
  return <div>
<form onSubmit={submitFormData}>
  <input className="input" type="text" placeholder="E-MAIL" name="email"  value={formData.email} onChange={handleinput} />
  <input className="input" type="password" placeholder="password" name="password"  value={formData.password} onChange={handleinput}  />
  <input className="input" type="password" placeholder="Conform Password" name="conformPassword" value={formData.conformPassword}   onChange={handleinput}  />
<br/>
<p id="handlePasswordError" className="handlePasswordError"></p>&nbsp;
  <label htmlFor="newsLetter"> I want to join the newsletter</label>
  <input  className="checkbox" type="checkbox" name="newsLetter" checked={formData.newsLetter} onChange={handleinput} />

  <button className="submit">Sign up</button>
</form>

  </div>
}


////////css of this code //////
body{
    background-color:rgb(27, 27, 78);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:6%
}
form{
    padding:15%;
    border-radius: 22px;
    background-color: white;
    width: 19rem;
    height: 24rem;
}
.input{
    height: 42px;
    width: 17rem;
    border-radius: 10px;
    margin-bottom: 23px;
    text-align: center;
}
.checkbox{
float: left;
}
.submit{
    margin-top: 23px;
    background-color: rgb(27, 27, 78);
    width: 117px;
    height: 47px;
    color: white;
   margin-left: 28%;
   border-radius: 9px;
}
.handlePasswordError{
    color: red;
    font-size:15px;
    text-align: center;
    margin-top: -23px;
}