如何仅使用html5重置表单域中的单个输入标记

w46czmvw  于 2023-03-06  发布在  HTML5
关注(0)|答案(3)|浏览(205)

我尝试了下面的例子,我的目标是实现,如果我按下重置按钮,只有在当前行的字段将被重置,这是可能的,只有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>
z6psavjg

z6psavjg1#

使用javascript ...

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

超文本:

<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">
zengzsys

zengzsys2#

我不相信在这种情况下有一种方法可以避免JavaScript,因为输入“reset”将重置表单中的所有元素。
reset:将表单内容重置为默认值的按钮。
Input elements

gr8qqesn

gr8qqesn3#

我找到了一个适合我的变通办法。
您需要将字段放入嵌套表单中,例如:

<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>

reset按钮只会重置它找到的“closesest”表单,在这种情况下,它只会重置第一个按钮的“line1”表单和另一个按钮的“line2”表单。

**编辑:**我发现一些文章称嵌套表单为“黑客”(如this one),因为它似乎不是浏览器标准的一部分。

因此请记住,这种嵌套表单解决方案可能会在某些浏览器中导致意外行为,因为这目前还不是标准的一部分(即使这已经工作了几十年)

相关问题