HTML Input Blank Value Not Working

Question

I've got a simple login form that just won't start with blank values, no matter what I do (even after adding JavaScript).

Code

<form id="loginForm" name="loginForm" action="login.php" method="post">
    <div class="fields-search">
        <input type="text" id="wf_username" class="form-control" placeholder="Username" value="" name="wf_username" title="Required" required>
        <script type="text/javascript"> 
            document.getElementById("wf_username").value=""; 
        </script>
        <input type="password" id="wf_password" class="form-control" placeholder="Password" value="" name="wf_password" title="Required" required>
        <script type="text/javascript"> 
            document.getElementById("wf_password").value=""; 
        </script>
        <input type="submit" value="Login" id="formsubmit" class="btn btn-success">
    </div>
</form>

But it always shows this:

I don't know if that's my MAMP MySQL password showing, but it's disturbing. In every other form where I've used value="" it works fine - what gives here?

I have cleared my cache and tried Chrome & FF - same behaviour. But Safari seems to work fine (Chrome & FF work fine for my other forms where I've set value="", though)

Edit I added the autocomplete attribute to both inputs but same result.

        <form id="loginForm" name="loginForm" action="login.php" method="post">
            <div class="fields-search"> 
                <input type="text" id="wf_username" class="form-control" placeholder="Username" value="" name="wf_username" title="Required" autocomplete="off" required>
                    <script type="text/javascript"> 
                        document.getElementById("wf_username").value=""; 
                    </script>
                <input type="password" id="wf_password" class="form-control" placeholder="Password" value="" name="wf_password" title="Required" autocomplete="off" required>
                    <script type="text/javascript"> 
                        document.getElementById("wf_password").value=""; 
                    </script>
                <input type="submit" value="Login" id="formsubmit" class="btn btn-success">
            </div>
        </form>

Edit 3 Autocomplete doesn't work when there is an input of type 'password'. Looks like Chrome & FF will autofill that and then an adjacent text box with a username from its saved user/pswd info. This DID work:

<form id="loginForm" name="loginForm" action="login.php" method="post">
    <div class="fields-search"> 
        <input type="text" id="wf_username" class="form-control" placeholder="Username" value="" name="wf_username" style="background:none" title="Required" autocomplete="off" readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');
                                this.blur(); this.focus(); }" autofocus required>
        <input type="password" id="wf_password" class="form-control" placeholder="Password" value="" name="wf_password" style="background:none" title="Required" autocomplete="off" readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');
                                this.blur(); this.focus(); }"  required>
        <div align="center">
            <input type="submit" value="Login" id="formsubmit" class="btn btn-danger"
        </div>
    </div>
</form>

Are these auto completed form values given by your browser? If not how are you populating those values? — Spencer Wieczorek, Mar 16 '18 at 20:17
Spencer - I don't know how the values are getting there. Only happens in Chrome & FF (haven't tried IE) — RossW, Mar 16 '18 at 21:23
j08691 is right - the solution is in the dupe he selected. I implemented the fix from dsuess (adding the styling suggestion from Arnis Juraga to keep the background normal) and it worked. — RossW, Mar 16 '18 at 23:49
I did read the whole page, but what worked for me was what I said in my comment above. — RossW, Mar 18 '18 at 00:27

score 0 · Answer 1 · answered Mar 16 '18 at 20:16

0

Solutions:

Use the autocomplete="off" attribute on your inputs

answered Mar 16 '18 at 20:16

baeyun

230
1
6

bukharim96 - see my edit. No change. – RossW Mar 16 '18 at 21:24

HTML Input Blank Value Not Working

1 Answers1