Page 168 - Computer Software Application TP - Volume 1
P. 168
COMPUTER SOFTWARE APPLICATION - CITS
TASK 3: Create Dynamic Form Elements
1 Open the text editor
2 Write the following codes
<html >
<head>
<title>Dynamic Form Elements</title>
</head>
<body>
<div id=”container”>
<form id=”myForm”>
<!-- Initially, the form has one input field -->
<input type=”text” name=”field1” placeholder=”Field 1”>
<br>
<button type=”button” onclick=”addField()”>Add Field</button>
<button type=”submit”>Submit</button>
</form>
</div>
<script>
function addField() {
var form = document.getElementById(“myForm”);
var inputCount = form.getElementsByTagName(“input”).length + 1; // Get the number of existing input fields
and increment by 1
var newInput = document.createElement(“input”); // Create a new input element
newInput.type = “text”;
newInput.name = “field” + inputCount; // Assign a unique name to the new input field
newInput.placeholder = “Field “ + inputCount; // Placeholder text
newInput.required = true; // Optionally, make the field required
form.appendChild(newInput); // Append the new input field to the form
}
</script>
</body>
</html>
3 Save the program as a .html file
4 Open the html file with a web browser
5 Verify the output..
153
CITS : IT & ITES - Computer Software Application - Exercise 42 CITS : IT & ITES - Computer Software Application - Exercise 42
