HTML 레이블: 단어를 컨트롤에 연결

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Label click test</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
  .box { background: #fff; border-radius: 12px; padding: 14px; border: 2px solid #cfe9d7; }
  .box.no { border-color: #f3d1c8; }
  h2 { font-size: 13px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .4px; }
  .row { margin-bottom: 14px; }
  label, .fake { cursor: pointer; }
  input[type="text"] { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 7px 9px; font: inherit; }
  #log { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #1d2330; color: #e5e7eb; font: 13px/1.5 ui-monospace, Consolas, monospace; }
</style>
</head>
<body>
<div class="grid">
  <div class="box">
    <h2>Connected</h2>
    <!-- for="..." matches the id of the control -->
    <div class="row">
      <input type="checkbox" id="news-a">
      <label for="news-a">Send me the newsletter</label>
    </div>
    <div class="row">
      <label for="city-a">City</label>
      <input type="text" id="city-a">
    </div>
  </div>
  <div class="box no">
    <h2>Not connected</h2>
    <!-- plain text beside the control: nothing links them -->
    <div class="row">
      <input type="checkbox" id="news-b">
      <span class="fake">Send me the newsletter</span>
    </div>
    <div class="row">
      <span class="fake">City</span>
      <input type="text" id="city-b">
    </div>
  </div>
</div>
<div id="log" aria-live="polite">Click the words, not the boxes.</div>

<script>
  const log = document.getElementById('log');
  // report what each control did, so a click on the text is visible
  document.querySelectorAll('input').forEach((el) => {
    const side = el.id.endsWith('-a') ? 'Connected' : 'Not connected';
    el.addEventListener('change', () => {
      if (el.type === 'checkbox') log.textContent = side + ': checkbox is now ' + (el.checked ? 'ON' : 'OFF');
    });
    el.addEventListener('focus', () => {
      if (el.type === 'text') log.textContent = side + ': the City box has focus';
    });
  });
  document.querySelectorAll('.fake').forEach((t) => {
    t.addEventListener('click', () => { log.textContent = 'Not connected: you clicked text, the control did nothing'; });
  });
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Label layouts</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  section { background: #fff; border-radius: 12px; padding: 14px; }
  h2 { font-size: 12px; margin: 0 0 10px; color: #6b7280; text-transform: uppercase; letter-spacing: .4px; }
  input[type="text"], input[type="search"], input[type="email"] {
    width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit;
    border: 1px solid #c7ccd4; border-radius: 8px;
  }

  /* 1. Stacked: the label is a block above the box */
  .stacked label { display: block; font-weight: 600; margin-bottom: 4px; }

  /* 2. Inline: the control sits inside the label, so the whole line is clickable */
  .inline label { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
  .inline input { width: 18px; height: 18px; margin: 0; }

  /* 3. Floating: placeholder=" " lets :placeholder-shown tell empty from filled */
  .float { position: relative; }
  .float input { padding: 18px 10px 6px; }
  .float label {
    position: absolute; left: 11px; top: 12px; color: #6b7280;
    pointer-events: none; transition: .15s;
  }
  .float input:focus + label,
  .float input:not(:placeholder-shown) + label { top: 4px; font-size: 11px; color: #2563eb; }

  /* 4. Visually hidden: invisible on screen, still read by screen readers */
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .search { display: flex; gap: 6px; }
  .search button { padding: 0 14px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; font: inherit; }
</style>
</head>
<body>
<div class="grid">
  <section class="stacked">
    <h2>1. Stacked</h2>
    <label for="full-name">Full name</label>
    <input type="text" id="full-name" autocomplete="name">
  </section>

  <section class="inline">
    <h2>2. Inline (checkbox, radio)</h2>
    <label><input type="checkbox" name="terms"> I agree to the terms</label>
    <label><input type="radio" name="plan" value="month" checked> Monthly</label>
    <label><input type="radio" name="plan" value="year"> Yearly</label>
  </section>

  <section>
    <h2>3. Floating label</h2>
    <div class="float">
      <input type="email" id="mail" placeholder=" ">
      <label for="mail">Email</label>
    </div>
  </section>

  <section>
    <h2>4. Visually hidden (search box)</h2>
    <form class="search" role="search">
      <label for="q" class="visually-hidden">Search the docs</label>
      <input type="search" id="q" placeholder="Search">
      <button type="submit">Go</button>
    </form>
  </section>
</div>

<script>
  // keep the example on this page when the search form is sent
  document.querySelector('.search').addEventListener('submit', (e) => e.preventDefault());
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Settings toggles</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .panel { max-width: 420px; margin: 0 auto; background: #fff; border-radius: 14px; padding: 6px 16px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
  h1 { font-size: 16px; margin: 12px 0 4px; }

  /* the whole row is the label: text and switch are one click target */
  .toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 0; border-top: 1px solid #eef0f3; cursor: pointer;
  }
  .toggle small { display: block; color: #6b7280; font-size: 12px; margin-top: 2px; }

  /* hide the real checkbox from the eye only: it stays focusable and clickable */
  .toggle input {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* the track and knob are drawn from the checkbox state */
  .track {
    flex: none; position: relative; width: 44px; height: 26px; border-radius: 99px;
    background: #c7ccd4; transition: background .15s;
  }
  .track::after {
    content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s;
  }
  .toggle input:checked + .track { background: #16a34a; }
  .toggle input:checked + .track::after { transform: translateX(18px); }
  .toggle input:focus-visible + .track { outline: 3px solid #2563eb; outline-offset: 2px; }
  .toggle input:disabled + .track { opacity: .45; }
  .toggle.off { cursor: not-allowed; color: #9ca3af; }

  #state { margin: 12px auto 0; max-width: 420px; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; background: #1d2330; color: #e5e7eb; font: 13px/1.5 ui-monospace, Consolas, monospace; }
</style>
</head>
<body>
<form class="panel" id="settings">
  <h1>Notifications</h1>

  <label class="toggle">
    <span>Email updates<small>A summary once a week</small></span>
    <input type="checkbox" role="switch" name="email" checked>
    <span class="track" aria-hidden="true"></span>
  </label>

  <label class="toggle">
    <span>Push alerts<small>When someone replies</small></span>
    <input type="checkbox" role="switch" name="push">
    <span class="track" aria-hidden="true"></span>
  </label>

  <label class="toggle">
    <span>Sounds<small>Play a sound for new alerts</small></span>
    <input type="checkbox" role="switch" name="sound">
    <span class="track" aria-hidden="true"></span>
  </label>

  <label class="toggle off">
    <span>Text messages<small>Not available on your plan</small></span>
    <input type="checkbox" role="switch" name="sms" disabled>
    <span class="track" aria-hidden="true"></span>
  </label>
</form>
<div id="state" aria-live="polite"></div>

<script>
  const form = document.getElementById('settings');
  const state = document.getElementById('state');

  // list the switches that are on, the same way the form would send them
  function show() {
    const on = [...new FormData(form).keys()];
    state.textContent = 'On: ' + (on.length ? on.join(', ') : 'nothing');
  }
  form.addEventListener('change', show);
  show();
</script>
</body>
</html>