Tell us what’s happening:
I run the test and everything was ok ,but I had this little doubt, does this pop-up or warning that shows up when I try to submit the form without filling it up is created and desinged (the way that it looks)automatically by google chrome(the web browser)? is created by HTML?
or I have to make a special desing for it in CSS in order to make the pop-up looks like yours
Your code so far
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<p>Top 3 things cats hate:</p>
<input type="text" placeholder="cat photo URL" required>
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36.
It is something the browser does because you have a required attribute in the input. It tells the browser to not submit until there is something there. If you remove that required attribute, it won’t care.
why the pop up does it looks different in each website?
The FCC showns the pop up with that appareance but in others web sites forms the pop up it have other appareance
(This is the reason why I thought that the developers of the web site must have to desing the appareance of the pop up)
I’m using the same web brower but the pop up is different in each website
As said, the style of the message depends on the browser. Not sure, but they might be shadow dom elements that are used for the message box.
In any case, you do not have direct access to the message elements (as far as I know). You can change the text displayed fairly easily but for the elements (the message box) you have to create your own elements to use for the messages instead of the build-in.