Scribd
Upload
32 views7 pages

Create A Webpage Using Form Elements

Uploaded by

Hrushikesh Bhoir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views7 pages

Create A Webpage Using Form Elements

Uploaded by

Hrushikesh Bhoir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: CSS Subject Code: 22519

Semester: 5th Course: IF5IA

Laboratory No: L003C Name of Subject Teacher: Shonal Mam

Name of Student: Prajwal Kasbale Roll Id: 21202A0040

Experiment No: 6

Aim Create a webpage using form elements.

Exercise:
1. Write a program to create the registration form for creating gmail account.

Code

<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form name="MyForm" method="post" action="">
<h2>Register your account</h2>
Enter your Firstname: <input type="text" name="FName" id="FName"><br><br>
Enter Your Lastname: <input type="text" name="LName" id="LName"><br><br>
Enter your Username: <input type="text" name="UName" id="UName"><br><br>
Enter your Password: <input type="password" name="pass" id="pass"><br><br>
Enter you Gender: <input type="radio" name="Gender" id="Male">Male

21202A0040
<input type="radio" name="Gender" id="Female">Female<br><br>
Your Hobbies? <input type="checkbox" name="Hobbies" id="Cricket">Cricket
<input type="checkbox" name="Football" id="Cricket">Football<br><br>
Select your city: <select name="City">
<option name="Mumbai">Mumbai</option>
<option name="Pune">Pune</option>
<option name="Nagpur">Nagpur</option>
<option name="Ahmedabad">Ahmedabad</option>
</select><br><br>
<input type="submit"> <input type="reset">
</form>
</body>
</html>

21202A0040
2. Write a JavaScript program for evaluating checkbox selection

Code: -

<html>
<body>
<input name="program" type="checkbox" value="IF"> Information
Technology <br>
<input name="program" type="checkbox" value="CO">
Computer Engineering
<br>
<p>Click the button to check all checkboxes that have a name attribute with the
value
"program".</p>
<button onclick="myFunction()">Try it</button>

21202A0040
<script>
function myFunction()
{ var
x=
document.getElementsByName("program"); var i; for
(i = 0; i < x.length; i++)
{ if (x[i].type ==
"checkbox")
{ x[i].checked =
true;
}
}
}
</script>
</body>

3. Write a JavaScript program for Changing Attribute Values Dynamically.

Code: -
<!DOCTYPE HTML>
<html>

<head>
<title>

21202A0040
How to change style attribute of an element
dynamically using JavaScript ?

</title>
</head>

<body style = "text-align:center;" id = "body">

<h1 id = "h1" style = "color:blueviolet ;" >


Vidyalankar
</h1>

<p id = "GFG_UP" style =


"font-size: 15px; font-weight: bold;">
</p>

<button onclick = "gfg_Run()">


Click here
</button>

<p id = "GFG_DOWN" style =


"font-size: 23px; font-weight: bold; color: blueviolet; ">
</p>

<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var heading = document.getElementById("h1");
el_up.innerHTML = "Click on the button to "
+ "change the style attribute";

function gfg_Run() {

21202A0040
heading.style["background-color"] = "blueviolet";
heading.style["color"] = "white";
el_down.innerHTML = "Style Attribute Changed";
}
</script>
</body>

</html>

Output :-

Conclusion:
Hence, we have learnt how to create webpage using form event.

21202A0040
21202A0040

You might also like