动态可编辑表单项

遇到的问题:业务需要用户输入对应的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>
  
相关推荐
CodeCraft Studio6 小时前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
冰菓Neko7 小时前
HTML 常用标签速查表
前端·html
qq_三哥啊12 小时前
【HTML】<script>元素中的 defer 和 async 属性详解
html·js
Dxy123931021615 小时前
Python HTML模块详解:从基础到实战
开发语言·python·html
Amodoro1 天前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
飛_1 天前
【Word Press基础】创建一个动态的自定义区块
运维·nginx·html·word press
oioihoii1 天前
恋爱时间倒计时网页设计与实现方案
html
Hilaku1 天前
AVIF vs. JPEG XL:2025年,我们该为网站选择哪种下一代图片格式?
前端·javascript·html
LotteChar1 天前
HTML:从 “小白” 到 “标签侠” 的修炼手册
前端·html
寒..1 天前
网络安全第三次作业
前端·css·html