CODEWITHSUNDEEP
htmlformscss
user3187469
user3187469

Reputation: 1531

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

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

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

Upvotes: 8

Views: 46421

Answers (9)

Amir BenAmara
Amir BenAmara

Reputation: 686

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 :

enter image description here

Upvotes: 0

Satyam shekhar
Satyam shekhar

Reputation: 1

yes, we can do it using " on click"

below is the code:- 

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

Upvotes: 0

Anders Rapp
Anders Rapp

Reputation: 1

You could add a function call when clicking on it: 

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

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

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

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>

Upvotes: 9

pebkac
pebkac

Reputation: 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>

Upvotes: 0

Dan
Dan

Reputation: 6504

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.

Upvotes: 0

iamkrillin
iamkrillin

Reputation: 6876

according to w3c, the end tag is forbidden on an input tag this means that you cannot place any element inside of an input tag

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

Upvotes: 2

Alex
Alex

Reputation: 11245

No, inside input you can't use any tags. You can change input role or appearance, but it's a bad way.

Upvotes: 0

albusshin
albusshin

Reputation: 4010

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.

Upvotes: 1

Related Questions