KCI-KANBAN/app/views/Boards/Create.asp

<div class="row justify-content-center">
  <div class="col-md-6">
    <div class="d-flex align-items-center mb-4">
      <a href="/boards" class="btn btn-sm btn-outline-secondary me-3">
        <i class="bi bi-arrow-left"></i>
      </a>
      <h1 class="h3 mb-0">New Board</h1>
    </div>

    <div class="card shadow-sm">
      <div class="card-body">
        <form method="post" action="/boards">
          <div class="mb-3">
            <label for="name" class="form-label">Board Name</label>
            <input type="text" class="form-control" id="name" name="name"
                   placeholder="e.g. Sprint 1" autofocus required />
          </div>
          <div class="mb-3">
            <label class="form-label text-muted small">URL Slug <span class="text-secondary">(auto-generated)</span></label>
            <div class="form-control bg-light text-muted" id="slug-preview" style="min-height:38px;">&nbsp;</div>
          </div>
          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">Create Board</button>
            <a href="/boards" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  var nameEl = document.getElementById('name');
  var preview = document.getElementById('slug-preview');
  nameEl.addEventListener('input', function () {
    preview.textContent = slugify(nameEl.value) || ' ';
  });
  function slugify(s) {
    return s.toLowerCase()
      .replace(/&/g, 'and')
      .replace(/[^a-z0-9\s-]/g, '')
      .trim()
      .replace(/[\s]+/g, '-')
      .replace(/-+/g, '-');
  }
})();
</script>