Неправильное форматирование HTML

#html #css #forms #formatting #html-input

#HTML #css #формы #форматирование #html-ввод

Вопрос:

Я пытаюсь создать простую страницу входа в систему, но продолжаю сталкиваться с проблемой. Ввод, который я помещаю в форму (которая, в свою очередь, находится в таблице), переходит в верхний левый угол страницы. Вот мой код

 <!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>

У меня также есть пара строк css «code»

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

Я не совсем понимаю, почему плохой ввод «отправить» не останется на месте.

Заранее спасибо за вашу помощь.

1. Привет. Что здесь означает оставаться на месте? Не могли бы вы привести весь css и рабочий пример, а также лучшее объяснение того, как это должно выглядеть.

2. похоже, что это </td> после <input type="reset"> того, как это должно быть <br> , или вы также можете удалить его.

3. Я бы хотел, чтобы кнопка находилась под входными данными, так как все они расположены по центру, но по какой-то причине она переходит в верхний левый угол.

4. @pierre СПАСИБО, я пропустил это. Извините, что потратил ваше время на такую мелочь. Я очень благодарен, хотя

Ответ №1:

Ваше вложение td вокруг формы неверно. /td должен быть после отправки, чтобы вся форма плюс отправка были в ячейке.

Вот измененный код:

 <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">
                    </form>
                    <input type="submit" name="submit">
                    </td>
                <td>
            </tr>
        </table>
        
    </body>
</html>

1. Большое вам спасибо. Я был так одержим этим, что просто не мог этого видеть. Спасибо вам большое

2. @EmanuelePolonia ответ вроде бы правильный, но не до конца. Вы закрываете </td>, но есть открывающий <td> без содержимого или закрывающего тега.

Ответ №2:

Попробуйте поместить элемент отправки внутри формы? В противном случае вы можете просто сделать кнопку. Возможно, я ошибаюсь, но стоит попробовать.

 <form>
    <input type="email" name="mail"><br>
    <input type="password" name="password"><br>
    <input type="reset"></td>
    <input type="submit" name="submit">
</form>

1. конечно, вы можете добавить идентификатор в форму, <button type="submit" form="my-form">Submit</button>

2. Спасибо за ваш ответ. Оказывается, я так сильно подчеркивал эту ситуацию, что упустил из виду простой </td>, который был неуместен.