Forgotten HTML

class: center, middle
# Forgotten HTML

.b[[@abelar_s](https://twitter.com/abelar_s) -
[@ParisRB](https://twitter.com/parisrb) -
[@RailsGirlsParis](https://twitter.com/railsgirlsparis)]

[maitre-du-monde.fr](maitre-du-monde.fr)

.contrib[[Contribute to this talk on GitHub!](https://github.com/abelards/abelards.github.com/edit/master/talks/forgotten_html.html)]

???

---
# Set

`UL LI`
- Unordered List
- List Item

---
# Array

`OL LI`
1. Ordered List
2. List Item

---
# Hash

`DL DT DD`
<dl>
  <dt>DL</dt><dd>Definition List</dd>
  <dt>DT</dt><dd>Definition Term</dd>
  <dt>DD</dt><dd>Definition Description</dd>
</dl>

---
# Hash

`DL DD DT`
```
<dl>
  <dt>DL</dt><dd>Definition List</dd>
  <dt>DT</dt><dd>Definition Term</dd>
  <dt>DD</dt><dd>Definition Description</dd>
</dl>
```

DT DD DD : one term, several definitions

DT DT DD : several terms, one definition

---
# SELECT OPTION

---
# SELECT OPTION

```
<select>
  <option value="EUR">€</option>
  <option value="USD">$</option>
  <option value="GBP">£</option>
</select>

<select multiple="multiple">
  <option value="EUR">€</option>
  <option value="USD">$</option>
  <option value="GBP">£</option>
</select>
```

---
# SELECT OPTGROUP OPTION

---
# SELECT OPTGROUP OPTION

```
<select>
 <optgroup label="Asia">
  <option value="INR">₹</option>
  <option value="JPY">¥</option>
  <option value="KRW">₩</option>
 </optgroup>
 <optgroup label="Middle-East">
  <option value="ILS">₪</option>
 </optgroup>
</select>
```

---
# HTML5

`<input type="?">`

- checkbox, file, hidden, password, radio, text
- button, img, reset, submit

- color
- email, tel, url
- number, range
- date, datetime-local
- search

---
# ATTRIBUTES

- min, max, placeholder
- pattern, required, x-moz-errormessage
- autocomplete

---
# REQUIRED

`<input required=''>`

CSS selector `:required` `:valid` `:invalid`
JS event `invalid`

```
<input type=submit name=submit value="Submit">
<input type=submit formnovalidate name=save value="Save draft">```

???
radios? checkboxes?

---
# DATALIST

```
<input type=text list=bad_browsers>
<datalist id=bad_browsers>
  <option value="Safari">
  <option value="iOS Safari">
  <option value="Opera Mini">
</datalist>
```

https://demo.agektmr.com/datalist/

---
class: center, middle, happy
# Questions?

.b[[@abelar_s](https://twitter.com/abelar_s) -
[@ParisRB](https://twitter.com/parisrb) -
[@RailsGirlsParis](https://twitter.com/railsgirlsparis)]

[maitre-du-monde.fr](maitre-du-monde.fr)

.contrib[[Contribute to this talk on GitHub!](https://github.com/abelards/abelards.github.com/edit/master/talks/forgotten_html.html)]