Is it possible to place a link inside <input> field?

Question

Is it possible to place links on Login and on Register here?

Answer 1

No, what you'll want to do is emulate the <input> with a <div>. You can make the <div> type-able, see here: Make a DIV look like an input

You may then add whatever contents and classes you like that a <div> could normally take. You'll have to get a bit clever if you need the links to render themselves as a user types, for example, but still possible by binding a function to the <div> that is called when the content changes.

Twitter's tweet input box is actually a <div>, which is how it does stuff like highlight text over 140 characters.

Answer 2

you should create a div and style it like an input :

  <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;
  }

result is :

Answer 3

I would suggest doing it as html within the form and style it with css to look like a text field if that is what your going for. This way it would match the layout of the form and provide the text "with links" that you need. The following code may need a few tweaks.

<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 4

No it is not possible.

You can set the value of the input tag to some kind of a link, but it would not work as a hyperlink. The only way for the user to access that URL is to copy it and then paste it to the URL bar.

What you should do is to put an <a>tag after this input tag, which is what the most sites are doing.

Answer 5

The <input> element may not have a close tag

Tag omission in text/html:
    No end tag.

which means it may not contain HTML.

On top of that, it is Interactive Content, which means that it is not allowed to contain <a> elements (or any other Interactive Content). <textarea> is interactive content as well, so the following will not work either:

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

If you want to use a placeholder for the field that includes links, you'll need to style an element to look like an <input> element:

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 6

yes, we can do it using " on click"

below is the code:-

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