HTML link on input button - html

I want to know how do i put link on input button in html pages. As of now i am trying to make a link on input button by putting hyperlinks around buttons but can it be possible with any other method to navigate to another page?
curretly i am doing like this:
<html>
<head>
<title>Practise 20</title>
<style>
input[type="submit"]{border:none; background:#000; color:#fff}
</style>
<body>
Click on Button to navigate the Pages
<form>
<input type="submit" Value="Go">
</form>
</body>
</html>

you can put link on input buttons by java script.. try like this
<html>
<head>
<title>Practise 20</title>
<style>
input[type="submit"]{border:none; background:#000; color:#fff}
</style>
</head>
<body>
Click on Button to navigate the Pages
<form>
<input onClick="window.location.href='put your page url here'" type="submit" Value="Go">
</form>
</body>
</html>

You might get it to work better with a simple javascript.
<script type="text/javascript">
function google() {
window.location = "http://google.com";
}
</script>
And as of the HTML part:
<input type="submit" value="Go" onClick="google()">

Attribute formaction works pretty well. Here is an example:
<input type="submit" formaction="login.html" value="Submit to another page">

I want to know how do i put link on input button in html pages?
You don't. Links are links. Buttons are buttons. One cannot be placed inside the other in HTML.
If you want a link that looks like a button, then use a link and apply CSS to make it look the way you want.

<form action="http://www.google.com"><input type="submit" Value="Go"></form>
Please note that you should not use submit buttons for hyperlinking purpose. Submit button is for submitting a form, therefore linking it to a page send the wrong info to the user. Still you can do it; if you need to.

You can definitely do this. You can have a form with a post action to the route, then use bootstrap classes to disguise the input as a nav link
<form action="/Rooms/Edit/:id" method="POST" style="margin: 0 1rem;">
<input class="btn btn-link" value="Edit Rooms" type="submit" style="font-weight: bold; text-dectoration:none">
</form>

<input type="submit" Value="Go">
Very simple! Just put some bootstrap classes into it and add role as button. That's it!
<a class="btn btn-success" role="button" href="http://www.google.com" target="self"><input type="submit" Value="Go"></a>

Related

Why do people put value="Submit" for button element in a form if it won't be posted

I have seen people do:
<form ..>
<button type='submit' value='Submit'>Sign Up</button>
</form>
Why do they need value='Submit' if it isn't even submitted to the server? Is it for accessibility?
Forms can have more than one submit button. If you also give each button a name, then you can use the value after submitting to see which one had been clicked.
<!DOCTYPE html>
<html>
<head>
<title>test submit</title>
</head>
<body>
<form action="#" method="get">
<button type='submit' name="clicked" value="thefirst">First</button>
<button type='submit' name="clicked" value="thesecond">Second</button>
</form>
</body>
</html>
If you submit this with the first button, the parameter posted will be clicked=thefirst, while with the second one it will be clicked=thesecond.
Of course in this case a much saner approach would be to give the buttons different names. but you get the idea.
All programmer use this. Because its is good understanding to another programmer to review already written code. It is not compulsory.

Navigation from a HTML file into another

I have 2 html files in my desktop(login.html & firstpage.html). I have a button in login.html. when i pressed that button i need to navigate to firstpage.html screen.
I have tried like below; I wrote this in login.html page, But it's not working,
<form name="myform">
<input type="button" value="Enter" width="100px" onclick="<a href ='C:\Users\Desktop\firstpage.html'</a>">
</form>
Could anyone please help me to solve this issue.Thanks
Change the code in
<form name="myform" action="firstpage.html">
<input type="submit" value="Enter" width="100px">
</form>
To just link the two files, all you need is to have them in the same folder, and use this line:
<input type="button" value="Enter" width="100px" onclick="document.location='firstpage.html'">
You do not need a form to do this.
Your onclick handler does not need html in it, just the javascript.
You could also do:
Go to page
Make Slight changes in your code like this
</input>
This should work... :)

Creating a input link button

hello all a quick question..
i am building a static html page, and would like to like one page to another using a button, now using a link is the easier option but i would like the effect of a button without any javascript going off..
so i would like to use a input button but it to link to a html page like an tag can href.
i was thinking along the lines of this example but without the js..
<form>
<input type="button" value="Read more" class="button" onclick="window.location.href='testimonials.html'">
</form>
this doesnt work but i am looking for this functionality?? is it possible?
Just submit the form to the URL.
<form action="testimonials.html">
<input type="submit" value="Read more">
</form>
… but buttons are supposed to do stuff. Links go places. Don't send people mixed messages, use a link.
you've misspelled "onclick" :)
EDIT: if you want to avoid javascript, you can create a button-like link with CSS:
Read More
Try this code:
<form>
<input type="button" value="Read more" class="button" onlick="window.location='testimonials.html'">
</form>

how use button in internet explorer?

on my source i use
<a href='pag.php'><input type='button' value='Next'/></a>
in firefox and crome when i click on the button i'm redirected to pag.php
but in ie it don't work. how can i do?
The simple way is:
<input type='button' value='Next' onclick="location.href='pag.php'"/>
Form buttons are meant to be used for submitting a form to the page specified in the action attribute, not to be wrapped in <a> tags, which is bad syntax. If this is for a multi-part form, simply add the action attribute to the <form> tag like
<form method="POST" action="pag.php">
<!-- your form elements -->
<input type="submit" value="Next">
</form>
And that will submit the form to pag.php. Otherwise, just use a link, or, if you insist on having it look like a button, use an image link like:
<img src="image_that_looks_like_a_button.png">
Hope this helps.
Instead of what you are doing right now, go for:
<form action="pag.php" method="post" enctype="multipart/form-data">
<INPUT TYPE="submit" name="Submit" value="Next">
</form>
But if you want image instead in place of button, go for:
<INPUT TYPE="image" SRC="image location" ALT="Next">
Hope it solves your problem! :)

Problem with form buttons in IE

I have buttons on a page that look like:
<p>
<a href="view.php">
<input type="button" name="view" value="View Database" />
</a>
</p>
IE does not support these buttons or multiple buttons I am not sure which one. Does anyone know how to fix this to work with IE?
Embedding a button within an <a> tag is not normally done, and really doesn't make any sense. If you want your link to look like a button, then just use the <input> tag with some script on the onclick event, or use css to make your link look button-ish (start by using display:block or display:inline-block);
You can't put an input into the tag, instead, you can create a form, and change your button to a submit one. Then you can choose the target url in the form, like this:
<form action="view.php">
<input type="submit" name="view" value="View Database" />
</form>
I would recommend this over using javascript, because buttons are not designed for navigating a site. If you want to submit information, which is what they are used for, you won't be able to do it so cleanly using javascript.
What exactly are you trying to achieve? If you want a custom button to redirect to view.php, you can use onclick:
<input type="button" name="view" value="View Database" onclick="window.location.href='view.php';" />
or something similar.
<input type="button"
onclick="javascript:document.location='view.php';"
value="View Database"/>
Try with this ugly monster:
<input type="button" name="view" value="View Database" onclick="javascript:window.location='view.php'"/>