"Creating a link to a button with the type of 'submit' in HTML - a step-by-step

Found the solution on this interesting page:

In a list, there's a button:

<form>
    <ul>
        <li>
            <a href="account.html" class="button">
                <button type="submit">Submit</button>
            </a>
        </li>
    </ul>
</form>

I attempted the following code:

<form action="account.html">
    <button type="submit">Submit</button>
</form>

However, none of the methods seem to be effective. What adjustments should I make in my code to successfully link the button to the account.html page?

The CSS styling applied is as follows:

a.button
{
    margin: auto;
    padding: 8px 16px;
    border: none;
    background: #333;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: .09em;
    border-radius: 2px;
    margin-top: 2%;
    font-size: 1.5vw;
    text-decoration: none;
}

Answer №1

HMTL:

<ul>
    <li>
        <a href="submission.html" class="button">Send</a>
    </li>
</ul>

CSS:

a.button {
    margin: auto;
    padding: 8px 16px;
    border: none;
    background: #333;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: .09em;
    border-radius: 2px;
    margin-top: 2%;
    font-size: 1.5vw;
    text-decoration: none;
}

MODIFICATION:

HTML:

<form action="submission.html" method="GET">
    <!-- Other fields -->

    <ul>
        <li>
            <input type="submit" class="button" value="Send">
            <!-- or -->
            <button type="submit" class="button">Send</button>
        </li>
    </ul>
</form>

CSS:

input.button {
    /* Your styles go here */
}

/* or */

button.button {
    /* Your styles go here */
}

Answer №2

It is possible that the second option will be successful. Alternatively, you have the choice to navigate to the input field rather than pressing the button.

<form action="profile.html">
    <input type="submit" value="Enter">
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the page loads in the React platform, a section of the footer unexpectedly overlaps with another component

After working on this section some time ago, I returned to find a strange behavior that I couldn't fix by changing the CSS or wrapping components in divs. If you want to see the issue, check out this screenshot: issueReact To view the code where the ...

Cursor or caret bleeding through overlay on Internet Explorer

Currently, I am working on a pre-existing website called www.shopthethirdfloor.com. When using Internet Explorer, if you navigate to the products menu, select the search box, and then scroll down so that the search field goes underneath the menu overlay ...

Converting an HTML table into a visual image

I've encountered an issue. My task involves transferring an HTML table to a PDF using fpdf. Is there a way to transform an HTML table into an image (via URL link)? ...

Tips for showcasing a string value across various lines within a paragraph using the <br> tag for line breaks

I'm struggling to show a string in a paragraph that includes tags to create new lines. Unfortunately, all I see is the br tags instead of the desired line breaks. Here is my TypeScript method. viewEmailMessage(messageId: number): void { c ...

Different Types of Buttons in HTML

As someone who is new to the world of HTML coding and JavaScript, I have a question about button types. According to the W3Schools website, there are three types of buttons: <button type="button|submit|reset"> First question: Why do we need a for ...

Steps for importing a JavaScript file from Landkit into a Vue project

Currently, I am working on an interesting project and utilizing Vue with Landkit Bootstrap. However, I am encountering issues with the JavaScript behavior of the Landkit component. I usually import the following links in my index.html file, but in the new ...

Tips on Getting Your Contact Form Operating Smoothly

Hey everyone, I'm exploring the world of web design and have a question about getting my contact form to work on my current theme. Below is the HTML code I am using: I would greatly appreciate it if someone could help me with coding the PHP file; doe ...

Using both PHP and HTML to create a select tag

I'm new to PHP and HTML and I'm trying to create a form with three drop-down lists (select tags). However, when I select an option from one list, the values in the other two lists disappear. Should I save the selected values when submitting the f ...

The issue encountered is a TypeError stating that it is unable to retrieve properties of an undefined value, specifically in relation to the 'imageUrl

When I include the following line of HTML code: <td> <img align="center" [src]="productByBarCode.imageUrl" /> </td> An error is thrown by the console: ERROR TypeError: Cannot read properties of undefined (reading &a ...

Preventing Internet Explorer from automatically scrolling to the top of the page when a new HTML element is dynamically inserted using

On my webpage, I have an ASP:Grid with a small copy button in each row to copy the text inside that cell. The javascript function I created for copying the text is as follows: var copyText = function (textToCopy) { $(".copy").append("<textarea id=&ap ...

Tips for dividing HTML code on a page into individual nodes

I am looking to extract the HTML content from a website and then parse it into nodes. I attempted the following code: function load() { $(document).ready(function () { $.get("https://example.com/index.html", function (data) { const loadpage ...

The div within the button is failing to properly adjust to height settings

Check out this Fiddle I'm currently working on a social thumbs up button and I've encountered some challenges. In my button design, I have included a second div to accommodate the right side of it. However, despite trying to adjust its height us ...

Removing scrollbar from table in React using Material UI

I successfully created a basic table using react and material UI by following the instructions found at: https://material-ui.com/components/tables/#table. The table is functioning properly, but I am finding the scrollbar to be a bit inconvenient. https:// ...

Choose a HTML element <a> containing a hyperlink reference and a nested child element <li>

Does anyone know of a way in javascript/css to select the (n) <li> in my code, while also specifying that the <li> must have a parent with the current <a> tag containing a specific href link? <a href="www.link.com">CATEGORY NAME& ...

The dropdown height feature is experiencing issues in the Chrome browser

3 radio buttons and a single select box are displayed on the page. When clicking on the first radio button, the select box should show contents related to the first radio button. However, when selecting the second or third radio buttons, the select box hei ...

The function of the 'Class' attribute is not functioning properly

I am currently working on a search field with a drop-down menu that determines the type of data being searched. This, in turn, dictates the input type for the search field. For example, if I am searching by "name" or "ID number", the input type is set to t ...

Utilizing JSP to trigger a servlet upon loading without the use of script

Is there a way to automatically call a servlet when my JSP page is loaded? Currently, I have a link like this: <a href="ContentServlet?action=userContents">Homepage</a> However, I would like the servlet to be called without having to click th ...

CSS problem: HTML element moving to the right upon clicking

Currently, I am utilizing a jQuery popup to present additional information to users. The setup involves having a link on the page that triggers the popup to appear from the top. The popup script being used is sourced from CodePen. However, an issue arises ...

PHP and AJAX allow for seamless data retrieval without the need for page refreshing, and the data can be easily displayed in a modal window

I am currently encountering an issue with sending data to another page without refreshing. I am able to send the data as text, but for some reason, I am unable to send it as a modal. Why might this be happening? Here is an image of my current page https:/ ...

Playing back an Audio object using JavaScript

I'm facing an issue with replaying an audio sound every time the game starts in my Cocos2d javascript code. The sound plays correctly the first time, but subsequent attempts to play it result in no sound being heard. Below is my code snippet: var my ...