Skip to content
Submitted over 1 year ago

Base_Apparel_coming_soon_page

tired-herb•120
@tired-herb
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, everyone! Please, could somebody answer me, what should I use inside the <button> instead of <embed> to show svg-image? Why <svg> doesn't work? As far as you will see, I also set autocomplete of the input to "off", that is because I did not understand how to style the, let it be, "invalid state" of this form . For example, those error-messages "email should contain "@"", which my browser shows with yellow exclamation mark(I have Google Chrome) or a list of my valid emails. So, I would like to style these messages and windows, but don't know how. I would truely appreciate your reply and some other comments!

Community feedback

  • devusexu•130
    @devusexuPosted over 1 year ago

    Hello @tired-herb! I have a few comments

    • See this article on MDN about custom error message, which use <form novalidate> to disable default error message and use Constraint Validation API to customize you own.

    • You can use img for you arror svg

    • You can add something like aria-label="email" attribute to your input and button element to benefit screen reader users(issues about accessibility), or they won't know what the input and the button is for

    1
    tired-herb•120
    @tired-herbPosted over 1 year ago

    @devusexu Thank you so much!

    0
  • Eduardo Henrique•200
    @duu19Posted over 1 year ago

    I believe that these validation messages from the form itself cannot be styled, we usually avoid using these standard validations and create our custom validations using JavaScript and CSS, which allows greater control over the form

    1
    tired-herb•120
    @tired-herbPosted over 1 year ago

    @duu19 Thank you very much for your help!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord