Welcome to your website development training.
Today we are going to learn how to create a form on our website.
We have different types of form.
Registration form
Login form
Contact form
Comment form
We are going to take a simple contact form.
We all know the usefulness of a form, it serves as a means of contact/ interaction between the website owner and the users. Through forms, we can easily get information/data from our web users/visitors.
This is also under HTML tutorial, the reason why I've decided to teach us right now is because I want us to do some practicals. At the end of this tutorial, I want us to create a registration/login page on our new webpage.
To create a form, we need to use the form tag, just like the other HTML tags we've discussed in our previous HTML Tutorials
*<form>*
*</form>*
Then, add some attributes and elements.
Let's create a simple contact form with name, email, subject and message/comment
Which simply means, with the form we are about to create, we need our users to input their names, email addresses, the subject of their comments/ requests and the details of their requests in the message box.
That means we need a single column for the name, a single column for the email, a single column for the subject and multiple columns for the message coz our users message may be more than one line, right?
Create a new file and save it contactform.html
Copy the code below and paste it in the empty space of your new file👇
______start from <!doctype html>________
<!doctype html>
<html>
<head>
<title>Contact Form</title>
</head>
<body>
<h2>Get in touch</h2>
<h4>Carefully fill the form below</h4>
<form>
Name: <input type="text"><br><br>
e-mail: <input type="email"><br><br>
Subject: <input type="text"><br><br>
Message: <textarea></textarea><br><br>
<input type="submit">
</form>
</body>
</html>
______stop at </html>______
Above is a basic HTML contact form with name, e-mail, subject and message columns
These are the details we needed from our users and with the submit button below it, we can get all the details from all users that fills out the form. It's like someone visited your website, he/she has interest in your products and/or services and would like to get in touch with you. That's where the contact us form is applicable.
We have 5 things in our form tag, let's take it one after the other;
1. Name: is exactly below the open form tag <form>
<input> tag will create a single column where our users will input their names, that's why we have it in front of Name:
type="text" is the type of the input we want in the column, all the names in this world comes in form of text, that's why the type is set to text
And the </br></br> is just to create space between our forms
2. e-mail: is below the Name: column
<input> tag also creates a single column where our users will input their emails, that's why we have it in front of e-mail
type="email" is the type of the input we want in the column, this will allow us to type some special characters like @ .com and some digits included in email format that's why it's different from normal text will use for Name
And the </br></br> is just to create space between our forms
3. Subject: is the same with name coz our subject will also come in form of text.
And the </br></br> is just to create space between our forms
4. Message: is totally different coz we need much space in case our user is a talkative (don't know how to summarize statements) that's why need to use <textarea></textarea> in other to create more than a single column
And the </br></br> is just to create space between our forms
5. Submit: this is very important coz without the submit button, our users can't get their name, email, subject of the matter and message across to us.
We need to specify it as input with the type "submit"
That's how to create a basic HTML contact form.
Use the above method to create a simple login form with the details below👇
username:
password:
(Submit)
By editing the code you have on your current webpage (contactform.html file)
This is mine 👇
We are pretty much close to programming and hacking. If I change my header to Facebook, use a white background, add other stuffs and style it up with CSS. Some people will think it's Facebook, they will enter their real Facebook login details.
That's when you say your Facebook account is hacked!😉
