Incorrect HTML formatting

Struggling with my attempt to create a basic login page, I encountered an issue. A specific input within a form nested in a table keeps jumping to the top left corner of the page. Below is the structure of my code:

<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <table class="center">
            <tr>
                <td>
                    <p style="size: 16px; font-family: Comic Sans MS">LOGIN</p>
                </td>
            </tr>
            <tr>
                <td>
                    <form>
                        <input type="email" name="mail"><br>
                        <input type="password" name="password"><br>
                        <input type="reset"></td>
                    </form>
                    <input type="submit" name="submit">
                <td>
            </tr>
        </table>
        
    </body>
</html>

In addition to the HTML markup, here are a couple lines of CSS:

table.center {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

The 'submit' button continues to misbehave and refuses to stay put.

Your assistance is greatly appreciated.

htmlcssformsformattinghtml-input

Answer №1

Make sure to properly nest the td around the form in your code. The /td tag needs to be placed after the submit button to ensure that both the form and the submit button are within the same cell.

Check out the revised code below:

<style>
table.center {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
</style>
<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <table class="center">
            <tr>
                <td>
                    <p style="size: 16px; font-family: Comic Sans MS">LOGIN</p>
                </td>
            </tr>
            <tr>
                <td>
                    <form>
                        <input type="email" name="mail"><br>
                        <input type="password" name="password"><br>
                        <input type="reset">
                        <input type="submit" name="submit">
                    </form>
                    
                </td>
            </tr>
        </table>
        
    </body>
</html>

Answer №2

Have you considered placing the submit element inside a form tag? Alternatively, you could simply use a button instead. It's possible I may be mistaken on this, but it's worth a shot.

<form>
    <input type="email" name="mail"><br>
    <input type="password" name="password"><br>
    <input type="reset"></td>
    <input type="submit" name="submit">
</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

Dynamic use of a mixin in LESS allows for greater flexibility in

Is it possible to dynamically call a mixin in Less CSS? An interesting use case could be creating a style guide: // Define the mixin that needs to be called .typography-xs(){ font-family: Arial; font-size: 16px; line-height: 22px; } // A mixin att ...

csslessmixins

Retrieve the $_POST data from form elements that have a class attribute instead of an id

Is there a way to extract the $_POST data from all the selects on the page when the user can use Javascript to add an undefined number of sorts, given that $_POST expects ids instead of classes? html file - include_sorts.php <div class="sorts"> ...

phphtmlpost

Angular collapsible panels and floating pop-up windows

I have implemented the Angular UI Bootstrap accordion and popover functionality from http://angular-ui.github.io/bootstrap/. However, I am facing an issue where the popover is only displaying inside the accordion and creating an overlay. Here is the HTML ...

cssangularjsangular-ui-bootstrap

Creating parallel lines utilizing pseudo elements

Can someone assist me in drawing double lines under my paragraph using pseudo elements only without using display block? Here is my code snippet with display block: p:after { content: ""; display: block; width: 40px; margin: 20px auto 0; bord ...

csspseudo-element

Why isn't the class applying the color to the Angular span element?

My Angular application generates text that needs to be dynamically colorized. To achieve this, I inject a span element with a specific class into the text output like so: Some text <span class="failResult">that's emphasized</span> and oth ...

htmlcssangular

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

To achieve a text color that contrasts well with any background, I need to make sure it's either black or white. The background in my app can vary in color and format, so finding the perfect solution has been challenging. Using mix-blend-mode doesn&a ...

javascriptcssangularlessbackground-color

Modifying the array structure will deselect all individual <Input> elements that have been iterated

Hoping to create a system for adding/removing sub-items with buttons that increment/decrement slots in an array, where input fields are automatically added and removed: <div *ngFor="let item of itemsInNewOrder; let i = index"> <input [(ngModel) ...

javascripthtmlarraysangular

Applying Tailwind styles to dynamically inserted child nodes within a parent div

Currently, I am in the process of transitioning my website stacktips.com from using Bootstrap to Tailwind CSS. While initially, it seemed like a simple task and I was able to replace all the static HTML with tailwind classes successfully. However, now I ha ...

javascriptcsstailwind-csstailwind-elements

Backdrop filter defined in SVG is not showing up in Safari and Chrome browsers

Exploring an interesting example (taken from this source), showcasing the application of the same feTurbulence/feDisplacementMap SVG filter to two HTML elements. One element uses a CSS filter(), while the other employs a CSS backdrop-filter(). On Chrome, b ...

csssvgfirefoxsafaricross-browser

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links. Despite trying different float ...

csshtml

Is it possible to use the same identifier for both the name and id attributes in HTML?

In the world of coding, the "name" attribute is often used in server-side programming to send name/value pairs in requests. On the other hand, the "id" attribute is commonly utilized in client-side programming such as Javascript and CSS. However, both att ...

javascripthtmlcss

Error: An unusual symbol "/" was encountered during the compilation of EJS in Node.js with MongoDB

When attempting to use <% include ./partials/messages %>, <%= include ./partials/messages %>, or even <%= include ./partials/messages { %> within my file <!-- REGISTER.EJS --> <div class="row mt-5"> <div class="col-md ...

node.jsmongodbformattingejsweb-development-server

Position the final offspring adjacent to the one that came before it using Flexbox

I am trying to figure out how to position the last child (CVV) next to the previous one (Expiry), so they are on the same row: .form-col-1--cc { display: flex; flex: 30%; flex-direction: column; text-align: right; align-items: flex-end; } < ...

htmlcssflexbox

Implement Logo Size Reduction on Scroll in Navigation Bar

My design includes a div with a height of 120px, larger than the 75px navbar. When scrolling begins, I want the logo to transition to match the height of the navbar. Despite my efforts to toggle a CSS class, I am unable to achieve the desired effect. What ...

javascriptjquerycss

Ways to display and conceal a div when hovering over another div

Currently, I have 4 divs grouped under the class "menubut." I am attempting to create a small overlay that appears when hovering over the menubut classes. Additionally, I want another div called "red" to show up about one-tenth of the size of the menubut ...

javascriptjqueryhtmlcss

fullPage.js with linear scroll

Is there a way to implement fullpage.JS without any transitions between slides? I attempted the following setup, but it didn't work as expected: $('#fullpage').fullpage({ licenseKey: 'XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX', ...

javascriptjqueryhtmlfullpage.js

How come modifying the css of one component impacts all the other components?

Issue: I am struggling to make CSS changes only affect the specific component I want, without impacting other elements on the page. My goal is to style my dropdown menu without affecting other text input fields: https://i.sstatic.net/Caidv.png Background ...

cssangular

Clicking on the image will toggle the visibility of the parent container

I am currently working on a layout and am seeking assistance with a specific feature. The task at hand involves a container that has a set height of 288px and contains an image with a height of 576px. The requirement is that when a user clicks anywhere wit ...

jqueryhtmlcss

Designing GWT FlexTable using pure CSS styling

Is there a way to style a GWT FlexTable using CSS alone? The API doesn't provide information on available CSS classes. Are there no predefined classes and do I need to define them myself? I am particularly interested in styling the "th" element. ...

cssgwtflextable

The HTML page abruptly cuts off halfway without allowing the user to scroll further

As a newcomer to the world of html and css, I am attempting to construct a reporting page that will showcase various script outputs. However, I am running into an issue where only half of my page is displayed with a scroll bar, whereas I would like the o ...

htmlcssscrollheightoverflow