Scribd
Upload
14 views

CSS Unit 03

CSS notes of Unit 3 MSBTE

Uploaded by

takaleom0
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views

CSS Unit 03

CSS notes of Unit 3 MSBTE

Uploaded by

takaleom0
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 52

Program: AN5I

Name of Course:
CSS(22519)
Unit 03 :Form and Event
Handling
Allocated Marks:10

CO3 : Create event based web forms


using javascript
By
MRS.P.P.YADAV
Dept. of AIML
AIT Poly., Vita

Department of AIML(Poly)
<text> Tag

Department of AIML(Poly)
<!DOCTYPE html>
<html>
<body>

<h1>The label element</h1>

<form>With default<br>
<p><input type="text" name="txt1"></p>

<p>With type,name, size, maxlength<br>


<input type="text" name="txt2" size=“30" maxlength="15">
</p>

<p>With type,name, size, maxlength, value<br>


<input type="text" name="txt3" size="50" maxlength="15" value="Hello ..">
</p>

</form>
</body> Department of AIML(Poly)
</html>
<label> Tag
The <label> tag defines a label for several elements:

Department of AIML(Poly)
<!DOCTYPE html>
<html>
<body>

<h1>The label element</h1>

<p>Click on one of the text labels to toggle the related radio button:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

Department of AIML(Poly)
<textarea> Tag
The <textarea> tag defines a multi-line text input control.
The <textarea> element is often used in a form, to collect user
inputs like comments or reviews.

Department of AIML(Poly)
Attribute Value Description

autofocus autofocus Specifies that a text area should automatically get focus when the page
loads

cols number Specifies the visible width of a text area

disabled disabled Specifies that a text area should be disabled

form form_id Specifies which form the text area belongs to

maxlength number Specifies the maximum number of characters allowed in the text area

name text Specifies a name for a text area

required required Specifies that a text area is required/must be filled out

rows number Specifies the visible number of lines in a text area

Department of AIML(Poly)
<!DOCTYPE html>
<html>
<body>

<h1>The textarea element</h1>

<form >
<p>
<textarea id="txtarea" name="add" rows="4" cols="50">
In Css subject you will learn how to make a website.The <label> element is
associated with the text input field using the for attribute, which matches the id
of the input.The element allows the user to type text.A button triggers the
JavaScript function when clicked.The element is where the output (label text) will
be displayed.
</textarea>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html> Department of AIML(Poly)
Checkbox
Attributes:

Attribute value Explanation

Type=“ ” checkbox cretes a checkbox on the form


Name= “ ” field name the field name is used to identify the form field
Value =“ ” initial value this value is submitted to the server when selected
Checked checked that checkbox is checked in the initial state

Department of AIML(Poly)
<!DOCTYPE html>
<html>
<body>

<h1>Show Checkboxes</h1>

<form>
<input type="checkbox" id="scales" name="scales" checked />

<label for="scales">C</label>

<input type="checkbox" id="horns" name="horns" />

<label for="horns">C++</label>

</form>
</body>
</html>
Department of AIML(Poly)
Radio Button

Attribute value Explanation

Type=“ ” radio cretes a radio button on the form


Name= “ ” field name the field name is used to identify the form field
Value =“ ” initial value this value is submitted to the server when selected
Checked checked that checkbox is checked in the initial state

Department of AIML(Poly)
<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML"> HTML

<input type="radio" id="css" name="fav_language" value="CSS"> CSS

<input type="radio" id="javascript" name="fav_language" value="JavaScript">


JavaScript
</form>

</body>
</html>

Department of AIML(Poly)
<select> Tag
The <select> tag in HTML creates a drop-down list for user input,
containing <option> tags to display available choices.

Syntax
<select>
<option>
</option>
...
</select>

Attributes

Department of AIML(Poly)
Attribute Description

Specifies that the select element is disabled. A disabled drop-down list is un-clickable and
disabled
unusable. It is a boolean attribute.

form Specifies one or more forms that the select element belongs to.

Specifies that the user is allowed to select more than one value in the <select> element. It
multiple
is a boolean attribute.

Specifies a name for the drop-down list. Used to reference the form data after submitting
name
the form or to reference the element in JavaScript.

size Specifies the number of visible options in a drop-down list.

Department of AIML(Poly)
Form Events

The form events in JavaScript are events that are associated with HTML forms.
These events are triggered by user actions when interacting with form elements like
text fields, buttons, checkboxes, etc.

Department of AIML(Poly)
List of Common Form Events
Here are some common form events:

Form
Description
Event
Triggered when a form is submitted. It's often used for form validation before data is sent to
onsubmit
the server.
Triggered when the form is reset, allowing you to perform actions when the user resets the
onreset
form.

Triggered when the value of a form element (input, select, textarea) changes.
onchange
Commonly used for user input validation or dynamic updates.

Triggered immediately when the value of an input element changes, allowing for real-time
oninput
handling of user input.
Triggered when an element receives focus, such as when a user clicks or tabs into an input
onfocus field.
Useful for providing feedback or enhancing the user experience.

Triggered when an element loses focus, such as when a user clicks outside an input field or
onblur
tabs away. Useful for validation or updates triggered by loss of focus.
Department of AIML(Poly)
onchange Event
The onchange event occurs when the value of an HTML element is changed. The provided instance below
illustrates the functionality of the onchange event. This event activates upon a user's alteration in dropdown (<select>)
option selection.

<!DOCTYPE html>
<html>
<body>
<p>Modify the text in the input field, then click outside the
field to fire the onchange event.</p>

Enter some text: <input type="text" name="txt" value="Hello"


onchange="myFunction(this.value)">

<script>
function myFunction(val) {
alert("The input value has changed.
The new value is: " + val);
}
</script>
</body>
</html> Department of AIML(Poly)
<!DOCTYPE html>
<html>
<body>
<label for="country">Select a country:</label>
<select id="country" onchange="handleChange()">
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<option value="India">India</option>
</select>
<p id="txt"></p>
<script>
function handleChange() {
// Perform actions when the dropdown selection changes
var selectedCountry = document.getElementById('country').value;
document.getElementById("txt").textContent=
"Selected country: "+selectedCountry;
}
</script>
</body>
</html>
Department of AIML(Poly)
The onsubmit Event

The onsubmit event in HTML is triggered when a form is submitted.


It is commonly used in
forms to execute JavaScript when the form is submitted, allowing for
validation or other
custom behaviors before the form data is sent to the server.
Syntax:

<form onsubmit="return validateForm()">


<!-- form elements here -->
</form>

Department of AIML(Poly)
<html><body>
<form onsubmit="validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br/>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// Perform validation
if (username == "" || password == "") {
alert("Please fill in all fields");
return false; // Prevent form submission
}
alert("Form submitted! Username is:"+username+",Password is:"+password);
return true; // Allow form submission Department of AIML(Poly)
}
onreset event
 The resetForm function once invoked, clears the
form content filled by user and then displays an
alert to confirm successful reset of said form.

 Syntax
<form onreset="myFunction()">
<!-- form elements here -->
</form>

Department of AIML(Poly)
<!DOCTYPE html>
<html>
<body>
<form onreset="resetForm()">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="reset" value="Reset">
</form>
<script>
function resetForm() {
// Perform actions when the form is reset
alert("Form has been reset!");
}
</script>
</body>
</html> Department of AIML(Poly)
oninput event
 As the user types into the search input field a real-time action, indeed! The handleInput
function triggers; it logs each current search input directly to screen.

 The oninput event in HTML is triggered whenever the value of an <input> or <textarea>
element is changed.

 This is useful for capturing real-time changes in user input, like when you want to validate
form fields as the user types, update a display, or process input dynamically.

Department of AIML(Poly)
<html>
<body>
<label for="search">Search:</label>
<input type="text" id="search" oninput="handleInput()">

<p id="message" style=" margin-top: 10px; font-weight: lighter;border: 1px solid


#ddd;padding: 10px; background-color: #f9f9f9; border-radius: 5px; font-family: 'Arial', sans-
serif; font-size: 14px; color: #333; width: 30%;"></p>

<script> var messageElement = document.getElementById('message');

function handleInput()
{

var searchInput =document.getElementById('search').value;

messageElement.innerHTML+="Search input: " + searchInput+'<br>'; } </script> </body>


</html>

Department of AIML(Poly)
onfocus and onblur Events
The onfocus and onblur events in HTML are used to trigger JavaScript when an element gains or
loses focus, respectively. These events are typically used with form inputs,
but they can be applied to other focusable elements like buttons or anchors

1. onfocus Event
The onfocus event is triggered when an element (like an input field) receives focus. This occurs
when a user clicks inside the element or tabs into it.
Syntax:
html
Copy code
<input type="text" onfocus="myFunction()">

2. onblur Event
The onblur event is triggered when an element loses focus. This happens when the user clicks
outside the element or tabs out of it.
Syntax:
html
Copy code
<input type="text" onblur="myFunction()"> Department of AIML(Poly)
<html><body>
<label for="name">Name:</label>
<input type="text" id="name" onfocus="handleFocus()"
onblur="handleBlur()">
<p id= "output"></p>
<script>
const output = document.getElementById('output');
function handleFocus() {
// Perform actions when the input gets focus
output.innerHTML += "Input has focus" + "<br>";
}
function handleBlur() {
// Perform actions when the input loses focus
output.innerHTML += "Input lost focus" + "<br>";
}
</script>
</body></html> Department of AIML(Poly)
keyboard event

1. Keydown event: Keydown occurs when the key is depressed and continuously repeats if
the key is depressed for an extended time.

When the key is pressed and still key in the down place of the keyboard, then the Javascript
key down event work on the application.

onkeydown event in HTML is used to trigger a function when a key is pressed


on the keyboard.

Department of AIML(Poly)
<html>
<body>
<h2> JavaScript keydown Method </h2>

<input type = "text" id = "input_class" placeholder = "write here."


onkeydown = "keyDownFunction()">
<p id = "pid"> </p>

<script>
function keyDownFunction() {
alert("JavaScript keyDown function activates successfully!!!");

document.getElementById("datas").innerHTML = "JavaScript keyDown


function activates successfully!!!";
}
</script>
</body> Department of AIML(Poly)
</html>
2. Keyup event: When a punctuation, numeric, or alphabetic key is pushed, then the keyup
event is triggered and starts functionality.

• Onkeyup

 keyup event in HTML is triggered when a user releases a key on the keyboard.
 It is often used in combination with keydown or keypress to capture the exact moment when
a key is released, which can be useful for tasks like form validation, updating UI elements, or
triggering certain actions.

Key components:

onkeyup attribute:

Used on the <input> element to trigger a JavaScript function when the user releases a key.

event.key: Captures the value of the key that was pressed and released.

Department of AIML(Poly)
<html>
<head>
<body>
<h1>Press and release any key</h1>
<p id="output"></p>
<!-- Input field to capture keyup event -->
<input type="text" onkeyup="handleKeyUp(event)" placeholder="Press and
release any key">

<!-- Output section to display key released -->

</body>
<script>
function handleKeyUp(event) {
let keyPressed = event.key;
document.getElementById("output").innerText = "You released: +keyPressed ;
}
</script>
</head>
</html> Department of AIML(Poly)
3. Keypress event: When the key is released from the user, the keyup event occurs and
starts functionality. Some browsers no longer support Keypress Event.

The onkeypress event only captures character-producing keys (like letters and numbers), so it
doesn’t detect keys like "Shift" or "Control".

When the user presses any key in the input box, the onkeypress event is triggered.

Key points:onkeypress attribute: The onkeypress event is applied directly in the HTML element
(the <input> in this case).

event.key: Captures the key value (e.g., "a", "b", "1").

event.charCode: Gives the ASCII value of the key that was pressed.

Department of AIML(Poly)
<html >

<body>
<h1>Type in the input box to trigger onkeypress</h1>
<input type="text" onkeypress="keyPressedEvent(event)"
placeholder="Press any key">
<p id="output"></p>
</body>
<script>
function keyPressedEvent(event) {
let keyPressed = event.key;
let charCode = event.charCode;
document.getElementById("output").innerText = `Key pressed:
${keyPressed}, Char code: ${charCode}`;
}
</script>
Department of AIML(Poly)
</html>
Mouse Events

Event Occurs When


onclick A user clicks on an element
oncontextmenu A user right-clicks on an element
ondblclick A user double-clicks on an element
onmousedown A mouse button is pressed over an element
onmouseenter The mouse pointer moves into an element
onmouseleave The mouse pointer moves out of an element
onmousemove The mouse pointer moves over an element
onmouseout The mouse pointer moves out of an element
onmouseover The mouse pointer moves onto an element
onmouseup A mouse button is released over an element
Department of AIML(Poly)
onclick Event
When an element experiences the press of a mouse button, it triggers the click event.

When the button is clicked, it prints an appropriate message to the console message i.e. “Clicked!”.
This event is often used while submitting forms.

Department of AIML(Poly)
onclick Event
<html>
<body>
<h2>The onclick Event</h2>
<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</body> Department of AIML(Poly)

</html>
ondblclick Event
The ondblclick event occurs when the user double-clicks on an HTML element.

<html>
<body>
<h2>The ondblclick Event</h2>

<p ondblclick="myFunction()">Double-click this paragraph to trigger a function.</p>

<p id="demo"></p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML += "Hello World ";
}
</script>

</body>
</html>
Department of AIML(Poly)
onmousedown Event
<html><body>
<h1>HTML DOM Events</h1>
<h2>The onmousedown Event</h2>

<p>Clock the text below!</p>


<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
The mouseDown() function sets the color of this text to red.
The mouseUp() function sets the color of this text to blue.
</p>

<script>
function mouseDown() {
document.getElementById("myP").style.color = "red";
}

function mouseUp() {
document.getElementById("myP").style.color = "blue";
}
</script></body></html>
Department of AIML(Poly)
•Onmouseover and onmouseout

•onmouseover: The onmouseover event occurs when the user


moves the mouse pointer over an element. You can use it to
trigger specific actions or change the style of the element
When the user hovers over it.

•onmouseout:
The onmouseout event occurs when the mouse pointer leaves
an element. You can use it to reset or trigger specific actions
when the mouse moves away from the element.
Department of AIML(Poly)
<html ><head>
<title>onmouseout Example</title>
<style>
.myButton {
padding: 15px 30px;
font-size: 16px;
color: white;
background-color: blue;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style></head>
<body><button class="myButton"
onmouseover="this.style.backgroundColor='green';this.innerHTML='Mouse
Over!';"
onmouseout="this.style.backgroundColor='blue'; this.innerHTML='Mouse
Out!';">
Hover over me!
</button> Department of AIML(Poly)
</body></html>
mousemove
• The mousemove event fires repeatedly whenever you
move the mouse cursor around an element.
This mousemove event fires many times per second as
the mouse is moved around, even if it is just by one
pixel.

• The handler function extracts clientX and clientY


properties from an event object that represents X-Y
coordinates of said pointer.
Department of AIML(Poly)
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mouse Move Example</title>
</head>
<body onmousemove="document.getElementById('coords').innerHTML
= "X: " + event.clientX + ", Y: " + event.clientY;">

<h1>Move your mouse around!</h1>


<p id="coords">Mouse Coordinates will appear here</p>

</body>
</html>
Department of AIML(Poly)
Form Object

The Form Object in HTML DOM is used to represent the HTML < form > element.
This tag is used to set or get the properties of < form > element. This element can be
accessed by using getElementById() method.
Syntax:
document.getElementById("Form_ID");

document.getElementById("showDataButton").onclick =
function() {
// Access the form and its elements
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;

// Display form data


document.getElementById("output").textContent = "Name: " +
name + ", Email: " + email;
}; Department of AIML(Poly)
<html>
<head>
</head>
<body>
<form id="Form_ID">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<button type="button" id="showDataButton">Show Data</button>


</form>

<p id="output"></p>

<script src="script.js"></script>
</body>
</html>

Department of AIML(Poly)
innerHTML
Using innerHTML allows you to dynamically change the
content of an HTML element from within your JavaScript code.
Here’s a simple example demonstrating how to use innerHTML to
update content in a web page:

Department of AIML(Poly)
<!DOCTYPE html>
<html>
<script>
function changeTest()
{
document.getElementById("myText").innerHTML="Good day";
}
</script>
<body>
<h4 id="myText">Welcome</h4>
<form action ="" method="post" name="entry">
<input type="button" onclick="changeTest()" value="Change
Text"/>
</form>
</body>
</html> Department of AIML(Poly)
How to change the text of a label using JavaScript ?

Using innerHTML Property


Using innerText Property

Using the innerHTML approach, you can change the text of a label by setting its innerHTML
property to a new string value. This method updates the entire HTML content inside the
element, allowing for dynamic text and HTML modifications within the label.

Approach 2: Using innerText Property


Using the innerText approach, you can change the text of a label by setting its innerText
property to a new string value. This updates the visible text content of the label while
preserving HTML structure and avoiding script execution within the element.

Department of AIML(Poly)
Changing option List Dynamically

Evaluating Checkbox selection

Changing Label Dynamically

Department of AIML(Poly)
Intrinsic Javascript Functions:

• Javascript provides some special set of built in function known as


intrinsic function.

• There are some such function to achive actions of submit and reset
button.

• Intrinsic function are used to replace submit and reset button with
some other images.

Department of AIML(Poly)
<!DOCTYPE html>
<html>
<body>
<form name="frm1" action="" method="post">
<p><b>Name :</b> <input type="text" name="t1" id="t1" required /><br></p>
<p> <b>Age :</b> <input type="number" name="t2" id="t2" required /><br></p>
<p>
<!-- Submit image acting as a button -->
<img src="submit.png" height="80" width="80" alt="Submit Form"
onclick="document.forms.frm1.submit()" />

<!-- Reset image acting as a button -->


<img src="reset.png" height="80" width="80" alt="Reset Form"
onclick="document.forms.frm1.reset()" />
</p>
</form></body></html> Department of AIML(Poly)
Disabling Elements:

Sometimes we need to enable and disble imput elements like text box , radio buttons,
checkboxs, but every time we make a change we need to reload the HTML page

By setting disable property to true and enabled agin by setting disabled =false.

Department of AIML(Poly)
Read ONLY Elements:
<html><body><form>
<p><b>Name :</b> <input type="text" id="t1" value="TY AIML"
readonly/><br></p>

<button type="button" onclick="makeEditable()">Make


Editable</button>

</form>

<script>
function makeEditable() {
document.getElementById('t1').readOnly = false;
} Department of AIML(Poly)

</script></body></html>
Y ou … .
Thank ?
e s t i on s ??
ANY Q u

Department of AIML(Poly)

You might also like