Step 2

We employ HTML forms to collect user input. Copy the following snippet to the body section of index.html file: 

<form>
  <label for="cnumber">Card number</label>
  <br/>
  <input type="text" id="cnumber" name="cnumber" placeholder="Valid card number">
  <br/>
  <fieldset>
    <legend>Expiration Date</legend>
    <label>
      Month: <input type="number" id="month" name="month" placeholder="MM">
    </label>
    <label>
      Year: <input type="number" id="year" name="year" placeholder="YYYY">
    </label>
  </fieldset>
  <label for="cvv">CVV</label>
  <br/>
  <input type="text" id="cvv" name="cvv" placeholder="Card verification value">
  <br/>
  <input type="submit" id="submit">
</form>

Take a moment and study the content of the above snippet:

  • The <form> tag is used to create an HTML form. The form element is a container for different types of input and other related elements.

  • The <input> tag is used to create an input field. An input element can be displayed in many forms. For example, using type="submit" displays a submit button whereas type="text" defines a single-line input field for text input.

  • The input for expiration date ("month" and "year") are numerical inputs. We kept the credit card number and CVV fields as text inputs because some credit cards have numbers (or CVV) that start with 0.

  • The <label> tag defines a label for many form elements. When possible, the for attribute of the <label> tag should be equal to the id attribute of the input element to bind them together. (This is helpful for screen-reader users.)

  • The <fieldset> tag defines a group of input fields.

  • The placeholder attribute is typically used to describe or hint at the expected value of an input field.