html5排序框
时间: 2023-07-01 21:12:33 浏览: 60
HTML5提供了一些内置的排序框,包括`<datalist>`和`<select>`标签。其中,`<datalist>`标签可以让用户在输入框中输入关键字,然后从下拉列表中选择一个选项,而`<select>`标签则提供了一个下拉列表,让用户从中选择一个选项。
下面是一个示例:
```html
<label for="fruit">选择一个水果:</label>
<input type="text" list="fruits" id="fruit">
<datalist id="fruits">
<option value="苹果">
<option value="香蕉">
<option value="草莓">
<option value="葡萄">
<option value="桃子">
<option value="橙子">
</datalist>
```
在上面的示例中,用户可以在输入框中输入关键字,然后从下拉列表中选择一个水果。如果用户输入的关键字不在下拉列表中,那么就无法选择任何选项。
如果你需要让用户从一个已知的列表中选择一个选项,那么可以使用`<select>`标签,如下所示:
```html
<label for="fruit">选择一个水果:</label>
<select id="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
<option value="葡萄">葡萄</option>
<option value="桃子">桃子</option>
<option value="橙子">橙子</option>
</select>
```
在上面的示例中,用户可以从下拉列表中选择一个水果。如果你需要让用户可以选择多个选项,可以在`<select>`标签中添加`multiple`属性。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)