Scribd
Upload
34 views13 pages

Practical 6

Practical 6 of CSS

Uploaded by

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

Practical 6

Practical 6 of CSS

Uploaded by

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

Practical 6

AIM: Create a webpage using Form Elements.

<html>
<head>
<title>HTML Form</title>
</head>
<body>
<form name="Myform" action="" method="GET">
Enter your name: <input type="text" name="name" value=""><br>
<input type="button" value="Click" onclick="show">
</form>
</body>
</html>

<html>
<head>
<script type="text/javascript">
function assign()
{
document.forms.book.title.value="CSS_book";
document.forms.book.author.value="Manisha Padwal";
}
</script>
</head>
<body>
<form id="book">
Title of Book:<input id="title"><br><br>
Author of Book:<input id="author"><br><br>
<input type="button" id="btn" value="Assign Values“ onclick="assign()">
</form>
</body>
</html>
<html>
<body>
<p id="demo">Click the button to change the color of this paragraph.</p>
<button onclick="myFunction()">change color</button>
<script>textarea
function myFunction()
{
var x = document.getElementById("demo");
x.style.color = "red";
}
</script>
</body>
</html>

<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>
<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>
</html>
<html>
<body>
<p>An unordered list:</p>
<ul>
<li>Information Technology</li>
<li>Computer Engineering</li>
<li>Chemical Engineering</li>
</ul>
<p>Click the button to find out how many li elements there are in this document. </p>
<button onclick="myFunction()">Click</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x = document.getElementsByTagName("LI");
document.getElementById("demo").innerHTML = x.length;
}
</script>
</body>
</html>

<html>
<body>
<p>Computer Engineering</p>
<p>Information Technology</p>
<p>Electronics and Telecommunication</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementsByTagName("P");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "pink";
x[i].style.color = "blue";
}
}</script></body></html>
<html>
<head>
<title>getElementByClassName() </title>
<style>
h1 {
color: green;
}
body {
text-align:center;
}
.example {
padding: 10px;
margin: auto;
margin-top: 10px;
border: 1px solid black;
width: 300px;
}
</style></head>
<body>
<h1>Client side Scripting</h1>
<h2>DOM getElementByClassName() Method</h2>
<div>
<h4 class="example">div1</h4>
<h4 class="yellowBorder example">div2</h4>
<h4 class="greenBorder example">div3</h4>
<h4 class="example">div4</h4>
</div>
<script>
document.getElementsByClassName('greenBorder example')[0].style.border="10px solid green";
document.getElementsByClassName('yellowBorder example')[0].style.border="10px solid
yellow";
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
function changeText()
{
document.getElementById('js').innerHTML = 'Fifth Semester Javascript!!!!';
}
</script>
<p>Welcome to <b id='js'>JAVASCRIPT</b></p>
<input type='button' onclick='changeText()' value='Change Text'/>
</body>
</html>

<html>
<body>
<script type="text/javascript">
function changeText()
{
var userInput = document.getElementById('userInput').value;
document.getElementById('vp').innerHTML = userInput;
}
</script>
<p>Welcome <b id='vp'>JavaScript</b></p>
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText()' value='Change Text'/>
</body>
</html>
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form action="" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form><script>
function myFunction()
{
alert("The form was submitted");
}
</script></body></html>

<html>
<body>
<p id="panel"></p>
<ol>
<li>Apple</li>
<li id="item1">Banana</li>
<li>Grapes</li>
</ol>
<ul>
<li>Mango</li>
<li>Pineapple</li>
<li>Guvava</li>
</ul>
<div id="panel"></div>
<script>
var item1 = document.getElementById("item1");
var elems = document.getElementsByTagName("li");
var item2 = elems[4];
document.write("Total No. List Items = " + elems.length + "<br>");
document.write("Specefic item one = " + item1.innerText + "<br>");
document.write("Specefic item two = " + item2.innerText + "<br>");
</script>
</body>
</html>
<html>
<head>
<title>Assign Values</title>
</head>
<body>
Enter Value of A <input type="text" id="txt1"><br>
Enter Value of B <input type="text" id="txt2"><br>
SUM <input type="text" id="txt3"><br>
</body>
</html>

<html>
<head>
<title>Assign Values</title>
</head>
<body>
<form method="post" action="">
Message:<br>
<textarea name="message" cols="40" rows="5">Text Message</textarea>
<br><br>
<input type="submit" value="send">
</form>
</body>
</html>

<html>
<body>
<textarea cols="30" rows="5" wrap="hard" readonly="yes" disabled="yes">
As you can see many times word wrapping is often the desired look for your text areas. Since it
makes everything nice and easy to read and preserves line breaks.
</textarea>
</body>
</html>
<html>
<body>
<textarea cols="30" rows="5" wrap="hard" readonly="yes">
As you can see many times word wrapping is often the desired look for your text areas. Since it
makes everything nice and easy to read and preserves line breaks.
</textarea>
</body>
</html>

<html>
<head>
<title>Assign Values</title>
</head>
<body>
Enter Value of A <input type="text" id="txt1"><br>
Enter Value of B <input type="text" id="txt2"><br>
SUM <input type="text" id="txt3"><br>
<input type="button" onclick="compute()" value="Addition">
<script>
function compute(){
var a = document.getElementById("txt1").value;
var b = document.getElementById("txt2").value;
var c = parseInt(a) + parseInt(b);
document.getElementById("txt3").value = c;
}
</script>
</body>
</html>

<html>
<head>
<title>Assign Values</title>
</head>
<body>
<form action="#URL#" method="post">
Select Your Favorite Food <br>
<input type="checkbox" name="Fruits" id="a">Apple
<input type="checkbox" name="Fruits" id="b">Banana
<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>

<html>
<head>
<title>Assign Values</title>
</head>
<body>
<form action="#URL#" method="post">
<input type="radio" name="gender" id="radio_female" value="female"
checked="checked">female
<input type="radio" name="gender" id="radio_male" value="male"> male
<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>

<html>
<body>
<form method="post" action=" " onsubmit="return ValidateForm();">
<fieldset>
<legend>Select Course:</legend>
<input type="radio" name="br" value="IT" checked>IT<br>
<input type="radio" name="br" value="CO">CO<br>
<input type="radio" name="br" value="EJ">EJ<br>
<br>
<input type="submit" value="Submit now">
</fieldset>
</form>
<script type="text/javascript">
function ValidateForm()
{
var obj = document.getElementsByName("br");
for(var i = 0; i < obj.length; i++)
{
if(obj[i].checked == true)
{
if(confirm("You have selected " + obj[i].value))
return true;
else
return false;
}
}
}
</script>
</body>
</html>

<html>
<head>
<title>RadioButton and Checkbox</title>
<script type="text/javascript">
function poll()
{
var i,summary="";
panel=document.getElementById("panel");
form=document.getElementById("Eatables");
for(i=0;i<form.Fruits.length;i++)
{
if(form.Fruits[i].checked)
{
summary+=form.Fruits[i].value+" ";
}
}
panel.innerHTML="You have selected: "+summary;
if(document.getElementById("red").checked)
{
panel.innerHTML+="<br>Your Favorite Color is :
"+document.getElementById("red").value;
}
else if(document.getElementById("blue").checked)
{
panel.innerHTML+="<br>Your Favorite Color is :
"+document.getElementById("blue").value;
}
else
{
panel.innerHTML+="<br>Your Favorite Color is :
"+document.getElementById("green").value;
}
}
</script>
</head>
<body>
<form id="Eatables" action="welcome.html" method="post">
<input type="checkbox" name="Fruits" value="Mango">Mango
<input type="checkbox" name="Fruits" value="Orange">Orange
<input type="checkbox" name="Fruits" value="Banana">Banana
<br>Favorite Colour <br>
<input type="radio" name="colors" id="red" value="red">Red
<input type="radio" name="colors" id="blue" value="blue">Blue
<input type="radio" name="colors" id="green" value="green">Green
<input id="btn" type="button" value="ConfirmChoices" onclick="poll()">
</form>
<p id="panel"></p>
</body>
</html>

<html>
<head>
<title>Assign Values</title>
</head>
<body>
<form method="post" action="#URL#"> My favorite fruit:
<select name="fruit">
<option value="Apple" >Apple</option>
<option value="Pear" selected >Pear</option>
<option value="Peach">Peach</option>
</select> <br /><br />
<input type="submit" value="Send" />
</form>
</body>
</html>
<html >
<head>
<title> Select Option </title>
<script>
function init()
{
var panel =document.getElementById("panel");
var elem = document.getElementById("cityList").options.selectedIndex;
var city = document.getElementById("cityList").options[ elem ].value;
panel.innerHTML = "Selected: " + city +" - Index: " + elem;
}
</script>
</head>
<body>
<form action="" method="POST">
<select id="cityList" onchange="init()">
<option>Pune</option>
<option selected>Mumbai</option>
<option>Calcutta</option>
<option>Delhi</option>
<option>Mysore</option>
</select>
</form>
<p id="panel"></p>
</body>
</html>

<html>
<head>
<title></title>
</head>
<body>
<h1> Registration Page </h1>
<form name="registration" action="http://niralipublications.com/registration.html">
First name: <input type="text" name="realname" /> <br/><br/>
Last name: <input type="text" name="sirname" /> <br/><br/>
Password: <input type="password" name="pass"/> <br/><br/>
Re-Type Password: <input type="password" name="repass"/> <br/><br/>
Gender <input type="radio" name="sex" value="M"/> Male
<input type="radio" name="sex" value="F"/> Female<br/><br/>
City where you want to travel
<select name="city">
<optgroup label="North">
<option value="001"> Delhi </option>
<option value="002"> Chandigadh </option>
</optgroup> <optgroup label="South">
<option value="111"> Kerela</option>
<option value="112"> Kanyakumari </option>
</optgroup>
</select><br/><br/>
<label for="moreinfo"> Do you want more information about cities? </label>
<input type="checkbox" name="moreinfo" id="moreinfo" /><br/><br/>
Enter your comments:
<textarea name="comments" cols="40" rows="3" wrap="soft">
</textarea><br/><br/>
<h2> Additional Information </h2>
<input type="checkbox" name="confirm"/>
Above Information is Correct <br/><br/>
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

You might also like