HTML & CSS Is there a way to mask an URL input as text?

[Liljeqvist]

I am not sure if this belonged in the CSS or JavaScript section.

I am building a CMS application, and I am stuck at creating input fields for buttons.
The user is allowed to enter a link using an URL-type input field, but when I follow the example from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url I am only able to output the entire address for the link, which of course is not exactly pretty.
I much rather have a line that says "Click me" and store the url inside that, but how do I accomplish this through input fields? Is there some way to "mask" it?

For example, if I am manually creating a link, I would simply write:

<a href="url address">Click here</a>

But keep in mind that this is an application that is based on user-inputs. I cannot expect the user to go in and manually create a button and a link inside the HTML file.
So how do I do it with the code below?

<input id="myURL" name="myURL" type="url">

 

[Mutiny]

You would need some Javascript that listens for changes to the "myURL" input box and then injects whatever the value of "myURL" is inside of the href attribute of your link.

What is the context of making the button, ie when a user is editing the button what happens? Is this placing a button on the page, or is this more something that auto-generates the appropriate HTML and places it in a text box, say on an "edit page" sort of screen?

 

[Liljeqvist]

You would need some Javascript that listens for changes to the "myURL" input box and then injects whatever the value of "myURL" is inside of the href attribute of your link.

What is the context of making the button, ie when a user is editing the button what happens? Is this placing a button on the page, or is this more something that auto-generates the appropriate HTML and places it in a text box, say on an "edit page" sort of screen?

It is a form that the user can fill out, which includes uploading an image, adding a title and adding a description. These things will then be sent to a database and then shown on a webpage, where the user can either delete or edit the content they just made. But I also want to allow the user to link to something if they wish to.

Lets say the user made a card. The card contains a picture, a title and some text. Normally cards have a "Read more" or "Click here" button.
So I wanted to add an extra input field where the user has the following options:

"Choose a title for the link"
"Enter the URL for the link"

I was hoping it would not be too complicated, because I realized I will need to use this method if I want the user to add or edit stuff on a navbar.
Basically my application allows the user to add, change or delete all content on the page.

 

[Mutiny]

Could you just have two fields in your database, one for the URL and one for the button text, then when you build the button out after the save just use the button text field from the database?

 

[Tealk]

Without JS you can only make a checkbox which you hide and a label with click here.
After that you have to show the input field via CSS and there the user can enter the URL.

But I think that would be much easier to realize with js.