Html form add links

How to create a button to add URL links in the form

Does anyone know how to add like a link button into a form? For example, a user clicks a + button and they can add an URL. They can add another URL if they wish and remove any links if required. Would be good to have validation for links as well. I know for validation of the URL I can use «Check if a JavaScript string is a URL», but will need something that will validate all links if multiple have been added. The best way to explain what I am trying to do is by looking at «Can I insert a hyperlink in my form?» in the form builder. I just want to add links, and I don’t need to display text or anything like that.

2 Answers 2

Is this what are you looking for?
Your question is a bit unclear.

       
Add link 
   

Источник

Is it possible to place a link inside field?

Tag omission in text/html:
No end tag.

which means it may not contain HTML.

Please Login or Register to view your tracking link. 

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

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

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.

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

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

You may then add whatever contents and classes you like that a 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 that is called when the content changes.

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

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.

 p.input < width:250px; font-size:12px; background:#fff; border-color:#999; border-width:1px; border-style:solid; padding:3px; >p.input a 
Please Login or Register to view your tracking link.
 

You could add a function call when clicking on it:

Источник

Use a normal link to submit a form

I want to submit a form. But I am not going the basic way of using a input button with submit type but a a link. The image below shows why. I am using image links to save/submit the form. Because I have standart css markup for image links I don’t want to use input submit buttons. I tried to apply onClick=»document.formName.submit()» to the a element but I would prefer a html method. Any ideas?

use button and css it to display the image or use javascript, there’s no real way to make simple href to submit a form without javascript.

Your reason for doing this sounds like a false economy. Better to just come up with a standard css for submit buttons and use forms the way they were designed to be used. There are a pile of button css techniques describe here: tripwiremagazine.com/2009/06/…

7 Answers 7

Two ways. Either create a button and style it so it looks like a link with css, or create a link and use onclick=»this.closest(‘form’).submit();return false;» .

Aaaaaaaand here’s a reference for how to style a button as a link: stackoverflow.com/questions/1367409/…

@MahdiJazini a lot of people disable JavaScript by default which can be intrusive and affect performance in some cases. If JavaScript fails, it can break the whole website (e.g. using a CDN without local fallback and the third-party domain is blocked). If there is an HTML error, you can still use the website. Developers should follow progressive enhancement principle instead.

If you want to support users without javascript, do the first option described in this answer, style a button like a link. For instance input[type=submit].link < border: none; background: none; display: inline; color: blue; text-decoration: underline; >and

You can’t really do this without some form of scripting to the best of my knowledge.

Just styling an input type=»submit» like this worked for me:

Tested in Chrome, IE 7-9, Firefox

just for the record: you should select the appropriate input element using CSS selectors without attaching a class to the HTML element.

It’s a semi-established coding practice, generally leaves behind cleaner html. but it’s not a huge deal

You are using images to submit.. so you can simply use an type=»image» input «button»:

. or a element with an element in it.

Here’s the MDN link for this in case anyone else wanted a source: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

Definitely, there is no solution with pure HTML to submit a form with a link ( a ) tag. The standard HTML accepts only buttons or images. As some other collaborators have said, one can simulate the appearance of a link using a button, but I guess that’s not the purpose of the question.

IMHO, I believe that the proposed and accepted solution does not work.

I have tested it on a form and the browser didn’t find the reference to the form.

So it is possible to solve it using a single line of JavaScript, using this object, which references the element being clicked, which is a child node of the form, that needs to be submitted. So this.parentNode is the form node. After it’s just calling submit() method in that form. It’s no necessary research from whole document to find the right form.

 
 
Enter your name
 First Name  
Last Name  
 Submit here 
 

Suppose that I enter with my own name:

I’ve used get in form method attribute because it’s possible to see the right parameters in the URL at loaded page after submit.

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum 

This solution obviously applies to any tag that accepts the onclick event or some similar event.

this is a excellent choice to recover the context together with event variable (available in all major browsers and IE9 onwards) that can be used directly or passed as an argument to a function.

In this case, replace the line with a tag by the line below, using the property target , that indicates the element that has started the event.

Источник

How can I submit a POST form using the tag?

All well and good, but you’ve still chosen to answer a different question than was asked. And given that erasable ink is, in fact, a viable product produced on an industrial scale.

FWIW, I sympathize with your answer and it’s what I personally would rather see in web apps I have to maintain. I’m just explaining the downvote — which I didn’t leave, by the way. 😉

You need to use javascript for this.

You have to use Javascript submit function on your form object. Take a look in other functions.

In case you use MVC to accomplish it — you will have to do something like this

I just went through some examples here and did not see the MVC one figured it won’t hurt to post it.

Then on your Action in the Controller I would just put On the top of it. I believe if you don’t have on the top of it it would still work but explicitly putting it there feels a bit safer.

Unfortunately, the obvious way of just styling the button in CSS as an anchor tag, is not cross-browser compatible, since different browsers treat

The above example will be showing ‘Two’ and transmit ‘parameter:One’ in FireFox, while it will show ‘One’ and transmit also ‘parameter:One’ in IE8.

The way around is to use hidden input field(s) for delivering data and the button just for submitting it.

Note, that this method has a side effect that besides ‘parameter:blaah’ it will also deliver ‘delete:Delete’ as surplus parameters in POST.

You want to keep for a button the value attribute and button label between tags both the same (‘Delete’ on this case), since (as stated above) some browsers will display one and some display another as a button label.

Источник

Every developer has a
tab open to
Stack Overflow

A public platform building the definitive collection of coding questions & answers

A community-based space to find and contribute answers to technical challenges, and one of the most popular websites in the world.

A private collaboration & knowledge sharing SaaS platform for companies

A web-based platform to increase productivity, decrease cycle times, accelerate time to market, and protect institutional knowledge.

Thousands of organizations around the globe use Stack Overflow for Teams

Capture your company’s knowledge and context in a discoverable format to unblock your team

Increase productivity

If somebody somewhere has the right answer, suddenly you have it too. Collaborate better in a remote-first world.

Accelerate time to market

Shorten the time between initial idea and complete product. Take delays and misinformation out of the equation.

Protect institutional knowledge

People come and people go, but if you capture their contributions in one central place, that expertise sticks around.

Ensure your company stays on course

Here are just a few types of technologists that we help.

DevOps engineers

Shipping new products and features requires teamwork and coordination. Forget checklists and long docs no one ever reads.

Data scientists

Business decisions are better when backed by data. Give visibility to the data that support your strategies.

Software engineers

Help engineers be more efficient and streamline knowledge sharing using a tool they already love and trust.

Support teams

Level up your support by providing information to your customers using a natural interface: questions and answers.

Engineering leaders

Help your team get the information they need to do their job — reduce burnout and help engineers grow and learn together.

Free

Always free up to 50 teammates

Basic

Business

Enterprise

A Forrester Consulting study shows 191% return on investment with Stack Overflow for Teams.

The world’s largest telecom firm saved $10M in deflected support cases with our centralized knowledge base.

Subject-matter experts at software platform Unqork had 27% more time to work on projects after using Teams.

Integrates with and improves other tools

All plans come with integrations for ChatOps tools Slack & Microsoft Teams in order to cut down on pings, limit distractions and make the tools even more powerful. Business and Enterprise customers get access to Jira, GitHub & Okta integrations.

Stack Overflow for Teams has been a resource for our entire company. Not only for developers to solve problems, it’s also enabled our sales field to answer technical questions that help them close deals.

Engineers should help solve the hardest questions, the unknowns, where being familiar with how the product was built is essential. But we don’t want to keep answering solved problems over and over again. That’s where Stack Overflow for Teams really helps.

As we started to use [Stack Overflow for Teams] and saw how nice it was to have a repository of information, we started to see it spread to other teams. Our customer support team started using it, our people success team started using it, next thing we knew, we had [Slack] integrations all over the place.

What we love about Stack Overflow for Teams is that it’s a very dynamic tool…there’s just so many ways to use this as a liaison between different teams and different knowledge bases.

Additional products that reach and engage developers & technologists…

Explore technical topics and other disciplines across 170+ Q&A communities

From Server Fault to Super User, much of the Stack Exchange network continues our mission to empower the world to develop technology through collective knowledge. Other sites on the Stack Exchange network further encourage knowledge sharing across topics such as cooking and medicine. Explore the network

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.21.43541

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник