是否可以在<input />字段中放置一个链接？

Question

是否可以在登录和登记处放置链接？

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

Answer 1

The <input> element may not have a close tag

  

在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栏。

您应该在<a>标记之后添加input标记，这是大多数网站正在执行的操作。

Answer 4

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

Answer 5

不，您要做的是使用<input>模仿<div>。您可以设置<div>类型，请参阅此处：Make a DIV look like an input

然后，您可以添加<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;
  }

结果是：