All TalkersCode Topics

Follow TalkersCode On Social Media

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

Input Type Email In HTML

Last Updated : Mar 11, 2024

Input Type Email In HTML

In this tutorial we will show you input type email in HTML, in html, we all know that there is a form tag in html and in form tag there are many tags that are used under this tag. And one from them is input tag, an input tag also has many varieties in itself.

Varieties means like an input tag can be used for many purposes and ways as you say. And from those varieties today’s our topic is about email.

Email means that to make an input box in which user able to type only emails.

Step By Step Guide On Input Type Email In HTML :-

As, emails are most important thing in this world. And, as you see most of every form has a box of email in it. Email is also a way of communication and used worldwide for personal and professional uses.

Today, our topic is about that how we are able to make a form in which an input type email is created. That displays a box on html browser.

So that you type you email in this box. Here, below codes are given which help you to understand that how they work.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
	  </head>
<body style="text-align: center;">
    <h2>
        Registration form
    </h2>
    <form action="" method="get">
        <label for="">
            Enter your full name here:
        </label>
        <input type="text">
        <br>
        <br>
        <label for="">
            Please nter your age here:
        </label>
        <input type="number" name="" id="">
        <br><br>
        <label for="">
            Enter your full email here:
        </label>
        <input type="email" name=""  id="">
        <br><br>
        <p>
            This information is only for demo purposes.
        </p>
        <br><br>
        <input type="button" value="Submit">
        <input type="button" value="Reset">
    </form>
</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. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  5. In the body tag, here we create some headings, a form and paragraph in the body, with buttons. But our topic is about input email.
  6. So, in third row of form we create we create a label to inform user that after this you have to fill or text your email.
  7. And in background of this tag, all things are same like input type text but here we use email not text. This is basic use of input type email and in next session we will use JavaScript to show that the filled text here by user is an email or not.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that email is just same like text fields. The difference is that we use here email as value, not text in type of input tag.

And as described, we also define you how to check that the information filled here is email or not in our next session. I hope this tutorial on input type email in HTML helps you.

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪