You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
1.2 KiB
35 lines
1.2 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Input type="list"</title>
|
|
<style>
|
|
input[list]:invalid ~ datalist {
|
|
display:block!important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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">
|
|
<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>
|