class: center, middle, inverse

# HTML
### Formularis

.footnote[Mateu Yábar]

---
class: long_text
# Formularis

```html
<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>
```

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

---
# On van les dades?
- web estàtica
- web dinàmica

---
# On van les dades?

```
<form action="/my-handling-form-page" method="post">
```

.center[![client - server](client-server.png)]

- action
- method
  - post
  - get

---
# Inputs
```
<div>
	<label for="text">text:</label>
	<input type="text" id="text" name="text" value="I'm a text field">
</div>
<div>
	<label for="email">email:</label>
	<input type="email" id="email" name="email" multiple>
</div>
<div>
	<label for="password">password:</label>
	<input type="password" id="password" name="password">
</div>
<div>
  <label for="tel">tel:</label>
  <input type="tel" id="tel" name="tel">
</div>
```

<div>
  <label for="text">text:</label>
  <input type="text" id="comment" name="comment" value="I'm a text field">
</div>
<div>
  <label for="email">email:</label>
  <input type="email" id="email" name="email" multiple>
</div>
<div>
  <label for="password">password:</label>
  <input type="password" id="pwd" name="pwd">
</div>
<div>
  <label for="tel">tel:</label>
  <input type="tel" id="tel" name="tel">
</div>

---
# More Inputs
```
<div>
	<label for="url">url:</label>
	<input type="url" id="url" name="url">
</div>
<div>
	<label for="file">file:</label>
	<input type="file" name="file" id="file" accept="image/*" multiple>
</div>
<div>
	<label for="hidden">hidden:</label>
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
</div>
<div>
	<label for="textarea">textarea:</label>
	<textarea id="textarea" name="user_message"></textarea>
</div>
```

<div>
  <label for="url">url:</label>
  <input type="url" id="url" name="url">
</div>
<div>
  <label for="file">file:</label>
  <input type="file" name="file" id="file" accept="image/*" multiple>
</div>
<div>
  <label for="hidden">hidden:</label>
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
</div>
<div>
  <label for="textarea">textarea:</label>
  <textarea id="textarea" name="user_message"></textarea>
</div>

---
class: long_text
# Select
```
<div>
	<select id="simple" name="simple">
	  <option>Banana</option>
	  <option>Cherry</option>
	  <option>Lemon</option>
	</select>
</div>
<div>
	<select id="groups" name="groups">
	  <optgroup label="fruits">
	    <option>Banana</option>
	    <option selected>Cherry</option>
	    <option>Lemon</option>
	  </optgroup>
	  <optgroup label="vegetables">
	    <option>Carrot</option>
	    <option>Eggplant</option>
	    <option>Potato</option>
	  </optgroup>
	</select>
</div>
```

<div>
	<select id="simple" name="simple">
	  <option>Banana</option>
	  <option>Cherry</option>
	  <option>Lemon</option>
	</select>
</div>
<div>
	<select id="groups" name="groups">
	  <optgroup label="fruits">
	    <option>Banana</option>
	    <option selected>Cherry</option>
	    <option>Lemon</option>
	  </optgroup>
	  <optgroup label="vegetables">
	    <option>Carrot</option>
	    <option>Eggplant</option>
	    <option>Potato</option>
	  </optgroup>
	</select>
</div>

---
# Multiple Select
```
<div>
	<select multiple id="multi" name="multi">
	  <option>Banana</option>
	  <option>Cherry</option>
	  <option>Lemon</option>
	</select>
</div>
```

<div>
	<select multiple id="multi" name="multi">
	  <option>Banana</option>
	  <option>Cherry</option>
	  <option>Lemon</option>
	</select>
</div>

---
# Filedset
```
<fieldset>
<legend>Personal data</legend>
<div>
	<label for="name">Name:</label>
	<input type="text" id="name" name="name">
	</div>
	<div>
	<label for="surname">Surname:</label>
	<input type="text" id="surname" name="surname">
	</div>
</fieldset>
```

<fieldset>
<legend>Personal data</legend>
<div>
	<label for="name">Name:</label>
	<input type="text" id="name" name="name">
	</div>
	<div>
	<label for="surname">Surname:</label>
	<input type="text" id="surname" name="surname">
	</div>
</fieldset>

---
class: super_long_text
# Formularis - radio

```
<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>
```

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

---
# Formulari de contacte en web estàtica
## Formspree
- Formspree es una web que ens permet afegir formularis que envien un correu a una pàgina estàtica
	- https://formspree.io/

---
# Exercici
- Pràctica Html: Espècies en perill d'extinció