Wednesday, 18 October 2017

NIIT HTML Q1 ACTIVITY BOOK CHAPTER 5 Online registration ~ niit post

Q1) SkyLight university organizes short term training programs for its existing students to enhance their technical and professional skills. For this, you need to create a web page named
    Register displaying the details about the training sessions in the upcoming weks. In addition, you need to add a link to the online registration form on the register web page.
    However, to participate in such programs, the sudents need to enroll by filling the online registration form. For this, you need to create a form that contains the following fields.
    *First Name
    *Last Name
    *Email ID
    *Training Program
    *Roll Number
    *Contact Number
 
 In addition, you need to add two buttons, Reset and submit, on the form, as shown in the following figure.

Ans1)


Type the code in Notepad and save the file as registration.html

<html>
<head><link type="text/css" rel="stylesheet" href="Externalstylesheet/homestylesheet.css"/>
<style>

table
{
border:solid 2px navy;
font-size:20px;
float:right;
}
th{
text-align:center;
padding:3px;
}
td
{
text-align:left;
padding:3px;
}
tr
{
background-color:white;
}
h1,img{float:right;}
a{font-family:futura MD bt;
font-weight:bold;
float:left;
font-size:20px;
position:relative;
left:1000px;
}
</style>
</head>
<body>
<table>
<tr><th><b>Training Sessions in the Upcoming Weeks</b></th></tr>
<tr>
<td>A two days training session on android this weekend. Interested candidates can apply.</td>
</tr>
<tr>
<td>training on ethical hacking from 30th march,2013 to 28th april,2013. Interested candidates can apply.</td>
</tr>
<tr>
<td>Live project Training on robotics from 5th April, 2013 to 30th April, 2013. Interested candidates can apply.</td>
</tr>
<tr>
<td>Live Project Training with certification on java in the upcoming months. Interested candidates can apply after 31st may,2013.</td>
</tr>
 </table>
<br><br><br><br><br><br><br><br><br><br>
<a href="onlineregistrationfrom.html" target="frame4"><img src="images\Register Me.png" width=170 height=120</img></a>
</body>
</html>





Type the code in Notepad and save the file as onlineregistrationform.html


<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="ExternalStylesheet/homestylesheet.css"/>

<style>
button{
border:2px solid navy;
background:White;
height:40px;
width:120px;
border-radius:5px;
background-color:navy;
color:White;
}
h{
text-color:navy;
padding-left:80px;
text-align:center;
}
td{
font-size:20px;
width:400px;
padding:5px;
}
form{
border:5px solid red;
}
h1{
color:#C71585;
}
table{
margin-right:400px;
margin-left:400px;
}
</style>
</head>
<body>
<form name="form1">
<h1>Register Online</h1>
<Table>
<tr>
<td>First Name</td>
<td><input type="text" name="usrname" PlaceHolder="Enter your First Name" required></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="email" id="mail" PlaceHolder="Enter Your email address" pattern="[^@]+@[a-zA-z]+\.[a-zA-Z]{2,6}" required></td>
</tr>
<tr>
<td> Roll Number</td>
<td><input type="text id="roll"  PlaceHolder="Enter Your Roll Number" required></td>
</tr>
<tr>
<td>Training Program</td>
<td><select id="sel">
<option value="movie">select Training</option>
<option value="andro">Andro</option>
<option value="java">Java</option>
<option value="C">Robotics</option>
<option value="hack">ethical Hacking</option>
</select></td>
</tr>
<tr>
<td> Contact NUmber</td>
<td><input type="num" id="number" PlaceHolder="Enter Your Conatct Number" required></td>
</tr>
<tr><td>
<button type="submit">Submit</button></td>
<td><Button type="reset">Reset</button>
</td></tr>
</table>
</form>
</body>
</html>


open the mainframe.html file in google chrome.
Read More »

NIIT HTML Q2 ACTIVITY BOOK CHAPTER 5 ADDING CONSTRAINTS ~ niit post

Question 2:  after creating the online registration form,you need to incorporate the following constraints on the form element:


Ans:-
<!DOCTYPE HTML>
<html>
<head><link type="text/css" rel="stylesheet" href="external stylesheet/homestylesheet.css"/>
<script>
function checkNum()
{
if(!form1.number.value.match</^[0-9]+$/) && form1.number.value !="")
    {
form1.number.value="";
form1.number.focus();
alert"please enter only number in text");
    }
}
function checkRoll()
{
if (!form1.roll.value.match(/^[0-9]+$) && form1.roll.value !="")
   {
from1.roll.value="";
from1.roll.focus();
alert("please enter only alphabets in text");
   }
}
function checkFirstName()
{
if (!form1.usrname.value.match(/^[0-9]+$) && form1.usrname.value !="")
   {
from1.usrname.value="";
from1.usrname.focus();
alert("please enter only alphabets in text");
   }
}
function checkLastName()
{
if (!form1.usrname1.value.match(/^[0-9]+$) && form1.usrname1.value !="")
   {
from1.usrname1.value="";
from1.usrname1.focus();
alert("please enter only alphabets in text");
   }
}
fucnktion check()
{
if((document.form1.usrname.value!="")&&(document.form1.usrname1.value!="")&&(document.form1.mail.value!="")&&(document.form1.roll.value!="")(document.form1.number.value!="")&&(document.form1.sel.value!="andro"))
{
alert("your detail has been saved.\nplease submit the course fee at the cash counter before 13-04-2013 and collect your id card.\nthe training will start on 23-04-2013 from 10:30am to 4:30pm.");
}
else if((document.form1.usrname.value!="")&&(document.form1.usrname1.value!="")&&(document.form1.mail.value!="")&&(document.form1.roll.value!="")(document.form1.number.value!="")&&(document.form1.sel.value!="java"))
{
alert("your detail has been saved.\nplease submit the course fee at the cash counter before 20-03-2013 and collect your id card.\nthe java training will start on 30-04-2013 from 10:30am to 4:30pm.");
}
else if((document.form1.usrname.value!="")&&(document.form1.usrname1.value!="")&&(document.form1.mail.value!="")&&(document.form1.roll.value!="")(document.form1.number.value!="")&&(document.form1.sel.value!="C"))
{
alert("your detail has been saved.\nplease submit the course fee at the cash counter before 20-04-2013 and collect your id card.\nthe Robotics training will start on 30-04-2013 from 10:30am to 4:30pm.");
}
else if((document.form1.usrname.value!="")&&(document.form1.usrname1.value!="")&&(document.form1.mail.value!="")&&(document.form1.roll.value!="")(document.form1.number.value!="")&&(document.form1.sel.value!="hack"))
{
alert("your detail has been saved.\nplease submit the course fee at the cash counter before 13-05-2013 and collect your id card.\n  training will start on 31-04-2013 from 10:30am to 4:30pm.");
}
}
</script>
<style>
button{
border:2px solid navy;
background:white;
height:40px;
width:120px;
border-radius:5px;
background-color:navy;
color:white;
}
h1{
text-color:navy;
padding-left:80px;
text-align:center;
}
td{
font-size:20px;
width:400px;
padding:5px;
}
form{
border:5px solid red;
}
h1{
color:#C71585;
}
table{
margin-right:400px;
margin-left:400px;
}
</style>
</head>
<body>
<form name="form1" onsubmit="check();">
<h1>Registration Online</h1>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="usrname" placeholder="enter your first name" onkeyup="checkFirstName();"required></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="usrname1" placeholder="enter your last name" onkeyup="checkLastName();"required></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type="text" title="email" id="mail" placeholder="enter your email address" pattern="[^@]+@[a-zA-Z]+\.[a-zA-Z]{2,6}"required></td>
</tr>
<tr>
<td>Roll Number</td>
<td><input type="text" id="roll" placeholder="enter your roll number" onkeyup="checkRoll();"required></td>
</tr
<td>Training Program</td>
<td><select id="sel">
<option value="movie">Select Training </option>
<option value="andro">Android </option>
<option value="java">Java </option>
<option value="C">Robotics </option>
<option value="hack">Ethical Hacking </option>
</select></td>
</tr>
<tr>
<td>Contact Number</td>
<td><input type="num" id="number" onkeyup="checkRoll();" placeholder="enter your contact number" required></td>
</tr>
<tr><td>
<Button type="submit">Submit<Button></td>
<td><BUTTON type="reset">Reset</BUTTON></td>
</tr>
</table>
</form>
</body>
</html>
Read More »

NIIT HTML Q1 ACTIVITY BOOK CHAPTER 8 ~ niit post

Q1) You have been assigned a task to create a web page, sign in/up,
    in the skyLight university website. The sign In/Up web page contains two forms, create an account and sign in.
    The sign up form contains the Name, Password, and confirm paaword fields. Create an account form contains the name, password fields.
    you need to implement functionality in the create an account form in such a way that users' details
    are not stored locally if the browser is closed. However, if the browser is not closed, the users', details should be stored locally if the browser is
    closed. however, if the browser is not closed, the users' details should be stored locally if the
    browser is not closed. however if the browser is not closed, the users details should be
    stored locally and the password gets automatically filled in the password field of the sign in form
    when the user enters the name.the sign in/up web page is shown in the folllowing figure.




Ans1)



<html>
<link type="text/css" rel="stylesheet"href="ExternalStylesheet\homestylesheet.css'/>
<style>
th{
color:red;
}
#form2{
position:absolute;
top:50px;
left:400px;
width:320px;
height:200px;
border:3px solid red;
margin-left:190px;
}
#form2{
width:320px;
height:200px;
border:3px solid red;
margin-left:190px;
margin-right:50px;
}
button{
margin-left:80px;
color:white;
background-color:blue;
}
</style>
<SCRIPT>
function checksum()
{
  if (!form1.username.value.match(/^[a-zA-Z]+$/)&& form1.username.value !="")
    {
form1.username.value="";
form1.username.focus();
alert("please enter only alphabets in text");
    }
}








function checkpassword()
{
if(form1.pass1.value!=form1.pass2.value)
{
               alert("passwords entered do not match");
}
else
if(form1.pass1.value!=form1.pass2.value)
{
             alert("Passwords entered do not match");
}
else
if(typeof (Storage)!=="unidentified"){
                    sessionStorage.userid= form1.username.value;
                    sessionStorage.passwrd = form1.pass1.value;
                    alert("Registered");
      }
      }
function login()
{
       if(typeof(Storage)!=="underfined")
      {
       if (form2.username1.value==sessionStorageuserid){
         form2.pass3.value=sessionStorage.passwrd;
       }
       }
       }
       function onsubmit()
       {
       if((form2.usrname1.value!="")&&(form2.pass3.value==sessionStorage.passwrd))
                {
                 alert(Signed In");
                }
        else
        {
        alert("Password do not match");
        }
        }






</SCRIPT>
</HEAD>
<BODY>
<FORM id="form1" name="sign up" onsubmit="checkPassword()">
<TABLE>
<tr>
<th colspam="2">Create an Account</th>
</tr>
<tr>
<td>Name:</td><td><Input type="text" name="username" onkeyup="checkName();"required></td>
</tr>
<tr>
<td>Password:</td><td><Input type="password" name="pass1"required></td>
</tr>
<tr>
<td>Confirm Password:</td><td><Input type="password" name="pass2"required></td>
</tr>
<tr><td><BR><Button type="Submit"Register</td></tr>
</TABLE>
</FORM>
<FORM id="form2" name="Sign In" onsubmit="onSubmit();">
<TABLE>
<TR>
<TH colspan="2">Sign In</TH>
</TR>
<TR>
<TD>Name:</TD><TD><Input type="Text" name="username1" onkeyup="checkname();" onchange="login;" required></TD>
</TR>
<TR>
<TD>Password:</TD><TD><Input type="password" name name="pass3" required></TD>
</TR>
<TR><TD><BR><Button type="Submit">Sing In</TD></TR></TABLE>
</FORM>
</BODY></HTML>
Read More »