09/25/2022

HTML is a HyperText markup language. We all are using this client-side language to build a static website. If you want to build a website based on any language you need to know the HTML. The front end of any website is created by HTML. Meanwhile, you can use CSS, javascript but you must know the HTML. For that, it is also called the basics of coding. If you want to make a dynamic website, in that case also know the HTML also. So for that how much it’s looking easy that much it is important to learn.

How do you validate a form in HTML?

Here we are focusing to validate the form without javascript. What is validation? Validation is a control to the form that tells the user that you have input this kind of particular data. Else you couldn’t submit the form. We make the validation because we don’t want to submit the data with wrong or invalid information. Here I show you that some of the validation which you can do by using the HTML code. no need to write javascript for that.

Required Field validation using HTML


Required field validation is like that you tell the user, that the user can write something into that form filed. Then they allow submitting the data. They cant leave empty any filed before submit. If they haven’t written anything they get the message into that field.

<html>
<head>
<title>HTML Validation</title>
</head>
<body>
<form>
<input type="text" name="name" placeholder="write your name" required /><br />
<input type="submit" value="submit" name="submit" /> 
</form>
</body>
</html>
validation using HTML

Readonly

Readonly is one kind of validation we can say. When you want users can only read this field. This means you can’t give access to the user, that you can write something into the field. If you use Readonly that user is not able to click on that particular field.

<html>
<head>
<title>HTML Validation</title>
</head>
<body>
<form>
<input type="text" name="name" value="Learning Points" readonly/><br />
<input type="submit" value="submit" name="submit" /> 
</form>
</body>
</html>
validation using HTML

Hidden

If you use hidden as an input type user can’t able to see that particular field. When you want that some data you want to submit but hiddenly means can’t show to the user then it’s very useful for you. It is basically confidentially submitted the data. The user can’t write anything in this hidden field. You can provide some fixed value that you can submit but also make it hidden inn the user side.

<html>
<head>
<title>HTML Validation</title>
</head>
<body>
<form>
<input type="text" name="name" value="Learning Points" readonly/><br />
<p> This field is not veasible for you </p>
<input type="hidden" name="name" value="Xcoder"/><br />

<input type="submit" value="submit" name="submit" /> 
</form>
</body>
</html>
In this image, there is only one field visible. But I have to take two input types in the form.

Number formatting

You can make the limit in any field, That the user can only put the value between ” ” to ” “. It’s call set maximum and minumum value. When you want that a user can only input inbetween 10 to 20 nothing else. So for that you can take field input type as a numbe, set the value, ans set the maximum value and minimum value.

<html>
<head>
<title>HTML Validation</title>
</head>
<body>
<form>
<input type="text" name="name" value="Learning Points" readonly/><br />
<p> This field is not veasible for you </p>
<input type="number" name="name" placeholder="write inbetween 10 to 20" min="10" max="20"/><br />

<input type="submit" value="submit" name="submit" /> 
</form>
</body>
</html>
If the value is grretter then 20
If the value is less then 10

Email Formatting

You can tell the user to write a perfect email format. Here perfect email format means that in this email shoulde be available a @ sign. Else It’s is showing you write a email. You can do it to writting input type as a email.

<html>
<head>
<title>HTML Validation</title>
</head>
<body>
<form>
<input type="text" name="name" value="Learning Points" readonly/><br />
<input type="email" name="email" placeholder="write email"/><br />

<input type="submit" value="submit" name="submit" /> 
</form>
</body>
</html>

10 Digits mobile number validation using HTML

It’s very importent to know that. Because we all who are already well known coding. If they gonna make any validation like this 10 digit mobile number. So for that they gonna find out for the javascript. Using the 6-10 digit of code they trying to make their field validate. But here i show you how you can make it using html only with in a single line of code

<html>
<head>
<title>HTML Validation</title>
</head>
<body>
<form>
<input type="text" name="name" value="Learning Points" readonly/><br />
<input type="tel" class="input" name="contact" pattern="[789][0-9]{9}" required><br>

<input type="submit" value="submit" name="submit" /> 
</form>
</body>
</html>
When you write less then 10 digit

So here is some example of validation of HTML form element.That you can create without using the javascript. So you can go for it. If you realy feel that this information is valid for you then follow our page.

learning points – Home | A better learning future starts here

6 thoughts on “HTML form validation using HTML

  1. Wonderful blog you have here but I was wondering if you knew of any discussion boards that cover the same topics talked about in this article? I’d really love to be a part of online community where I can get feed-back from other experienced people that share the same interest. If you have any recommendations, please let me know. Thanks a lot!

  2. I have read so many posts about the blogger lovers however this post is really a good piece of writing, keep it up

  3. Hey There. I discovered your blog the usage of msn. That is a really well written article. I will make sure to bookmark it and come back to learn more of your helpful information. Thanks for the post. I’ll definitely comeback.

Leave a Reply

Your email address will not be published.