All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

HTML Mandatory Field Asterisk

Last Updated : Jul 1, 2023

HTML Mandatory Field Asterisk

In this tutorial we will show you the solution of HTML mandatory field asterisk, we are going to tell you how you are able to make an HTML webpage in which we use mandatory field asterisk.

We all know that text with asterisk in html considered mandatory which means that a user must have to fill the data inside input box.

Mostly, asterisk is used in forms. Let us understand the use of asterisk and how to use this.

Step By Step Guide On HTML Mandatory Field Asterisk :-

Now, here below we are going to show you code in html in which we use asterisk. To make it mandatory, we use some jQuery script here.

It is easy to understand. Let us see the code and after that we understand that what we have done in this code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home page</title>
<style>
        .required:before {
            content: "*";
            font-weight: bold;
            color: red;
        }
    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
   <h1> html mandatory field asterisk </h1>
    <form action="">
        <label for="text"> This is Required field:
            <input id="text" type="text" required />
        </label>
        <br><br>
        <label for="text"> This is Optional field:
            <input id="text" type="text" />
        </label>
        <br><br>
        <input type="submit" value="Submit">
    </form>
    <script>
        $("input[required]").parent("label").addClass("required");
    </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Here, in body which is a paired tag and all the content which we write here is going to display on browser screen.
  6. Here, we make text align center by using text align property in body tag.
  7. Here, first we create a heading only for reference.
  8. After that we create a form in which we use labels and inputs.
  9. Two inputs are created here. First one is with the help of asterisk that’s mandatory field and the other one is simple no any additional changes are taken there by us.
  10. Now, leave the second one and talk about first one. In first we create a label and then input in this. We use here an additional attribute that is required in input tag.
  11. After required we give css to this and add content * (asterisk) and color to this. Before is used here to show because we want to show * as first and remaining content after this.
  12. The main job is here of jQuery. For jQuery we link its source file in head and apply jQuery in body tag. Let us understand.
  13. Here, we add class required that we describe above and apply it on parent class i.e. label of selector input[required].
  14. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that with the help of this article we are able to use mandatory field asterisk in html. I hope this tutorial on HTML mandatory field asterisk helps you.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪