Html Projects for Beginners || Biodata form

Register Yourself to get hired soon:- Register Now

HTML projects for beginners

Hy Guys Welcome to w3hiring.com. Html Projects for Beginners. In this article, I am going to explain everything step by step. How to create a biodata form using HTML. We will use some important tags of HTML and we will learn with code and explanations. I am going to explain everything in detail line by line. The tags are follwing.

Label
Input
fieldset
legend
br
option
select
center
form etc

Html Projects for Beginners Practice

if you know something about all HTML tags which I have mentioned. then you are good to go. let start to write code.

Prerequisites:-

Basic HTML Tags like input, label, br, etc.
Should be interested to learn HTML

Let’s start to create our biodata form.

Accenture Mass Hiring For Freshers:- Apply Now

first of all, we use a starter template to start our project using HTML. here is a starter template to start our biodata form. I used bg to change the color of the body.

Note:- We will use screenshots to show you the result of our code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My form to fill biodata of Students</title>
</head>
<body bgcolor="lightGray">
</body>
</html>

I used bgcolor=”lightGray” inside the Body tag to change the color of the body. h1 tag is used to write a big font heading. it will print “My Biodata Form” At the left-top of the browser screen.

<h1>My Biodata Form</h1>

// to exicute this code . you have to write the code insite html starter template.
<h1>My Biodata Form</h1>
<form action='#' method='GET' >
</form>

After that, we take a form tag to form our biodata. An HTML form is used to collect user input. And The user input is most often sent to a server for processing

let’s create a form to show a user interface. The form is a tag of HTML. we will provide two important attributes to form a tag named action and method.

Action is used to specifies where to send the data when a user clicks on the submit button.

The method specifies how to send the form data. there are multiple methods to send the request to the server. but some most uses methods are GET, POST, PATCH.

Difference Between GET and POST Request:

GET	POST
It is used to retrieve data.	Used to post the data to the server.
Data is sent as a query parameter.	Data is sent via request body
Information is visible inside the URL.	Usually used to create/write/ update/delete
The string length is limited to about 2048 characters(URL).	we could be sent different forms of data (JSON, plain text, URL-encoded-data)

<form action='#' method='GET' >
<fieldset>
</fieldset>
</form>

Let’s take input from use for that we will use input tag and then we put a label with every Input field it not mandatory we can use as per requirement, The <label> tag defines a label for several elements: learn more

Html Projects for Beginners

Form:- An HTML form is used to collect user input. And The user input is most often sent to a server for processing. the form is like a container that is used to collect the input from the user side.

Label:- we use a label tag to put a text before the input field to make this form user-friendly. The label will show that what data a user has to be fill. for example. suppose that we are working on a fruit shop and we want to sell our fruit online. for that, we will create a form and inside the form, we will create some widgets and input fields. like we want input from the user that which fruit do you like, for that input field we have to give a label to understand that what a user has to fill in the input field.

Input tag:- After that, we use the input field to take input from the user side which is print just after the label. An input field is used when we need some user input. like if we want to get the name of the fruit from the user side that which fruit a user likes most.

Required:- if we have some important field. which we have to fill by the user. we can make that required, a user can not submit the form without fill this field. for example, we want that a user form should not be submitted until a user does not fill the name of the fruit. we can use ‘required’ keyword to make this particular field required.

Type:- The <input> tag specifies an input field where a user can enter data. The <input> element is the most important form element of HTML. Type is an attribute of the input element. the <input> element can be displayed in several ways, depending on the type attribute.

fieldset:– The <fieldset> is nothing but a group maker, it can contain several controls as well as labels within a web form

Placeholder:- it is used for showing that what a user has to write inside the box.

<form action='#' method='GET' >
<fieldset>
<legend>Personal Information</legend>
    <label for="FirstName">FirstName</label>
    <input type="text" id="FirstName" placeholder="First Name" name="user" required>
    <label for="LastName">LastName</label>
    <input type="text" id="LastName" placeholder="LastName" name="user" required>
</fieldset>
</form>

Now we have created two fields with labels firstName and LastName. A user has to fill first.

Radio Button:- Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). We use a name attribute with the same name for every radio button in a group. the work of the Name attribute is to select only one button at the same time. A user can not select multiple radio buttons in a radio group of the same name.

<legend>Personal Information</legend>

The excitement level is going to increase🤩 now. we have created half of the form.

Legend:- The <legend> tag defines a caption for the <fieldset> element. it makes our form beautiful. As we can see in the above picture. it looks more beautiful then before.

    <label for="birthday">Date Of Birth:</label>
    <input type="date" id="birthday" name="birthday">
     <br>
     <br>
    <label for="email">Email:</label>
    <input type="email" placeholder="email" id="email">
    <br>
    <br>
    <label for="telNo">Phone number: </label>
    <input id="telNo" name="telNo" type="tel" list="defaultTels" placeholder="+91">
    <br>
    <br>
    <label for="height">Height:</label>
    <input type="text" id="height" placeholder="height inn feet" required>

Now we have completed our biodata form. I am going to provide the whole code of this small project of HTML below. you can run code on your local machine.

How to run the code:-

Step1:- Copy blow code into your editors like sublime text, notepad, or Visual studio code.

Step2:- Install required plugins

Step3:- Save the file with filename.html extension then run that file using a browser.

<h1>My Biodata Form</h1>
<form action='#' method='GET' >
    <fieldset>
    <legend>Personal Information</legend>
    <label for="FirstName">FirstName</label>
    <input type="text" id="FirstName" placeholder="First Name" name="user" required>
    <label for="LastName">LastName</label>
    <input type="text" id="LastName" placeholder="LastName" name="user" required>
    <br>
    <br>
    <label for="male">Male</label>
    <input type="radio" name="gender" id="male">
    <label for="female">Female</label>
    <input type="radio" name="gender" id="female">
    <label for="others">Others</label>
    <input type="radio" name="gender" id="others">
    <br>
    <br>
    <label for="birthday">Date Of Birth:</label>
    <input type="date" id="birthday" name="birthday">
     <br>
     <br>
    <label for="email">Email:</label>
    <input type="email" placeholder="email" id="email">
    <br>
    <br>
    <label for="telNo">Phone number: </label>
    <input id="telNo" name="telNo" type="tel" list="defaultTels" placeholder="+91">
    <br>
    <br>
    <label for="height">Height:</label>
    <input type="text" id="height" placeholder="height inn feet" required>
    <br>
    <br>
</fieldset>
    <fieldset>
        <legend>Education:</legend>
    <label for="school">School Name:</label>
    <input type="text" id="school" placeholder="school" required>
    <br>
    <br>
    <label for="class">class:</label>
    <input type="text" id="class" placeholder="Enter class" required>
    <br>
    <br>
    <label for="select">Stream:</label>:</label>
    <select name="select" id="cars">
      <option value="stream">stream</option>
      <option value="stream">Science</option>
      <option value="stream">Commerse</option>
      <option value="stream">Art</option>
    </select>
    <br><br>
    <label for="marksheet">Marksheet:</label>
   <input type="file" id="marksheet">
</fieldset>
<br>
<input type="submit">
</form >