How to design an HTML form quickly
Check out Best Alternative to InfoPath -> Try Now
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.
SharePoint 2016 Tutorial Contents
Learn HTML video tutorial
I have also created a video tutorial for 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:
- Visual Studio Code
- Visual Studio
- Sublime Text etc.
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.
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.
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:
You may like following tutorials:
- Dropdown selected change event in jQuery Example
- Visual Studio 2019 Download and Installation
- How to change background color in visual studio code
- How to create a folder if not exist in C#.Net
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.
Download SharePoint Online Tutorial PDF FREE!
Get update on Webinars, video tutorials, training courses etc.