Payment Form Structure Help - VV

Vladlen_Vronsky · March 31, 2023, 1:57am

Hi There!

Looking for some help and clarification on one of the Web Form sections on Mozilla.

The completed code example looks like this:

While my page looks like this:

Notice the margin issues on the Name, Email, and Password inputs.

This was the code example from the section:

github.com

mdn/learning-area/blob/main/html/forms/html-form-structure/payment-form.html

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Payment form example</title>
    <link href="payment-form.css" rel="stylesheet">
  </head>

<body>
    <form method="post">
        <h1>Payment form</h1>
        <p>Required fields are followed by <strong><span aria-label="required">*</span></strong>.</p>
        <section>
            <h2>Contact information</h2>
            <fieldset>
              <legend>Title</legend>
              <ul>
                  <li>
                    <label for="title_1">

This file has been truncated. show original

While my code is written like so:

My static page is here:
https://payment-form-structure.glitch.me

It looks like my code is the same but the spacing is off - even if I change the dimensions of my screen, the page doesn’t seem to be reactive.

Is there an error on my end that I’m missing here?

Thank you for looking into this!

Cheers,
Vlad

How to structure a web form MDN link:

mikoMK · April 8, 2023, 8:03pm

Hi @Vladlen_Vronsky

When clicking on the running live link in the article (which uses the current code from Github) the form looks like your code.
The iframe source links to https://live-samples.mdn.mozilla.net/en-US/docs/Learn/Forms/How_to_structure_a_web_form/_sample_.a_payment_form.html that seems to be from an old version of the page.

Could you open an issue on the MDN GitHub to report this problem?

Thanks,
Michael

Vladlen_Vronsky · April 11, 2023, 4:54am

Thank you @mikoMK, just submitted the Issue on GitHub: https://github.com/mdn/learning-area/issues/609

mikoMK · April 11, 2023, 5:57pm

Thank you very much.