<button type="button">フォームの外</button>

<form>
  <div>
    <label for="name">名前</label>
    <input type="text" id="name" />
  </div>
  <div>
    <label for="email">email</label>
    <input type="email" id="email" />
    </div>
</form>
<button type="button">フォームの外</button>
form {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  gap: 8px;
}

form:focus-within {
  background-color: yellow;
}

button {
  margin-top: 8px;
  margin-bottom: 8px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.