# Darbas su forma

`event.preventDefault()` - stops default drowser behavior - reload page

```
<form
  onSubmit={event => {
    event.preventDefault() // prevent the default browser behavior
    const formData = new FormData(event.currentTarget)
    console.log(Object.fromEntries(formData))
    // do something with the form data
  }}
  {/* form fields go here */}
</form>
```

```
<label>
  Name
  <input name="name" type="text" />
</label>
```

```
<label htmlFor="nameInput">Name</label>
<input id="nameInput" name="name" type="text" />
```

## Metodai

Formoje yra GET, POST ir DIALOG metodai . 

### GET

Get metodas - visus perduodamus duomenis sudeta query. Tinka visokiom paieškoms, kur nera kritiniu duomenų (slaptažodžiū ar pnš)

Duomenu gavimas:

```
new URL(request.url).searchParams
```

### POST

Post metodas - perduoda bodyje

Duomenų gavimas:

```
await request.formData()
```

## Enc type

Tam, kad perduoti prikabintą faila, reikia pridėti parametrą `encType=multipart/form-data`

`new FormData` api gali tureti savyje kelis parametrus tuo paciu pavadinimu

## Action

Galime action perduoti callback, kuris kaip parametra gauna formos duomenis FormData objekte

```
function App() {

  function logFormData(formData: FormData) {
    console.log(Object. fromEntries (formData))
  }

return (
<form action={logFormData}>
  <div>
    <label htmlFor="username Input">Username:</label>
    <input id="usernameInput" name="username" /> </div>
```