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.
<!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 >
