Html 如何在不接触css代码的情况下在文本字段中添加图标？

我想在用户名字段中添加一个复选标记，使其在未使用用户名时显示，并在使用用户名时显示第二个复选标记（警告图标或smth）。我不想碰css代码

HTML:

“用户名”，类=>“表单控件”，
必需=>undef，模式=>“[a-zA-Z0-9.{4,15}”%>

尝试使用一个提供一组图标的软件包，您可以在HTML元素中包含这些图标的类，使事情变得更简单。 退房

云
最喜欢的
附件
计算机
交通

如果您可以使用JavaScript，也许这段小代码可以帮助您：

$（“#myInput”）。在（“键控”上，函数（e）{
让username=$（this.val（）；
让我们一起来看看http://www.pngall.com/wp-content/uploads/2017/05/Alert-Download-PNG.png';
让我们来检查一下https://img.favpng.com/25/17/2/check-mark-computer-icons-clip-art-png-favpng-FRDM9ia5q695puSB2mSJEsSKG.jpg'
让imgWarn=document.createElement（“img”）；
设imgOk=document.createElement（“img”）；
让inputWidth=$（this）.width（）；
$（imgWarn.attr（“src”，wariningIconUrl）.css（{“宽度”：“13px”，“位置”：“绝对”}）
$（imgOk.attr（“src”，checkIconUrl）.css（{“宽度”：“13px”，“位置”：“绝对”}）
设偏移量=$（“#myInput”）.offset（）；
let take=false//检查用户名是否已被使用的代码（如果在ajax的完成函数中包含底部代码，则可能是ajax请求）
if（take==true）{
$（“.formgroup”）.append（$（imgWarn）.css（“左”，offset.left+inputWidth-20）.css（“顶”，offset.top+5））；
}否则{
$（“.formgroup”）.append（$（imgOk）.css（“left”，offset.left+inputWidth-20）.css（“top”，offset.top+5））；
}
});

用户名
用户名已在使用中
可以包含字母数字字符，长度必须介于4到15个字符之间
您可以添加以下html代码以显示警告图标：

<span style='font-size:20px;color: red;'>&#9888;</span>

<span style='font-size:20px;color: green;'>&#10004;</span>

⚠；

您可以使用下面的html代码显示成功图标：

<span style='font-size:20px;color: red;'>&#9888;</span>

<span style='font-size:20px;color: green;'>&#10004;</span>

✔；

通过使用html实体，您不需要使用/调用图标字体文件

SRC:
&
为什么要避免接触CSS代码？最好的方法是在存在类时使用CSS向输入添加背景。使用表单行将图标放置在文本字段旁边是一个好主意？如果您指的是引导表单类，并且您对它提供的布局很满意，则使用它取决于您。如果我必须实现您的需求，我会选择下面这样一个简单的解决方案。选中此处的图标文本框