Как сбросить только один входной тег в поле формы только с HTML5

Question

Я попробовал следующий пример, и моя цель - добиться, чтобы, если я нажму кнопку сброса, только поле в текущей строке будет сброшено, это возможно только с html5 и без jquery/ javascript? любые идеи приветствуются:)

<form action="fieldset_legend.htm">
  <fieldset>
    <legend>Absender</legend>

        <label for="vor">Ihr Vorname:</label>
        <input id="vor" size="40" maxlength="40" name="Vorname" type="text">
        <input type="reset" for="vor" value="reset">

        <label for="nach">Ihr Zuname:</label>
        <input  id="nach" size="40" maxlength="40" name="Zuname" type="text">
        <input type="reset" for="nach" value="reset">

  </fieldset>
</form>

Answer 1

Использовать JavaScript...

function resetInput(id) {
   document.getElementById(id+"input").value="";
}

HTML:

    <label for="vor">Ihr Vorname:</label>
    <input id="vorInput" size="40" maxlength="40" name="Vorname" type="text">
    <input type="button" id="vor" onclick="resetInput(this.id) "value="reset">

    <label for="nach">Ihr Zuname:</label>
    <input  id="nachInput" size="40" maxlength="40" name="Zuname" type="text">
    <input type="button" id="nach" onclick="resetInput(this.id) value="reset">

Answer 2

Я нашел обходной путь, который работает для меня.

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

      <form action="fieldset_legend.htm">
  <fieldset>
    <legend>Absender</legend>
      <form id="line1">
        <label for="vor">Ihr Vorname:</label>
        <input id="vor" size="40" maxlength="40" name="Vorname" type="text">
        <input type="reset" for="vor" value="reset">
      </form>

      <form id="line2">
        <label for="nach">Ihr Zuname:</label>
        <input  id="nach" size="40" maxlength="40" name="Zuname" type="text">
        <input type="reset" for="nach" value="reset">
      </form>

  </fieldset>
</form>

Кнопка сброса сбрасывает только «самую близкую» форму, которую она находит, в этом случае она сбрасывает только форму «line1» для первой кнопки и форму line2 для другой кнопки.

РЕДАКТИРОВАТЬ: я нашел статьи, в которых люди называют вложенные формы «взломом» (например, этот ), потому что это, похоже, не является частью стандартов браузера.

Так что имейте в виду, что это решение для вложенных форм может вызвать неожиданное поведение в некоторых браузерах, потому что в настоящее время это не является частью стандартов (даже если это работает десятилетиями).

Answer 3

Я не верю, что в этом случае есть способ избежать JavaScript, так как вход "reset" будет сброшен для всех элементов формы.

сброс: кнопка, которая сбрасывает содержимое формы до значений по умолчанию.

Элементы ввода