How To Make A Form With HTML And CSS Codes [Source Code]

by
In this post, I will share with you a basic idea of HTML and CSS codes. Here I will be showing you how to make a form with HTML and CSS codes using notepad or sublime text editor. Most of the time when a developer or computer science student wants to start HTML and CSS programming. First, they should know the tag, elements, and attribute. Thereafter they try to build or create a form with HTML and CSS. 

For that reason, I decided to share a simple source code with to make a form design with HTML and CSS codes. Which helps you as a beginner to make a form nicely!

To build this program you can use any kind of text editors like Notepad, Sublime Text, or Notepad++ editor.

Form With HTML And CSS Codes

Make a Form With HTML and CSS Codes

First, you just copy the below HTML5 codes are provided. Then paste in a text editor and save from the file menu with the name of form.html. Here you need to create a folder first on the desktop in your PC. Then save the file in the folder.

<!DOCTYPE html>
<html>
<head>
<title>This is our new class.</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div class=”wrap”>
<form>
<button>Project</button>
<h2><a href=”https://www.megaupdate24.com/” target=”_blank”>Destination</a></h2>
<input type=”text” name=”your name” placeholder=”Your Name”>
<input type=”text” name=”yourname” placeholder=”Your Name”>
    <input type=”id” name=”yourid” placeholder=”Your ID”>
    <input type=”department” name=”department” placeholder=”Department”>
    <input type=”phonenumber” name=”phonenumber” placeholder=”Phone Number”>
    <input type=”email” name=”email” placeholder=”E-mail”>
    <br>
    <input type=”submit” value=”Submit”>
    </form>
</div>
</body>
</html>

Secondly, You now copy the CSS codes as well and paste in another tab in any text editor. Now you just save it form file option in the same folder with the name of style.css.

               body{
background: #ea4335;
}
.wrap{
width: 350px;
margin: auto;
background: #34a853;
padding: 5px;
margin-top: 50px;
border-radius: 50px; 
}
form{
text-align: center;
padding: 10px;
font-family: arial;
border-color: 1px dotted white;

 }
button{
text-align: center;
background: gray;
color: orange;
padding: 5px;
border-radius: 5px;

 }
h2{
background: orange;
padding: 10px;
color: white;
border-radius: 10px;
}
a{
text-decoration: none;
color: #000;
}
input{
padding: 10px;
margin: 5px;
border-radius: 5px;
border: none;

}


Work is done!

For test the project you now go to your created folder where you save form.html and style.css and double click on the form.html file. Enjoy an awesome form look like red and green color. 

Here we use External CSS for the Desing and relation with the HTML file. That’s why no need any interception in CSS file!

If you have any other question or need any project source code. Then use the comment section I will try to provide something better.

Leave a Comment