Putting the `href` attribute around an `input` of

Question

Putting the `href` attribute around an `input` of

Why is the

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<a href="1.html"><input type="submit" class="button_active" value="1"></a>
<a href="2.html"><input type="submit" class="button" value="2"></a>
<a href="3.html"><input type="submit" class="button" value="3"></a>
</body>
</html>

style.css:

* {
    margin: 0;
    padding: 0;
}

/* CSS Buttons: http://www.web4site.de/css/css-buttons.php */
.button {
    padding:0;
    margin:0;
    border:none;
    font-size:14px;
    background: url(../img/button.gif) no-repeat center;
    color: #000000;
    height:27px;
    width:134px; 
    font-variant:small-caps;
}

.button:hover {
    padding:0;
    margin:0;
    border:none;
    font-size:14px;
    background: url(../img/button.gif) no-repeat center;
    color: #FF0000;
    height:27px;
    width:134px; 
    text-decoration:none;
    font-variant:small-caps;
}

.button_active {
    padding:0;
    margin:0;
    border:none;
    font-size:14px;
    background: url(../img/button.gif) no-repeat center;
    color: #FF0000;
    height:27px;
    width:134px; 
    font-variant:small-caps;
}

This setup functions correctly in Firefox...

html css forms button

Answer 1

Answer №1

What is the purpose of placing a submit button within an anchor element? Are you intending to submit a form or navigate to a different webpage? Please clarify.

If you want to submit the form, use the following code:

<input type="submit" class="btn_submit" value="Submit" />

If your goal is to redirect to another page, utilize this code:

<input type="button" class="btn_redirect" onclick="location.href='page2.html';" />

Answer 2

What is the purpose of placing a submit button within an anchor element? Are you intending to submit a form or navigate to a different webpage? Please clarify.

If you want to submit the form, use the following code:

<input type="submit" class="btn_submit" value="Submit" />

If your goal is to redirect to another page, utilize this code:

<input type="button" class="btn_redirect" onclick="location.href='page2.html';" />

Answer 3

Answer №2

The reason it is not functioning properly is due to its lack of logical flow (to the point where HTML 5 clearly prohibits it).

In order to rectify this issue, determine whether you require a hyperlink or a submit button and implement your preferred choice (Tip: Without a form present, a submit button serves no purpose).

Answer 4

The reason it is not functioning properly is due to its lack of logical flow (to the point where HTML 5 clearly prohibits it).

In order to rectify this issue, determine whether you require a hyperlink or a submit button and implement your preferred choice (Tip: Without a form present, a submit button serves no purpose).

Answer 5

Answer №3

<a href="4.html"><input type="text" class="button_active" value="4"></a>
<a href="5.html"><input type="text" class="button" value="5"></a>
<a href="6.html"><input type="text" class="button" value="6"></a>

Give it a shot. Unless you absolutely must stick with the submit type, then the solution I presented should suffice. If you insist on using submit, then all the details mentioned earlier are valid, otherwise, it's nonsensical.

Answer 6

<a href="4.html"><input type="text" class="button_active" value="4"></a>
<a href="5.html"><input type="text" class="button" value="5"></a>
<a href="6.html"><input type="text" class="button" value="6"></a>

Give it a shot. Unless you absolutely must stick with the submit type, then the solution I presented should suffice. If you insist on using submit, then all the details mentioned earlier are valid, otherwise, it's nonsensical.

Answer 7

Answer №4

To correctly place the link location, simply insert it within the action="" attribute of a surrounding form element.

An example of your first link can be seen below:

<form action="example.html">
    <input type="submit" class="button_active" value="Click Here">
</form>

Answer 8

To correctly place the link location, simply insert it within the action="" attribute of a surrounding form element.

An example of your first link can be seen below:

<form action="example.html">
    <input type="submit" class="button_active" value="Click Here">
</form>

Answer 9

Answer №5

I completely agree with Quentin's point of view. It seems irrational to proceed in that manner. This is fundamental in the realm of the Semantic Web ideology. It is imperative to strategize and lay out the elements of your website to accommodate future integration and expansion possibilities. Without abiding by the correct use-case, other web applications or websites will not be able to interact with your content effectively.

Internet Explorer and Firefox operate differently. IE often allows features that are rejected by Firefox and other browsers that adhere to standardized practices.

If your intention is to design buttons without triggering data submission, consider utilizing a combination of DIV elements and CSS styling.

Answer 10

I completely agree with Quentin's point of view. It seems irrational to proceed in that manner. This is fundamental in the realm of the Semantic Web ideology. It is imperative to strategize and lay out the elements of your website to accommodate future integration and expansion possibilities. Without abiding by the correct use-case, other web applications or websites will not be able to interact with your content effectively.

Internet Explorer and Firefox operate differently. IE often allows features that are rejected by Firefox and other browsers that adhere to standardized practices.

If your intention is to design buttons without triggering data submission, consider utilizing a combination of DIV elements and CSS styling.

Answer 11

Answer №6

Completing this task is entirely possible. Simply ensure that the input type submit resides within a form element. Specify the desired redirection link by placing it in the action attribute within the form tag.

Answer 12

Completing this task is entirely possible. Simply ensure that the input type submit resides within a form element. Specify the desired redirection link by placing it in the action attribute within the form tag.

Putting the `href` attribute around an `input` of

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Attempting to implement a functionality that will allow users to easily delete records from the database

How can CSS be instructed to "apply the following most specific rule in order to determine this property"?

Your browser's popup blocker is preventing the file from being downloaded

difficulties switching content between different screen sizes

Is it possible to change a Material UI style without resorting to an HOC?

Creating responsive lines with CSS on top of an image

javascript display hide choose among

What is the best way to limit the range slider before it reaches its maximum point?

An issue occurred during the compilation of an Angular6 project

Locating content inside a span element with tags and spacing in jquery

unable to pass the form data using the post method

Expanding containers with flexbox to allow for flexibility in size

What is the best way to line up several elements in a single column?

JQuery's accordion with the heightStyle set to "fill" is causing a vertical scrollbar

Utilize CSS Animation to bring overlapped images to life

Issue encountered when attempting to connect an external script to a Vue single file component

Photo Collection: Incorporating Images

Tips for adjusting the "active" navigation class across various pages using base.html

Angular element fails to display properly

How can you assign a strokeStyle color to a Canvas using a CSS property?