动态可编辑表单项

遇到的问题:业务需要用户输入对应的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>
  
相关推荐
计算机毕设定制辅导-无忧学长4 小时前
HTML 性能优化之路:学习进度与优化策略(二)
学习·性能优化·html
小旋风012345 小时前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
前端Hardy8 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html
前端Hardy8 小时前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html
前端Hardy8 小时前
HTML&CSS:不一样的开关效果
javascript·css·html
木木黄木木10 小时前
HTML5手写签名板项目实战教程
前端·html·html5
爱上大树的小猪13 小时前
【前端安全】模板字符串动态拼接HTML的防XSS完全指南
前端·安全·html
懒大王952716 小时前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
Yolo@~1 天前
个人网站:基于html、css、js网页开发界面
javascript·css·html
DarkBule_1 天前
零基础驯服GitHub Pages
css·学习·html·github·html5·web