里面可以放链接吗<input>场地？

Question

是否可以在此处放置登录和注册链接？

<input type="text" class="formcontrol" value="Please Login or Register to view your tracking link.">

Answer 1

<input>元素可能没有结束标记

text/html 中的标记遗漏：
没有结束标记。

这意味着它可能不包含 HTML。

最重要的是，它是Interactive Content ，这意味着它不允许包含<a>元素（或任何其他交互式内容）。 <textarea>也是交互式内容，因此以下内容也不起作用：

<textarea>Please <a...>Login</a> or <a...>Register</a> to view your tracking link.</textarea>

如果要为包含链接的字段使用占位符，则需要将元素的样式设置为类似于<input>元素：

 input, .input { border: 1px solid #888; box-sizing: border-box; display: block; font-family: sans-serif; font-size: 14px; line-height: 20px; margin: 10px 0; padding: 2px 5px; vertical-align: baseline; width: 300px; }

 <input type="text" value="Looks like an input"/> <div class="input">Looks like an input, <a href="#">but isn't</a></div>

Answer 2

根据 w3c，输入标签上禁止使用结束标签，这意味着您不能在输入标签内放置任何元素

http://www.w3.org/TR/html401/interact/forms.html

Answer 3

不，这是不可能的。

您可以将input标签的值设置为某种链接，但它不能作为超链接使用。 用户访问该 URL 的唯一方法是复制它，然后将其粘贴到 URL 栏。

你应该做的是在这个input标签之后放一个<a>标签，这是大多数网站所做的。

Answer 4

不，在输入中你不能使用任何标签。 您可以更改输入role或appearance ，但这是一种糟糕的方式。

Answer 5

不，您要做的是用<div>模拟<input> <div> 。 您可以使<div>键入，请参见此处： 使 DIV 看起来像输入

然后，您可以添加<div>通常可以采用的任何您喜欢的内容和类。 例如，如果您需要将链接呈现为用户键入的内容，则您必须变得有点聪明，但仍然可以通过将函数绑定到在内容更改时调用的<div>来实现。

Twitter 的推文输入框实际上是一个<div> ，这就是它如何突出显示超过 140 个字符的文本。

Answer 6

我建议将其作为表单中的 html 进行处理，并使用 css 对其进行样式设置，使其看起来像一个文本字段，如果这是您想要的。 这样，它将匹配表单的布局并提供您需要的“带链接”的文本。 以下代码可能需要一些调整。

<style type="text/css">
p.input{
width:250px;
font-size:12px;
background:#fff;
border-color:#999;
border-width:1px;
border-style:solid;
padding:3px;
}
p.input a{
color:#000;
}
</style>
<p class="input">Please <a href="/login">Login</a> or <a href="/register">Register</a> to view your tracking link.</p>

Answer 7

你可以在点击它时添加一个函数调用：

<input type="text" onclick="navigate()" value="my-value" />

...
function navigate(){
    window.open("my-url",'_blank');
}

Answer 8

是的，我们可以使用“点击”来完成

以下是代码：-

<input type="button" onclick="window.location.href = '#';" value="log in"/>

Answer 9

您应该创建一个 div 并将其样式设置为输入：

  <div class="form-control">
      <a href="www.google.com">www.google.com</a>
  </div>

 .form-control {
     border: 1px solid #ece8e8;
     height: 40px;
     border-radius: 3px;
     padding-left: 10px;
     box-sizing: border-box;
     font-family: SourceSansPro-Regular;
     font-size: 14px;
     margin-bottom: 10px;
  }

结果是：