How do I create a hyperlink inside an input text field in html?

Question

I have an input text field in which the user can enter the name of a website. Is it possible for it to be hyperlinked so that once the field is saved, if the user clicks on it, it redirects to the website?

I use Django for the backend and Javascript and html for the front end.

What do you mean by saved? Do you mean that while it is still within an input box it is clickable, or that after it is typed in an input box and 'saved' and shown elsewhere it is wrapped with the proper HTML to be a link? — tmdesigned, Feb 27 '18 at 21:52
What have you tried? Note you can't have an actual `` element inside a `` if that was what you were wanting — Patrick Evans, Feb 27 '18 at 21:52
See the following answer: https://stackoverflow.com/questions/6959484/link-inside-of-input-tag — Jesus Is Coming, Feb 27 '18 at 21:57
See this stackoverflow answer https://stackoverflow.com/questions/6959484/link-inside-of-input-tag — Jesus Is Coming, Feb 27 '18 at 22:01

score 1 · Accepted Answer · answered Feb 27 '18 at 21:58

An input field's value is stored as plain text, therefore you cannot include HTML (i.e. a link) and expect the HTML to be parsed and functioning.

You could simulate this behavior with JavaScript, however I would recommend against it. (You would add a click listener, your function would pull the value of the field, see if it is a valid URL, and then open up the location.)

I'm not going to write the code for this because it would be a terrible user experience. The standard behavior for an input field is that you click on it to edit the text. This is an assumption your users have, and they would therefore (a) not think to click on it because they don't expect it to be a link, and (b) click in it if they wanted to edit the text, only to be redirected and unable to edit the text.

Alternatively, you could add a small button next to the input, i.e. 'Open' or 'Test' or an external link icon.

Thank you for your answer. It makes a lot of sense. – Amritha Menon Feb 28 '18 at 20:29 — Amritha Menon, Feb 28 '18 at 20:29

score 0 · Answer 2 · answered Feb 27 '18 at 21:58

Simply, if you are printing the URL for the user on their profile page, sure you can just print it as follows:

<a href='$url'>$url</a>

That's PHP but of course you can do this in any language. I'm not sure if this answers your question since you ask if it can be printed "inside" the field which isn't possible/doesn't make sense.

HOWEVER, think about security. Remember the user can enter any malicious URL into this field, so you need to be aware of who you are potentially linking this to on your website/application.

Useful resources:

URL HTML field: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url

Validate URL format with Django (does not check if malicious or not though): How can I check if a URL exists with Django’s validators?

How do I create a hyperlink inside an input text field in html?

2 Answers2