Will Tuttle Will Tuttle - 1 month ago 6
HTML Question

how is this login form demo making the "please fill in field" popup?

I've been using a template I found for a login form at: http://codepen.io/bbodine1/pen/hflzK

<body>
<div class="container">
<section id="content">
<form action="">
<h1>Login Form</h1>
<div>
<input type="text" placeholder="Username" required="" id="username" />
</div>
<div>
<input type="password" placeholder="Password" required="" id="password" />
</div>
<div>
<input type="submit" value="Log in" />
<a href

="#">Lost your password?</a>
<a href="#">Register</a>
</div>
</form><!-- form -->
<div class="button">
<a href="#">Download source file</a>
</div><!-- button -->
</section><!-- content -->
</div><!-- container -->
</body>


It has a nifty popup next to any field left empty when submitting that says "Please fill out this field". I'd like to add this functionality to other custom forms I'm using but after looking through the html and css code, I can't find out how their triggering that popup.

Can anyone spot it?

Answer

enter image description here

As long as you're using HTML5 and the required property on your inputs this message will popup when you attempt to submit the form.

At the top of each HTML5 page you declare the doctype:

<!doctype html>

OR

<!DOCTYPE html>

The for each required input use the required property:

<input name="userpass" placeholder="passphrase" type="password" value="" required />