//
constructor(props){
        super(props);
        this.state = {
            nom : '',
            prenom : '',
            bio : 'Biographie',
            ville : 'Votre ville'
        }
    }
                            

                                //
<form onSubmit={this.handleFormSubmit}>
                        <div className="form_element">
                            <label htmlFor="name">Nom</label>
                            <input 
                                onChange={this.handleNom}
                                value={this.state.nom}
                            />
                        </div>
                        <div className="form_element">
                            <label htmlFor="prenom">Prénom: </label>
                            <input
                                onChange={this.handlePrenom}
                                value={this.state.prenom}
                            />
                        </div>
                        <div className="form_element">
                            <label htmlFor="bio">Biographie: </label>
                            <textarea
                                rows="5"
                                cols="30"
                                onChange={this.handleBio}
                                value={this.state.bio}
                            />
                        </div>
                        <div className="form_element">
                            <label htmlFor="ville">Ville: </label>
                            <select 
                                name="ville" 
                                value={this.state.ville}
                                onChange={this.handleVille}
                                id="ville"
                            >
                                <option value="Votre ville" disabled>Votre ville: </option>
                                <option value="Rabat">Rabat</option>
                                <option value="Taza">Taza</option>
                                <option value="Fes">Fés</option>
                            </select>
                        </div>
                        <button type="submit">Valider</button>
                    </form>
                            

                                //
import React,{Component} from 'react';
import Header from './Header/header';
import './index.css';

class Controlled extends Component {
    constructor(props){
        super(props);
        this.state = {
            nom : '',
            prenom : '',
            bio : 'Biographie',
            ville : 'Votre ville'
        }
    }
    handleNom = (event)=>{
        this.setState({
            nom : event.target.value
        })
        // console.log(event.target.value);
    }
    handlePrenom = (event)=>{
        this.setState({
            prenom : event.target.value
        });
        // console.log(event.target.value);
    }
    handleBio = (event) => {
        this.setState({
            bio : event.target.bio
        });
    }
    handleVille = (event) => {
        this.setState({
            ville : event.target.value
        });
    }
    handleFormSubmit = (event) =>{
        event.preventDefault();
        console.log(this.state);
    }
    render(){
        return(
            <div>
                <div className="container">
                    <form onSubmit={this.handleFormSubmit}>
                        <div className="form_element">
                            <label htmlFor="name">Nom</label>
                            <input 
                                onChange={this.handleNom}
                                value={this.state.nom}
                            />
                        </div>
                        <div className="form_element">
                            <label htmlFor="prenom">Prénom: </label>
                            <input
                                onChange={this.handlePrenom}
                                value={this.state.prenom}
                            />
                        </div>
                        <div className="form_element">
                            <label htmlFor="bio">Biographie: </label>
                            <textarea
                                rows="5"
                                cols="30"
                                onChange={this.handleBio}
                                value={this.state.bio}
                            />
                        </div>
                        <div className="form_element">
                            <label htmlFor="ville">Ville: </label>
                            <select 
                                name="ville" 
                                value={this.state.ville}
                                onChange={this.handleVille}
                                id="ville"
                            >
                                <option value="Votre ville" disabled>Votre ville: </option>
                                <option value="Rabat">Rabat</option>
                                <option value="Taza">Taza</option>
                                <option value="Fes">Fés</option>
                            </select>
                        </div>
                        <button type="submit">Valider</button>
                    </form>
                </div>
            </div>
        )
    }
}

export default Controlled;
                            

                                    //
.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.form_element{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}