fix: html semantics (base issue)

ubugeeei / chibivue

chibivue is minimal Vue.js v3 core implementations (Reactivity System, Virtual DOM, Component, Compiler (Template, SFC)). An online book for building your own Vue.js.

https://ubugeeei.github.io/chibivue/

360 stars 37 forks source link

fix: html semantics (base issue) #212

Open ubugeeei opened 9 months ago

ubugeeei commented 9 months ago

🎯 Aim

Correctly write the HTML in the sample code
- To prevent learners from picking up incorrect HTML

Todo

[ ] button type
[x] img alt https://github.com/Ubugeeei/chibivue/pull/215
[x] input label https://github.com/Ubugeeei/chibivue/issues/212#issuecomment-1874922332 https://github.com/Ubugeeei/chibivue/pull/216
[ ] etc...

yamanoku commented 9 months ago

<label> element associated with <input> element.

https://github.com/yamanoku/chibivue/blob/3cad13aa2c6ab7a7f543bafc6451fdc6376e0e8a/book/impls/10_minimum_example/070_sfc_compiler2/examples/playground/src/App.vue#L34

<label>
  Input Data
  <input @input="handleInput" />
</label>

<label for="example">Input Data</label>
<input id="example" type="text" @input="handleInput">