动态可编辑表单项

遇到的问题:业务需要用户输入对应的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>
  
相关推荐
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
鹏程3 小时前
局域网下五子棋,html+node.js实现
node.js·html
小诸葛的博客5 小时前
gin如何返回html
前端·html·gin
islandzzzz5 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
轻语呢喃7 小时前
Cookie详解:从原理到实战,彻底搞懂用户身份识别机制
javascript·http·html
小宁爱Python9 小时前
FastAPI+Sqlite+HTML的登录注册与文件上传系统:完整实现指南
sqlite·html·fastapi
网络点点滴11 小时前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
Rubin9311 小时前
浏览器一帧做些什么?
html
G等你下课11 小时前
如何进行DOM操作?
javascript·html