动态可编辑表单项

遇到的问题:业务需要用户输入对应的username以发送私信给指定对象

方案1-input

输入就完事了

缺陷:要输入,麻烦

html 复制代码
<form>
  <label for="recipient-name">发给:</label>
  <input type="text" id="recipient-name">
</form>

方案2-select

thymeleaf模板动态获取后端usernames列表供用户选择

缺陷:只能选择,无法自定义对象

html 复制代码
<form>
  <label for="recipient-name">发给:</label>
  <select type="text" id="recipient-name">
    <option th:each="list:${usernames}"
    th:value="${list.username}" th:utext="${list.username}"></option>
    </select>
</form>

方案3-datalist

通过datalist获取和thymeleaf动态获取后端的usernames列表

用户既可以通过input输入username,也可以选择name

html 复制代码
<form>
  <label for="recipient-name">发给:</label>
  <input type="text" id="recipient-name" list="usernames"/>
  <datalist id="usernames">
    <option th:each="list:${usernames}"
    th:value="${list.username}" th:utext="${list.username}"></option>
  </datalist>
</form>
  
相关推荐
IT瘾君2 小时前
JavaWeb:Html&Css
前端·html
曹牧4 小时前
HTML字符实体和转义字符串
前端·html
工呈士8 小时前
HTML 模板技术与服务端渲染
前端·html
AXUI8 小时前
至美!看AXUI如何美化原始HTML标签(reset/normalize)
css·html
末日的狂欢姐8 小时前
至美!看AXUI如何美化原始HTML标签(reset/normalize)
css·html·reset·normalize
HtwHUAT13 小时前
五、web自动化测试01
前端·css·chrome·python·功能测试·selenium·html
2401_8370885016 小时前
HTML给图片居中
前端·javascript·html
工呈士17 小时前
HTML响应式网页设计与跨平台适配
前端·html
前端大白话17 小时前
前端必知!HTML中`<a>`标签target属性全攻略:新窗口、当前窗口、指定框架一网打尽
前端·架构·html
Python私教17 小时前
CentOS 7 基于 Nginx 的 HTML 部署全流程指南
nginx·centos·html