diff --git a/color-picker/index.html b/color-picker/index.html
new file mode 100644
index 0000000..ca98f8e
--- /dev/null
+++ b/color-picker/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+<h1>Hello world</h1>
+<label>quelle couleur? <input type="color"> </label>
+</body>
+</html>
\ No newline at end of file
diff --git a/mithril-example/index.html b/mithril-example/index.html
index 87f4c8f..f024493 100644
--- a/mithril-example/index.html
+++ b/mithril-example/index.html
@@ -17,5 +17,7 @@
 
 <div id="example-3"></div>
 
+<div id="example-4"></div>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/mithril-example/main.js b/mithril-example/main.js
index 245ca4e..3e3daa2 100644
--- a/mithril-example/main.js
+++ b/mithril-example/main.js
@@ -1,4 +1,4 @@
-import m from "https://esm.sh/mithril@2.2.2"
+import m from "https://esm.sh/mithril@2.2.2";
 
 function example1(){
     let div1 = m("b", {style: "font-family: monospace;"}, "didier");
@@ -26,3 +26,24 @@ function example3(){
 }
 
 m.render(document.getElementById("example-3"), example3());
+
+function exemple4(){
+    const subList = m("ol",
+        m("li", "unos"),
+        m("li", "dos"),
+        m("li", "tres"));
+    const lst = m("ul",
+        m("li", "un"),
+        m("li", "deux"),
+        m("li", subList));
+
+    const form = m("form",
+        m("label", "X: ", m("input", {type: "text"})),
+        m("label", "Y: ", m("input", {type: "text"})),
+        m("button", "envoyer!")
+        );
+    return m("div", lst, form);
+}
+
+const root = document.getElementById("example-4")
+m.render(root, exemple4());