Simple HTML form design examples with code (CSS and JavaScript)

Let us try to create a simple HTML form with JavaScript and CSS. Here, we will design project details form using HTML, CSS. And also we will validate the HTML form using JavaScript. So, here is the HTML form design example with code.

Table of Contents

HTML form design examples with code

Now, let us see how to create the project Details form using HTML and CSS. First, we will create an HTML page by using a code editor like Sublime, Atom, Visual Studio code, etc. Here, we will use Visual Studio code to create a project details form.

Read: Registration form design in HTML and CSS with code

To create a project details form, first, we create an HTML page using .html extension (e.g. index.html)

Here we use different types of HTML controls:

Textbox
Table
Dropdown
Date
Radio button
Text area
Submit button
Reset button

Below you can see the HTML code:

Download Simple HTML form design examples with code


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Management</title>
    <link rel="stylesheet" href="project.css">

</head>
<body>
    <h2>Project Management</h2>
    <table cellpadding="10" cellspacing="2" align="center">
        <th class="row1">Project Name</th>
        <tr>
            <td class="col1">Project Name</td>
            <td class="col2"><input type="text" name="project name" id="PName" placeholder="project name"></td>
        </tr>
        <th class="row1">Assigned to</th>
        <tr>
            <td class="col1">Assigned to</td>
            <td class="col2">
                <select name="person" id="projectAssigned">
                    <option value="Er Merry Petision">Er Merry Petision</option>
                    <option value="Er Deepak Bhusan">Er Deepak Bhusan</option>
                    <option value="Er Robert Watson">Er Robert Watson</option>
                </select>
            </td>
        </tr>

        <th class="row1">Start Date</th>
        <tr>
            <td class="col1">Start Date</td>
            <td class="col2"><input type="date" name="Start Date" id="SDate" class="startDate"></td>
        </tr>
        <th class="row1">End Date</th>
        <tr>
            <td class="col1">End Date</td>
            <td class="col2"><input type="date" name="End date" id="EDate" class="endDate"></td>
        </tr>

        <th class="row1">Priority</th>
        <tr>
            <td class="col1">Priority</td>
            <td class="col2">
                <input type="radio" name="priority" id="high" value="High"> High
                <input type="radio" name="priority" id="average" value="Average"> Average
                <input type="radio" name="priority" id="low" value="Low"> Low
            </td>
        </tr>
        <th class="row1">Description</th>
        <tr>
            <td class="col1">Description</td>
            <td class="col2"><textarea name="description" id="description" cols="35" rows="4"></textarea></td>
        </tr>
        <tr colspan="2" align="center">
            <td>
                <button type="submit" class="submit1"  onclick="submitProjectDetails()">Submit</button>
            </td>
            <td>
                <button type="reset" class="reset1" onclick="resetProjectDetails()">Clear</button>
            </td>
        </tr>
        <tr colspan="1" align="center">
            <td>
                <button type="reset" class="reset2" onclick="resetProjectDetails()">Clear</button>
            </td>
        </tr>
    </table>
    <script src="project.js"></script>
</body>

</html>

Apart from this, we use external .css (for e.g. Style.css) file to style the HTML control. To apply styles in HTML control, it is best practice to attach the external CSS file using a link tag.

And also we will see how to make the project details form responsive.

Read: How to design an HTML form quickly

First, we style the heading (h2) which is Project Management.

First style the font using font-family: Arial, font-size: 25px, font-style: normal and font-weight: bold, color: black.
Then we align the text to the center using text-align: center and also we decorate the text using text-decoration: underline.

h2 {
    font-family: Arial;
    font-size: 25px;
    font-style: normal;
    font-weight: bold;
    color: black;
    text-align: center;
    text-decoration: underline;
}

We will apply style on the table tag (table) and table tag is used to create table in Html.

To set the background-color of the table, we use background-color property i.e. background-color: rgb(107, 250, 243).
To set the font size, font-weight, and font family of all the fonts present in the table, we use font-size, font-family, and font-weight property i.e. font-size: 18px,font-family: Arial, Helvetica, sans-serif, and font-weight: bold.
To set the border radius of the table, we use border-radius property in the table i.e. border-radius: 5px.

table {
    background-color: rgb(107, 250, 243);
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 4px;
}

Now, we will see how to style text box by adding CSS.

We add box-sizing to add border and padding to the height and width of the text box. To set box-sizing in the input text box, box-sizing: border-box.
Then we set width:80% to the text box.
We add padding 10px on the top and bottom and 5 px on the right and left.
We add margin-top as 15px, and margin-right as 15px
We add border-radius as 5px, to give curve style at the edge of the text box.

input[type=text] {
    box-sizing: border-box;
    width: 80%;
    padding: 10px 5px;
    margin-top: 15px;
    margin-right: 15px;
    border-radius: 5px;
}

We will see how to apply style on the date field in html using CSS.

We add box-sizing to apply border and padding to the height and width of the date field box. To set box-sizing in the input text box, box-sizing: border-box.
Then we set width:80% to the date field.
We add padding 8px on the top and bottom and 5 px on the right and left of the date field.
We add a margin of 8px on the top and bottom and 0 on the right and left.
We add border-radius as 5px, to give curve style at the edge of the date field.

input[type=date] {
    box-sizing: border-box;
    width: 80%;
    margin: 8px 0;
    padding: 8px 5px;
    border-radius: 5px;
}

We will see how to apply styles on the dropdown html control using CSS.

We add box-sizing to apply border and padding to the height and width of the dropdown. To set box-sizing in the input text box, box-sizing: border-box.
Then we set width:80% to the dropdown.
We add a margin of 8px on the top and bottom and 0 on the right and left.
We add padding 10px on the top and bottom and 5 px on the right and left.
We add border radius as 5px, to give curve style at the edge of the dropdown list.

select {
    box-sizing: border-box;
    width: 80%;
    margin: 8px 0;
    padding: 10px 5px;
    border-radius: 5px;
}

We will see how to apply style to the multiline text area/text area using CSS.

We add padding to all sides of the text area is 2px.
Then we apply line-height as 1(without unit means it will multiply with element font size), which means the height of the line.
We add border-radius as 5px, to apply curve style at the edge of the text area box.

textarea {
    padding: 2px;
    line-height: 1;
    border-radius: 5px;
    box-sizing: border-box;
    }

In HTML, we add class attribute to the reset button as class=”reset1″. So in CSS, we can denote class as ‘.’ (e.g. .reset1). We will see how to apply a style to the reset button and submit button.

Then we set the width: 30% to the reset button.
We will set Background-color of the reset button as background color: #547ef3.
We add color to the button, which will change the color of the button as well as the text. To set color: white.
Add padding 12px on the top and bottom and 8px on the right and left.
We will add margin-right as 50px.
Then we add margin-left as -50px.
Add border-radius as 4px, it will curve the border to 4px of the reset button.
We will add cursor property to the reset button, it will show when the mouse cursor will point to the reset button. To set the property, cursor: pointer.
Set the font size of the text, to set the font-size attribute, font-size: 15px.
We will set the margin-top as auto and set the background color when the pointer will hover on the top of the button.

.reset1 {
    width: 30%;
    background-color: #547ef3;
    color: white;
    padding: 12px 8px;
    margin-right: 50px;
    margin-left: -50px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;

    margin-top: auto;
}
.reset2:hover{
        background-color: #584ca0;
     }

In the same way, we can apply styles on the submit button. To apply styles on submit button refer to the below code.

button[type=submit] {
    width: 65%;
    padding: 12px 8px;
    margin-left: 80px;
    margin-top: auto;
    /* margin-bottom: 20px; */
    margin-right: -20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #33d439;
    color: white;
    font-size: 15px;
}

button[type=submit]:hover {
    background-color: #45a049;
}

We will hide the th i.e. header cell and the second reset button, to denote the header cell we use a class called= row1, and to denote the second reset button we use a class called reset2 and we will use both the attribute to make the form responsive.

Follow the below CSS code to hide the column and button.

.row1{
    visibility: hidden;
    display: none;
}
.reset2{
    visibility: hidden;
    display: none;
}

html form design examples with code — Project details form using HTML CSS

Here we will see how to make the form responsive by using media query in CSS.

This style apply for the screen size having minimum width 180px and maximum width 600px.

Now we will apply style on table to make the form responsive

To align all the text to the left. For this text-align:left
Padding auto for all sides of the table.
Margin auto for the top of the table.

We will apply style to hide table data which is denoted by the class called col1.

First we will apply visibility hidden, but in visibility property it will hide the element but it take the space of the element.
But in display = none then it will hide the element and it will not take the space of the element.

For header cell, we will apply style to make the header cell visible which is denoted by the class called row1.

So we will set property visibility =visible
Then we will set Property display=block.

Then we will apply style on the submit button.

The width of the submit button is 30%.
We will apply margin-left = -120px, to make the button towards the left.

Next, we will apply a style on the reset button 1 which is denoted by the class called reset1, and reset button 2 which is denoted by the class called reset2

We will hide the reset1 by applying style visibility: hidden and display: none and visible the reset2 and replace the reset1 button. For this follow the below code.

@media only screen and (min-width:180px) and (max-width:600px) {
    
table{
       text-align: left;
        padding: auto;
        margin-top: auto;
        }
    .col1 {
        visibility: hidden;
        display: none;
    }
    .row1{
        visibility: visible;
        display: block;
        }
    button[type=submit]{
        width:30%;
        margin-left:-120px;
    }
     .reset1{
         visibility: hidden;
         display: none;
     }
     .reset2{
       
         visibility: visible;
         display: block;
         width: 30%;
         background-color: #547ef3;
         color: white;
         padding: 12px;
         margin-right: auto;
         margin-left: 160px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-size: 15px;
         margin-bottom: 20px;
         margin-top: -60px;
        }
     .reset2:hover{
        background-color: #584ca0;
     }
    
}

Project details html form using html and css — html form design examples with code

Get HTML control values using JavaScript

Now, we will learn how to validate the HTML controls and also how to get value from HTML controls using JavaScript.

First we will add the reference JavaScript file (e.g. index.js) using script tag in HTML.

We will use functions to validate and retrieve (i.e. submitProjectDetails()) when we click on the submit button it will show the value if the value is entered in the field or else it will show the field is empty on the alert box.

To see how to validate and retrieve value from Html control, let’s take the first Html control i.e. Project Name field.

We will use the getElementById to get the value of the element having the ID attribute and the specific value, and then we will store that value in a variable. For example var ProjectName= document.getElementById(pName).

Then we will validate and retrieve value from the field by using that variable. We use if-else, to check the validation and to get the value.

if (ProjectName.value == “”)
 {        alert(“Project name field cannot be empty”);  
  } else
 { 
 alert(“The project name is:” + ProjectName.value);    
}

If the project name field is empty then it will show the alert i.e. Project Name field cannot be empty.

html form design examples with css and javascript — Project details form validation

else it will show the value which is enter by the user.

Get HTML control values using JavaScript — get value from project details form

In the same way, you can validate and retrieve value from all the HTML controls. Refer to the below JavaScript code.

function submitProjectDetails() {
    var ProjectName = document.getElementById("PName")
    var pAssigned = document.getElementById("projectAssigned")
    var sDate = document.getElementById("SDate")
    var eDate = document.getElementById("EDate")
    var Prior = document.querySelector('input[name="priority"]')
    var Description = document.getElementById("description")
 // project name validation
    if (ProjectName.value == "") {
        alert("Project name field cannot be empty");
    } else {
        alert(ProjectName.value);
    }
    // Assigned to validation
    var person = pAssigned.options[pAssigned.selectedIndex].value;
    if (person == "" || person=="Select") {
        alert("Project Assigned to field cannot be empty");
    } else {
        alert(pAssigned.options[pAssigned.selectedIndex].value);
    }
  // Date validation
    // start date
    if (sDate.value == "") {
        alert(" Please Enter the Starting date");
    } else {
        alert(document.getElementById("SDate").value);
    }
    // End date
    if (eDate.value == 0) {
        alert("Please enter the end date ");
    } else {
        alert(document.getElementById("EDate").value);
    }
   //priority validation
    var Prior = document.querySelector('input[name="priority"]:checked');

    if (Prior != null) {
        alert("The priority of project is:" + Prior.value);

    } else {
        alert("You did not select the priority of the project");
    }
// description validation

    if (Description.value == "") {
        alert("You did not write the project description");
    } else {
        alert(document.getElementById("description").value);
    }
}

How to reset Project details form using JavaScript

Here, we will see how to reset project details form using JavaScript.

To reset we use a function called resetProjectDetails(), inside this function, we set the HTML field as empty using javascript.

For example: document.getElementById(“PName”).value = ‘ ‘;

In same way you can reset all the field of the Project details form. Refer the below code to reset.

function resetProjectDetails() {
     document.getElementById("PName").value = '';
     document.getElementById("projectAssigned").value = 'Select';
     document.getElementById("SDate").value = '';
     document.getElementById("EDate").value = '';
     document.querySelector('input[name="priority"]').value = '';
     document.getElementById("description").value = '';
}