Css
Css
<form action="action_page.php">
<div class="container">
<hr>
<label for="First Name"><b>First Name</b></label>
<input type="text" placeholder="Your name" name="First Name" id="First
Name" required>
<br><br>
<label for="Last Nmae"><b>Last Name</b></label>
<input type="text" placeholder="Your last name" name="Last Name" id="Last
Name" required>
<br><br>
<div class="form-group">
<label>Country</label>
<select name="Country" id="">
<option selected="selected" value="Operation">India</option>
<option value="NPA">Australia</option>
<option value="BTS-Kurunegala">Spain</option>
</select>
</div>
<br>
<textarea id ="Subject" name="Subject" placeholder="Write Something.."
style="height:200px"></textarea><br>
<br><br>
<button type="submit" class="Submitbtn">Submit</button>
</div>
</div>
</form>
Output:
Theory:
In JavaScript, form elements are HTML elements that allow users to input data and submit it to a
server. These elements include input fields, checkboxes, radio buttons, drop-down lists, text
areas, etc., and are often grouped together within a <form> tag.
You can manipulate form elements using JavaScript to get values, set values, validate inputs, or
even modify form behavior dynamically. Let's break down the common form elements and
how you can interact with them using JavaScript.
Common Form Elements
<input>: Represents various types of input fields (text, password, email, etc.).
<textarea>: A multi-line input field for text.
<select>: A drop-down list.
<button>: A clickable button that can trigger form submissions or other actions.
<label>: Provides a label for form controls.
Set 22
<!DOCTYPE html>
<html>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">What is the time?
</button>
<p id="demo"></p>
</body>
</html>
Output:
Theory:
In JavaScript, a click event is one of the most commonly used events for
interacting with HTML elements like buttons. When a user clicks on a button, you
can respond to that action by executing JavaScript code.
There are several ways to add event listeners to a button click in JavaScript:
1. Using Inline onclick Attribute in HTML (Not Recommended for Complex
Code)
This is the simplest and oldest way to attach an event handler. However, it's not
ideal for complex applications since it mixes HTML and JavaScript.
2. Using addEventListener (Recommended Approach)
The recommended way to handle events in modern JavaScript is to use
addEventListener. It allows you to separate the JavaScript from HTML, and you
can attach multiple event listeners to a single element.
Set 23
<!DOCTYPE html>
<html>
<head>
<style>
img{
width:50px;
height:50px;
}
</style>
</head>
<body>
<form name="f">
<img src="submit.jpg"
onclick="javascript:document.forms.f.submit()" />
<img src="reset.jpg"
onclick="javascript:document.forms.f.reset()" />
</form>
</body>
</html>
Output:
Theory:
In JavaScript, the term "intrinsic function" generally refers to the built-in or
predefined functions that are part of the JavaScript language, provided by the
JavaScript runtime environment (like a browser or Node.js). These intrinsic
functions include methods for handling data types, performing mathematical
operations, manipulating strings, managing arrays, etc.
In JavaScript, these functions are often built-in methods that you can directly use
without needing to define them yourself. They're usually associated with the native
objects like Object, Array, String, Math, etc.
Set 24
<html>
<head>
<script>
function openchildwindow()
{
for(i=0; i<5; i++)
{
var mywin = window.open("", "win"+i, "width=100, height=100")
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Child Window" onclick="openchildwindow()
"/>
</form>
</body>
</html>
Outpiut:
Theory:
Opening a Child Window: You can use the window.open() method to open a new
window, specifying its URL, size, and other properties.
Interacting with the Child Window: Once the child window is open, you can
access and manipulate its content through the window object.
Communication Between Parent and Child Windows: Parent and child windows
can communicate with each other by modifying properties or calling functions
across the window objects.
Closing the Child Window: You can close the child window from the parent
window.
Set 25