Question

我制作了一个表格，并在每个文本框中添加了必填项。但由于某种原因，它不起作用。

如果有人知道解决方法，请告诉我。

<form name="mailForm" method="post" action="mail.php" >
                <div class="form">
                    <input class="input-text" type="text" name="Naam" id="Naam" value="Naam *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"  required>
                    <input class="input-text" type="text" name="E-Mail" id="E-Mail" value="E-Mail *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
                    <input class="input-text" type="text" name="Subject" id="Subject" value="Onderwerp *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
                    <textarea class="input-text text-area" name="Bericht" id="Bericht" value="Bericht *"cols="0" rows="0" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>Bericht *</textarea>

                    <input class="input-btn" type="submit" value="Verstuur" name="Submit">
                </div>
            </form>

Answer 1

您已设置默认值（value=""），并且每次将元素保留为emtpy时，使用onblur侦听器将输入元素重置为该值。因此浏览器将始终看到内容。

删除您的听众并依赖placeholder attribute代替：

<form name="mailForm" method="post" action="mail.php">
  <div class="form">
    <input class="input-text" type="text" name="Naam" id="Naam" placeholder="Naam *" required>
    <input class="input-text" type="text" name="E-Mail" id="E-Mail" placeholder="E-Mail *" required>
    <input class="input-text" type="text" name="Subject" id="Subject" placeholder="Onderwerp *" required>
    <textarea class="input-text text-area" name="Bericht" id="Bericht" placeholder="Bericht *" cols="0" rows="0" required></textarea>

    <input class="input-btn" type="submit" value="Verstuur" name="Submit">
  </div>
</form>

Answer 2

它不起作用，因为它已经有value，因此您可以将其更改为placeholder

<form name="mailForm" method="post" action="mail.php" >
  <div class="form">
    <input class="input-text" type="text" name="Naam" id="Naam" placeholder="Naam *" required>
    <input class="input-text" type="text" name="E-Mail" id="E-Mail" placeholder="E-Mail *" required>
    <input class="input-text" type="text" name="Subject" id="Subject" placeholder="Onderwerp *" required>
    <textarea class="input-text text-area" name="Bericht" id="Bericht" placeholder="Bericht *"cols="0" rows="0" required>Bericht *</textarea>

    <input class="input-btn" type="submit" value="Verstuur" name="Submit">
  </div>
</form>

Answer 3

您可以尝试这样：

        <form name="mailForm" method="post" action="mail.php" >
            <div class="form">
                <input class="input-text" type="text" name="Naam" id="Naam" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"  required="required">
                <input class="input-text" type="text" name="E-Mail" id="E-Mail" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required="required">
                <input class="input-text" type="text" name="Subject" id="Subject" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required="required">
                <textarea class="input-text text-area" name="Bericht" id="Bericht" value=""cols="0" rows="0" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required="required">Bericht *</textarea>

                <input class="input-btn" type="submit" value="Verstuur" name="Submit">
            </div>
        </form>

看到我从required更改为required="required"

Answer 4

检查HTML声明是否为HTML5，否则更改

required

到

required="required"

需要的文本框不起作用

4 个答案: