How to Make a Form in HTML
The Best Tutorial on How to Make a Form in HTML!
Do you want to make a form in HTML?
Do you just want to see how forms are made with primitive HTML tags?
If your answer to any of the questions above is a big yes, then, you have come to the right place!
In this article, you will not learn about a particular form like a Sign-in form, but you will learn all the basics, such that, you can make any of them! 😀
HTML, standing for Hypertext Markup Language, is a commonly used coding language used to make web pages. There are so many different things in HTML itself, that no one will be able to learn them all.
So, today, we will be discussing Forms in HTML. Forms play a very important role in the betterment of your website. Although this will be a very basic and a class for beginners, this will be a stepping stone for you.
The forms that we will make today, will be kind of primitive. No entry will be saved in your database, but it will surely give you an idea of how to make HTML forms!
So, let us start!
How to Make a Form in HTML: The Setup
First, we will be setting up an HTML document. This will be our first step in starting the form. So, let us view the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forms</title>
</head>
<body>
</body>
</html>
Now that we have made something of the code, let us save it. I will save it with the name of forms.html. Never forget to mention the extension .html while saving the document.
One tip for you. Never forget to save your work before you leave. This is because when you are doing complex tasks like making an actual website, you may lose your flow.
Also, use comments while working. This is because, whenever you will be doing a complex task, there will be a team, which will be working with you. So, never forget to comment, such that, the person understands what you ought to do.
How to Make a Form in HTML: The Form
First, we will be creating a Sign-up form. So, we will display it. Also, in this step, we will be creating the <form> tag and will see what it does. So now, see the code below. We will be writing it in the <body> tag.
<p>
<h2>
Welcome to the Forms by AllRounderstsk!
</h2>
<h1>
Signup
</h1>
</p>
<br>
<form method="post">
</form>
So, from the first line of code, we can understand that a new paragraph starts. All the things inside this paragraph will be separated from the others using padding. So, we enter the <p> tag, and we see an <h2> tag. What this does, is that it displays all the text as a heading, with a font size larger than the normal text.
The <h2> tag is closed, and we enter the <h1> tag. This also displays the text as a heading, but font even larger than the one in <h2>. h1 itself means heading number one!
We exit the tag after displaying the text Sign-up. Now, we close the paragraph tag.
In the next line, we see a <br> tag. What this does is that it brings the text to the next line. It is just like pressing the enter key after typing something. You can see that it is not being closed! This is because the <br> tag is an empty element. So, it doesn't need to be closed.
Now, the <form> tag starts. We can see something called the method attribute in the tag. The form tag signifies the start of the form and is the standard way of writing it. The method attribute has the value POST. It can also be GET. We have made it POST because it doesn't change the URL. If you want to know more about GET and POST, comment down below, or visit our contact us page.
Now, let us make the fields in the form!
How to Make a Form in HTML: The Form's Fields
In this step, we will create all the fields in the form, including the Full Name, E-mail, Password, Phone Number, and Gender!
<label><b>Name: </b></label>
<input name="name" type="text" placeholder="Please enter your Name" required>
<br><br>
<label><b>E-mail Address: </b></label>
<input name="email" type="email" placeholder="Please enter your E-mail address" required>
<br><br>
<label><b>Phone No. (Optional): </b></label>
<input name="po" type="number" placeholder="Please enter your Phone Number">
<br><br>
<label><b>Password: </b></label>
<input name="password" type="password" placeholder="Please enter your Password" required>
<br><br>
<label><b>Gender: </b></label> <br>
<input name="gender" type="radio">Male <br>
<input name="gender" type="radio">Female <br>
<input name="gender" type="radio">Others <br>
<input name="gender" type="radio">Would not like to say <br><br><br>
<button type="submit" name=""register>Submit</button> In the first line, we see the label tag. It is used to name the field. As you can see in the first one, you can see that there is the word Name: written inside the tag. When we open it in the browser, the label text appears before the field.
Now in the next line, we see the input tag which makes the main text input field. We can see that the value top the attribute name is the given name. This signifies that when it will be connected to a MySQL database using PHP, the record is saved with the name name. The type attribute is given the value text, which says that all the values will be stored in text format. Now, the next attribute placeholder is given some text. This is the same text that we see while we fill a text field. Whenever we open the form to be filled, we can see it inscribed in the field, but when we click on it, it disappears. Then there is the required attribute which says that the field is required, and without filling it, the form will not be submitted.
Then there is two Br tag which brings the cursor to the next line.
Now we will only talk about the type. In the next field, we can see that it is the e-mail. The type given is email, which signifies that the field needs to have a value, like name@xyz.com.
The next line has the phone number option. The type is given a number, which means that only numbers can be inserted in this field.
Then there is the password field with the value that takes only passwords and displays them in the * (asterisk) format.
Now comes the gender field. We can see that there are a lot of fields, for the same label. This is because the type now is radio. They are having the same name that says that only one can be selected. They are having different values which will be filled if they are selected. If you want to know more about radio buttons and checkboxes, please comment down below, or visit our contact us page.
Then there is the button with the type submit, with the value of Submit in the tag. It signifies that when it will be clicked, the form will get submitted, submitting all the details to the MySQL database using PHP. If you want a tutorial on that, you can comment down below, or visit our contact us page.
Now that you know how you can make a form in HTML easily, I am sure that you can make different types of forms, like, login, Ticket Reservation, and many more!
Here goes the complete code of the day!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forms</title>
</head>
<body>
<p>
<h1>
Welcome to the Forms by AllRounderstsk!<br>
<b>Signup</b>
</h1>
</p>
<br>
<form method="post">
<label><b>Name: </b></label>
<input name="name" type="text" placeholder="Please enter your Name" required>
<br><br>
<label><b>E-mail Address: </b></label>
<input name="email" type="email" placeholder="Please enter your E-mail address" required>
<br><br>
<label><b>Phone No. (Optional): </b></label>
<input name="po" type="number" placeholder="Please enter your Phone Number">
<br><br>
<label><b>Password: </b></label>
<input name="password" type="password" placeholder="Please enter your Password" required>
<br><br>
<label><b>Gender: </b></label> <br>
<input name="gender" type="radio">Male <br>
<input name="gender" type="radio">Female <br>
<input name="gender" type="radio">Others <br>
<input name="gender" type="radio">Would not like to say <br><br><br>
<button type="submit" name=""register>Submit</button>
</form>
</body>
</html>
Thanks a lot for your support and your patience! We are always open to feedback! If you have any doubts or suggestions, please comment down below, or visit our contact us page.
Comments
Post a Comment