Question

您可以将特定于（离子图标）标签的标签放入输入类型的提交值吗？

我得到了这两个标签，我需要将它们组合起来

<input type="submit" name="plus" value="" class="btn">
<ion-icon name="chevron-forward-outline"></ion-icon>

就像这样，但是要使其工作。

<input type="submit" name="plus" value="<ion-icon name="chevron-forward-outline"></ion-icon>" class="btn">

Answer 1

<input type='submit' ...>不适用，因为这种方式不支持HTML标签。来自<input type="button"> MDN page：

注意：虽然类型为button的<input>元素仍然是完全有效的HTML，但是更新的<button>元素现在是首选的创建按钮。假设已插入<button>的标签文本在开始和结束标记之间，您可以在标签，甚至图像。

这样，通过functionally-same <button>，您可以使用HTML标签：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
<button type="submit" name="plus" value="" class="btn btn-primary">
    <ion-icon name="chevron-forward-outline"></ion-icon>
</button>

Answer 2

使用按钮标签

<button name="plus"  class="btn">
  <ion-icon name="chevron-forward-outline\"></ion-icon>
</button>

Answer 3

创建一个假字段，看看：

.field {
  align-items: center;
  border: 1px solid #ccc;
  border-radius: .25rem;
  display: flex;
}

.field__input {
  appearance: none;
  border: 0;
  flex-grow: 1;
  padding: .5rem;
}

.field__icon {
  padding-right: .5rem;
}

<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>

<div class="field">
    <input class="field__input" type="text">
    <span class="field__icon">
        <ion-icon name="chevron-forward-outline"></ion-icon>
    </span>
</div>

输入type =“ submit”按钮可以带有HTML标签吗？

3 个答案: