Question 1 - Design a form for on-line subscription of newspaper having the input fields for users details and e-mail ID. There should be validation checks for null fields and e-mail ID. By clicking the submit button, users will get weekly news at their e-mail ID.
solution -
<html>
<head>
<script type="text/javascript">
function getNews() {
var name = document.myform.name.value;
var age = document.myform.age.value;
var dob = document.myform.dob.value;
var email = document.myform.email.value;
if(name=="")
{
alert('Email is required');
}
else if(age=="")
{
alert('Age is required');
}
else if (dob=="") {
alert('Date of birth field is required');
}
else if (email=="") {
alert('Email is required');
}
else
{
alert('Thankyou for your Subscription, Now you will get weekly news update on you email');
}
}
</script>
</head>
<body>
<form name="myform">
<h2>NewsPaper Subscription</h2>
Name <input type="text" name="name"><br><br>
Age <input type="text" name="age"><br><br>
dob <input type="date" name="dob"><br><br>
email <input type="text" name="email"><br><br>
<input type="button" name="subscribe" value="subscribe" onclick="getNews()">
</form>
</body>
</html>
Question 2-Design an HTML page having four images aligned in the following format :
solution -
<html>
<head>
<style>
img{
width: 200px;
height: 150px;
/*because this is a img tag it will be applied to all images in page. */
}
/*here we are accessing image1 using their id then we have to use # symbol before id*/
#image1
{
margin-left: 40px;
margin-top:40px;
}
#image2
{
margin-left: 700px;
margin-top: 40px;
}
#image3
{
margin-left:450px;
margin-top: 100px;
}
#image4{
margin-left: 1100px;
margin-top: 50px;
}
</style>
</head>
<body>
<img src="C:\Users\user\Desktop\a50.jpg" id="image1">
<img src="C:\Users\user\Desktop\f22.jpg" id="image2">
<img src="C:\Users\user\Desktop\grad.jpg" id="image3">
<img src="C:\Users\user\Desktop\fans.jpg" id="image4">
</body>
</html>
In the "src" property of img tag you have to give the absolute/relative path of your image which you want to display on you web page. Also play with the margin-left, margin-top (means try to change the value of margin-left, margin-top) property of you img to change the position of your image across the webpage.
if you have any doubt related to this post, you can ask in comment section and if you want solution of any previous year questions. please post that question in section we will try to solve that
0 comments:
Post a Comment