[HTML5] test input type="list"

2 years ago · 658d2b9a18
parent e1c00ce6dc
commit 658d2b9a18
1 changed files with 18 additions and 9 deletions
--- a/input-list/index.html
+++ b/input-list/index.html
@ -4,22 +4,31 @@
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title></title>
+    <title>Input type="list"</title>
+	<style>
+		input[list]:invalid ~ datalist {
+			display:block!important;
+		}
+	</style>
  </head>
  <body>
-	<p>
-		initial sample : <a href=""></a>
-	</p>
-	<form action="/action_page.php" method="get">
-		<input list="browsers" name="browser">
+	<ul>
+		<li>ref : <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist</a></li>
+	</ul>
+	<form action="" method="get">
+		<input type="text" list="browsers" name="browser" pattern="(IE|Firefox|Chrome|Opera|Safari)">
 		<datalist id="browsers">
-			<option value="Internet Explorer">
-			<option value="Firefox">
-			<option value="Chrome">
+			<span class="info">Merci de choisir parmis :</span>
+			<option value="IE">Internet Explorer</option>
+			<option value="FF">Firefox</option>
+			<option value="Cr">Chrome</option>
 			<option value="Opera">
 			<option value="Safari">
 		</datalist>
 		<input type="submit">
 	</form>
+	<p class="note">
+Note: The <option> element can store a value as internal content and in the value and label attributes. Which one will be visible in the drop-down menu depends on the browser, but when clicked, content entered into control field will always come from the value attribute.
+	</p>
  </body>
 </html>