JSFiddle - React, Tailwind, and code Playground

by Alvaro Montoro

HTML

<div role="alert" class="alert">
  <p>
    <strong>DO NOT DO THIS!</strong> This is a dark pattern and should be avoided
    to protect users' privacy.
  </p>
</div>

<main>
  <h1>Subscribe to our newsletter</h1>
  <p>We will not spam you or send you bad things:</p>

  <form method="post" action="javascript:alertData()">
    <label for="email">Email</label><input id="email" name="email"/>
    <div style="position:absolute;top:-10000in" class="hide-this">
      <!-- Hidden -->
      <label for="name">Full name</label><input id="name" name="name" autocomplete="name" />
      <label for="postal-code">ZIP</label><input id="postal-code" name="postal-code" autocomplete="postal-code"/>
      <label for="firstname">First name</label><input tabindex="-1" id="firstname" name="firstname" autocomplete="given-name" /><br/>
      <label for="lastname">Last name</label><input tabindex="-1"  id="lastname" name="lastname" autocomplete="family-name" /><br/>

      <label for="honorific-prefix">honorific-prefix</label><input tabindex="-1" id="honorific-prefix" name="honorific-prefix" autocomplete="honorific-prefix"/><br/>
      <label for="organization">Organization</label><input tabindex="-1" id="organization" name="organization" /><br/>
      <label for="phone">Phone</label><input tabindex="-1" id="phone" name="phone" autocomplete="tel" /><br/>

      <label for="address">address</label><input tabindex="-1" id="address" name="address" autocomplete="street-address" /><br/>
      <label for="city">City</label><input tabindex="-1"  type="text" id="city" name="city" autocomplete="address-level2" /><br/>
      <label for="state">State</label><input tabindex="-1" id="state" name="state" autocomplete="address-level1" /><br/>
      <label for="level3">Level3</label><input tabindex="-1" id="level3" name="state" autocomplete="address-level3" /><br/>
      <label for="level4">Level4</label><input tabindex="-1" id="level4" name="state" autocomplete="address-level4" /><br/>
      <label...

CSS

html, body {
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  overflow: hidden;
}

.alert {
  border: 1px solid #800;
  color: #800;
  background: #fdd;
  padding: 1rem;
  font-size: 1.25rem;
  line-height: 1.25;
  max-width: max-content;
}

.alert p {
  margin: 0;
  max-width: 45ch;
}

h1 {
  font-weight: 400;
}

form {
  display: grid;
  grid-template-columns: 100px 1fr; 
}

form label {
  text-align: right;
  padding: 0.5rem;
}

form input {
  max-width: 200px;
  min-height: 1.75rem;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

form button {
  grid-column: 2;
  max-width: 200px;
  min-height: 1.75rem;
  box-sizing: border-box;
}

JavaScript

function alertData() {
  const inputs = [...document.querySelectorAll("form input")];
  alert(inputs.reduce((acc, val) => {
    return `${acc}\n${val.id} = ${val.value}`;
  }, ""));
}

const hiddenFields = [...document.querySelectorAll(".hide-this input")];
hiddenFields.forEach(el => {
  el.addEventListener("input", function() {
    console.log(`${el.id} = ${el.value}`);
  })
});