При щелчке привязки к форме активна ли тогда форма? и могу ли я затем использовать: active в css, чтобы изменить поле в форме

Question

При щелчке привязки к форме активна ли тогда форма? и можно ли тогда использовать: active в css для изменения поля в форме? Моя форма и css ниже. Я надеюсь, что это можно сделать, и что я просто ссылаюсь неправильно. Причина, по которой я этого хочу, заключается в том, что на моей реальной странице ссылка проходит долгий путь вниз по странице, но ничто не указывает на ее активность. В идеале я хочу курсор или что-то на go для первого ввода, но я согласен с изменением цвета ввода на желтый или что-то еще. Я просто подумал, что это будет легче понять, просто изменив текст. Надеюсь, что это имеет смысл.

<a href="#form2">Go to Section 2</a>

  <form id="form2" action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
 </form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>  

 css
 form2:active > input > {    value: "George";}

Answer 1

Если вы хотите изменить CSS поля ввода, когда кто-то щелкает по нему, вы можете использовать селектор :focus.

ОБНОВЛЕНИЕ

если вы хотите активировать фокус на поле, вы можете использовать, например:

<a href="#" onclick="document.forms[0].fname.focus()">Focus the field</a>

, вы также можете изменить фон формы, используя

<a href="#" onclick="document.forms[0].style.backgroundColor='yellow'" ></a> , как в этом примере:

var link2 = document.getElementsByTagName("a")[1];
link2.onclick = function(event) {
  event.preventDefault();
  document.forms[0].style.backgroundColor = '#c8f7c5';
  document.forms[0].fname.focus();
}

a {
  display: block;
  padding: 4px;
}

form {
  padding: 12px;
  transition: background 500ms ease-in;
}

input:focus {
  background-color: #fff68f;
}

.content {
  height: 200vh
}

<a href="#!" onclick="document.forms[0].style.backgroundColor='#c8f7c5';document.forms[0].fname.focus();">focus the form using href="#!"</a>

<a href="#form2">focus the form using href="#form2"</a>

<a href="#form2" onclick="document.forms[0].style.backgroundColor='#fff'">unfocus the form</a>
<div class="content"></div>
<form id="form2" action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>
<p>