Scribd
Upload
2 views

React_formulaire

The document is a React component called SimplifiedForm that manages a form with various input types including text, textarea, checkbox, radio buttons, and a select dropdown. It uses the useState hook to handle form data and updates the state based on user input through the handleChange function. Upon submission, the form data is logged to the console.

Uploaded by

Loveshine
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

React_formulaire

The document is a React component called SimplifiedForm that manages a form with various input types including text, textarea, checkbox, radio buttons, and a select dropdown. It uses the useState hook to handle form data and updates the state based on user input through the handleChange function. Upon submission, the form data is logged to the console.

Uploaded by

Loveshine
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React, { useState } from "react";

function SimplifiedForm() {

const [formData, setFormData] = useState({


text: "",
textarea: "",
checkbox: false,
radio: "",
select: "",
});

const handleChange = (e) => {


const { name, value, type, checked } = e.target;

setFormData((prev) => ({
...prev,
[name]: type === "checkbox" ? checked : value,
}));
};

const handleSubmit = (e) => {


e.preventDefault();
console.log("Données du formulaire :", formData);
};

return (

<form onSubmit={handleSubmit}>

{/* Champ texte */}


<label>
Texte:

<input
type="text"
name="text"
value={formData.text}
onChange={handleChange}
/>
</label>

{/* Texte multi-lignes */}


<label>
Zone de texte:
<textarea
name="textarea"
value={formData.textarea}
onChange={handleChange}
/>
</label>

{/* Checkbox */}


<label>
Checkbox:
<input
type="checkbox"
name="checkbox"
checked={formData.checkbox}
onChange={handleChange}
/>
</label>

{/* Radio */}


<fieldset>
<legend>Radio:</legend>
<label>
Option 1
<input
type="radio"
name="radio"
value="option1"
checked={formData.radio === "option1"}
onChange={handleChange}
/>
</label>

<label>
Option 2
<input
type="radio"
name="radio"
value="option2"
checked={formData.radio === "option2"}
onChange={handleChange}
/>
</label>
</fieldset>

{/* Liste déroulante */}


<label>
Sélection:
<select
name="select"
value={formData.select}
onChange={handleChange}
>

<option value="">--Choisir--</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</label>

<button type="submit">Envoyer</button>
</form>
);
}

export default SimplifiedForm;

You might also like