How to design an HTML form quickly

by

In this HTML tutorial, I will explain to you how as a beginner you can learn HTML and how can you design your first HTML form quickly in less than 10 minutes.

Remember this HTML tutorial is for beginners who want to learn Html or just started learning HTML. Here we will see how to create a simple feedback form using HTML controls.

Learn HTML video tutorial

I have also created a video tutorial on how to learn HTML and how to create your first HTML form using notepad.


Editors Used for HTML

To start writing HTML code, you first need an editor to write HTML code. Below are few editors you can use:

  • Notepad,
  • Notepad++
  • Visual Studio Code
  • Visual Studio
  • Sublime Text etc.

Visual studio code is one of the popular FREE editors you can write for JavaScript. Because it provides IntelliSense, debugging, and powerful editor features for JavaScript.

Now here I am using a notepad to write HTML code:

HTML <!DOCTYPE html>

<!DOCTYPE html>: When you will start writing the HTML code, first as you will write is “<!DOCTYPE html>”. This is not an HTML tag. But this tells the browser which version of HTML you are using.

Then each HTML file will have an HTML, head & body tags like below, remember each tag will have an end tag.

<html>
<head>
</head>
<body>
</body>
</html>

Within the head tag, we can have a title tag which will be the page title. You can write like below:

<head>
<title>Learn HTML & Create Your First HTML Form</title>
</head>

In the body tag, we are going to put our controls.

First we are giving a heading by using the <h1> attributes, you can use <h1>/<h2>/<h3>/<h4>/<h5>/<h6>.

And the we gave a short description by using a paragraph tag.<p></p>

<h1>Submit your Feedback</h1>
<p>Hey Please complete the feedback, It will help us to serve you better.</p>

Now we can add controls to the html form.

HTML Textbox

To create an HTML textbox where user can put values like First name, last name, etc, we can use input controls like below:

<input type="text" id="fullname" size="40"/>

Every control you should give a type, id etc.

HTML Email Control

To create an control for Email, we can use the same input but the type will be “email” like below:

<input type="email" id="emailid" size="40"/>

If you will use type=”email”, the control will take care of the email validation. You do not need to implement any validation for email.

HTML Multiline textbox

We can easily create a multiline textbox in HTML by using <textarea></<textarea> control.

<textarea rows="4" cols="50" id="feedback"></textarea>

Now once our controls are ready, let us see how we can add into the page.

HTML Table

To make a tabular structure, let us add a table control and within table we will add one tr and 2 tds like below:

<table>
<tr>
<td>
</td>
</tr>
</table>

Full HTML Form Code

Full HTML Code will look like below which you can put in the notepad file.

<!DOCTYPE html>
<html>
<head>
<title>Learn HTML & Build your first HTML Form</title>
</head>
<body>
<h1>Submit your Feedback</h1>
<p>Hey Please complete the feedback, It will help us to serve you better.</p>
<br/>
<table>
<tr>
<td>
Full Name:
</td>
<td>
<input type="text" id="fullname" size="40"/>
</td>
</tr>
<tr>
<td>
EMail ID:
</td>
<td>
<input type="email" id="emailid" size="40"/>
</td>
</tr>
<tr>
<td>
Feedback:
</td>
<td>
<textarea rows="4" cols="50" id="feedback"></textarea>
</td>
</tr>
<tr>
<td>
<input type="button" id="btnClear" value="Clear"/>
</td>
<td>
<input type="button" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
</body>
</html>

Now Save the file in .html or .htm file extension.

Once you saved successfully, open the file in a browser. Your feedback form will look like below:

design HTML form
Learn HTML and Design your first HTML form (feedback form) in less than 10 minutes

You may like following tutorials:

Here in this blog, I explained how to learn HTML easily and how you can create your first form in HTML using just a notepad. Also, I showed you how to create and use various HTML controls like HTML textbox, HTML email field and HTML textarea, HTML button.

>