[HTML] Creating HTML basic forms like a pro

 

Info! This article gives you a basic information about the forms and the < form > tags.

 

Intro

Every website needs forms for numerous purposes. Forms like contact forms, weekly email letters subscription, survey are very helpful for a site.

Contact Forms

A Contact form helps every site administrator(or team) to connect with their users.

E-mail Newsletters

Whereas, an email subscription is much helpful for a user of a website making it possible to never miss an update.

Surveys

If we talk about surveys, only a few of the site administrators have been doing this but it is one of the most important steps to succeed in the internet market.

Surveys help site owner/admin to understand your audience better. Hence, helps us(owners)  to build the greater audience and increase site revenues.

So, as we can see from the above how forms play a very important role in building a better website.

HTML Codes

Code Intro

So, coming to our point HTML forms are very easy to learn. After reading this article you will end up making a basic HTML form like a pro.

 

But creating a beautiful HTML form with not-so-basic-features is a kind of hassle. Although there are few very good CSS front-end frameworks in the market.

The Code:

<html>
<head>
<title>
Demo
</title>
</head>
<body>
<h1>The Contact Us Form</h1>


 <form action = "process.php" method = "post">
         First name: 
            <input type = "text" name = "name" value = "" />
         <br />
         
         Email:
            <input type = "text" name = "email" value = "" maxlength = "100" />
         <input type = "submit" value ="Submit" />
</form>

</body>
</html>

 

Code Explanation:

So a simple HTML form looks like this having a textbox or two, a checkbox, a pair radio button, and the most important a submit button which is usually labelled as “Send” or “Submit”.

Use our try it editor and have fun with these form codes. Do mistakes. Because mistakes will make you a better programmer.

Well, this is not the end. There is much more to learn in HTML forms.

You may practice this for now or Take a rest. After that come to read our next article on forms to learn further.

Conclusion

  • HTML forms have many uses like for creating surveys, contact forms, weekly newsletter and much more.
  • Easy to learn but you have to implement CSS framework to make it attractive.
  • <form> … </form>
  • Submit button is the most important button. Don’t forget.
  • Read our next article to learn more.

Extra Info On < Form >

Supported Browsers

Well, it is one the common and ordinary tag so it is supported by all of the popular browsers.

Chrome Firefox Opera Safari Edge
Yes Yes Yes Yes Yes

Related

<form>

<input>

<button>

<select>

<label>

 

Attributes

  • accept
  • action
  • method
  • target