Learn how to build interactive and responsive dynamic fields using JavaScript, HTML and CSS. This beginner-friendly tutorial walks you through every step — from creating your structure and styling it to adding and removing form fields dynamically with JavaScript.
📘 Project Overview
Forms are essential elements of modern websites — they collect data, feedback, and user inputs. You can make these dynamic fields using JavaScript — allowing users to add or remove them in real-time without reloading the page.
In this guide, you’ll learn how to:
- Dynamically generate form fields with JavaScript
- Style them using CSS
- Control adding and removing fields interactively
Let’s start building!
🧱 Step 1: HTML Structure
We’ll begin with the HTML layout.
In this example, we’ll create a simple form with two static fields (Name and Email) and one dynamic field that users can duplicate or remove.
👉 HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Fields</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link
rel="stylesheet"
type="text/css"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<h1>Myritebook</h1>
<div class="container">
<form action="" method="POST">
<div id="formfield">
<input type="text" name="text" class="text" size="50" placeholder="Name" required>
<input type="text" name="text" class="text" size="50" placeholder="Email" required>
<input type="text" name="text" class="text" size="50" placeholder="Optional Field">
</div>
<input name="submit" type="Submit" value="Submit">
</form>
<div class="controls">
<button class="add" onclick="add()"><i class="fa fa-plus"></i>Add</button>
<button class="remove" onclick="remove()"><i class="fa fa-minus"></i>Remove</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
🧩 Explanation:
<form>contains three input fields.- The first two fields (
NameandEmail) are fixed. - The third field (
Optional Field) is the one we’ll duplicate dynamically. - Two buttons below the form — Add and Remove — trigger JavaScript functions to manage fields.
🎨 Step 2: CSS Styling
Now that the structure is ready, let’s make it look clean and modern with some CSS.
Create a file named styles.css and paste the following code.
👉 CSS Code:
body {
background-color: #c1cce0;
font-family: 'Jost',sans-serif;
color: #fff;
}
h1 {
text-align: center;
font-size: 48px;
color: #232c3d;
}
.container {
width: 400px;
margin: 40px auto;
padding: 10px;
border-radius: 5px;
background: white;
box-shadow: 0px 10px 40px 0px rgba(47,47,47,.1);
}
input[type="text"]{
padding: 10px;
margin: 10px auto;
display: block;
border-radius: 5px;
border: 1px solid lightgrey;
background: none;
width: 274px;
color: black;
}
input[type="text"]:focus {
outline: none;
}
input[type="Submit"]{
margin: 10px auto;
display: block;
width: 40%;
height: 40px;
border: 1px solid;
border-radius: 25px;
font-size: 18px;
cursor: pointer;
}
input[type="Submit"]:hover{
background: #2691d9;
color: #e9f4fb;
transition: .5s;
}
.controls {
width: 294px;
margin: 15px auto;
}
.add {
padding: 5px;
border: 1px solid;
border-radius: 25px;
cursor: pointer;
}
.remove {
float: right;
padding: 5px;
border: 1px solid;
border-radius: 25px;
cursor: pointer;
}
.controls button i{
margin-right: 5px;
}
.remove:hover, .add:hover{
background: #2691d9;
color: #e9f4fb;
transition: .5s;
}
🧩 Explanation:
.containercenters the form and adds a soft shadow.- Inputs are styled with rounded corners and subtle borders.
- Buttons (
AddandRemove) change color on hover to provide user feedback.
⚙️ Step 3: JavaScript Functionality
Finally, we’ll add interactivity to the form — the part where new fields are added or removed dynamically.
Create a file called script.js and paste the following JavaScript code.
👉 JavaScript Code:
var formfield = document.getElementById('formfield');
function add(){
var newField = document.createElement('input');
newField.setAttribute('type','text');
newField.setAttribute('name','text');
newField.setAttribute('class','text');
newField.setAttribute('siz',50);
newField.setAttribute('placeholder','Optional Field');
formfield.appendChild(newField);
}
function remove(){
var input_tags = formfield.getElementsByTagName('input');
if(input_tags.length > 2) {
formfield.removeChild(input_tags[(input_tags.length) - 1]);
}
}
🧩 Explanation:
- The
add()function:- Creates a new
<input>element. - Sets its attributes (type, name, placeholder, etc.).
- Appends it to the form dynamically.
- Creates a new
- The
remove()function:- Finds all existing
<input>elements. - Removes the last one (only if more than two inputs remain).
- Finds all existing
Final Output:
🧠 FAQ
1. Why use dynamic form fields?
Dynamic fields improve user experience by allowing flexible data input without page reloads.
2. How can I add new form fields?
Use JavaScript’s document.createElement() and appendChild() methods to generate and insert new input fields.
3. How can I remove form fields?
Locate the last field in your form and delete it using removeChild().
4. Can I use this for other input types?
Absolutely! You can extend this logic for dropdowns, checkboxes, or even file inputs.
🎬 Conclusion
By combining HTML, CSS, and JavaScript, you can easily create interactive forms that adjust to users’ needs in real-time.
Dynamic forms are not only more engaging but also practical — especially for forms requiring multiple similar inputs.
Experiment with the code, enhance it with validation, and explore advanced features like saving form data dynamically.
Download Full Project Source Code
Get complete project source code files, reusable resources and implementation examples.
Preparing Secure Download 10