Skip to content

Instantly share code, notes, and snippets.

@khalidx
Last active April 23, 2023 09:28
Show Gist options
  • Save khalidx/744a92b45e4383ffaeeb72980f7dae4c to your computer and use it in GitHub Desktop.
Save khalidx/744a92b45e4383ffaeeb72980f7dae4c to your computer and use it in GitHub Desktop.
A simple way to visually indicate that a form input is required using plain HTML and CSS.

Following this guide will get you the red asterisks* beside form inputs, that you are used to seeing on forms across the internet.

Include the following CSS:

<style>
  label.required:after {
    content: " *";
    color: red;
  }
</style>

Then make sure all required form inputs have the required attribute, like:

<input id="name" name="name" type="text" required />

And make sure all corresponding labels for the required form inputs have the required class, like:

<label for="name" class="required">Name</label>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment