<::forrn id"""stud entFonn">

<: label for"'"

narno">Full Nomo:</labol>
. ed>
<input type"""tex t " Id• "n omo" nome.,."nama" plooeholder "Enter full name " requir
0

<:span clo ss"'"err or " Id"' " nomeError" ></span>

<:label for"' "email">Emall:</label>

<:: '
input type:::"emall" id== "emall" name=="email" placeholder=="Enter email address" required >

<span class="error" id="emailError"></span>

<label for= "age">Age:</label>

<i nput type="number" id="age" name=="age" placeholder="Enter age" required min=" 18"
max="60">

<span class="error" id="ageError"></span>

<label for="gender">Gender:</label>

<select id="gender" name="gender" required>

<option value='"'>Select Gender</option>

<option value="Male">Male</option>

<option value="Female">Female</option>

<option value="Other">Other</option>

</select>

<span class="error" id="genderError"></span>

<label for="course">Course:</label>

<input type="text" id="course" name="course" placeholder="Enter course name" required>

<span class="error" id="courseError"></span>

<label for= "phone">Phone Number:</label>

<input type="tel" id="phone" name="phone" placeholder="Enter phone number" pattern="[0-

9]{1 O}" required>

<spa n class= "error" id="phoneError"></span>

 <button type="sub it"
n1 >Submit</button>
</form >

</div>

<script>

document.getElementByld('studentForm').addEventlistener('su bmit', function(event) {

let valid = true·
'

11 Clear previous error messages

document.querySelectorAll('.error').forEach(error => error.textContent = ");

// Validate Name

canst name= document.getElementByld('name').value.trim();

if (name.length< 3) {

document.getElementByld('nameError').textContent = "Name must be at least 3 characters

long.";

valid = false;

// Validate Email

canst email= document.getElementByld('email').value.trim();

canst emailRegex = / 1'(11 \s@]+@["\s@]+\.["\s@]+$/;

if (!emailRegex.test(email)) {

document.getElementByld('emailError').textContent = "Please enter a valid email address.";

valid = false;

II Validate Age
con st age = document.getElementByld('age').value.trim();

if (age< 1811 age> 60) {

document.getElementByld('ageError').textContent = "Age must be between 18 and 60 .";

r:

f
 Valid== false·
'

11 Valid ate Gender

st gend er= document.getElementByld('gender').value;

con
if (gend er== = "") {
t = "Please selec t a ge nd er.";
document.getElementByld('genderError').textConten

valid = false ,·

II Validate Phone Num ber

.value.trim ();
cans t phon e= document.getElementByld('phone')

con st phoneRegex = /"[0-9]{10}$/;

if ( !phoneRegex.test(phone)) {
t = "Phone numb er must be 10 digits.";
docu ment .getE leme ntByl d('ph oneE rror') .textC onten

valid = false;
}

if (!valid) {

event.preventDefault(); II Prevent form submission

if validation f · s

});

</scr ipt>

</bo dy>

</htm l>
 7

Student Record Form

Full Name:

Shraddha Mehrotra

Email:

[email protected]

Age :
20

Gender:
V

Female

Course :

BCA

Phone Number:
 9 · W rt tt n g pro9r11m
In )( M l for creatio
n o f OTO, w h ich
rules . sp e d fl e s set oi

' 7 ,m l ve rs io
n = "1.0 " st nnd alono --
< tO O C T Y P E d oc "yes"? >
um en 1 l
'-1E L E M E N T
do cu m e nt (o m p
''E L E M E N T om lo ye e r >
p lo yco (n am e , hi
< •E LE M E N T na rada te)>
m e (lastn arne , nr
<f E L E M E N T la st stname) >
na m e (#PCDATA
<! E L E M E N T first )>
name (#PCDATA
<! E L E M E N T l1ire )>
date (#PCDATA)>
J>
< d o cu m e n t>
< e m p lo ye e >
<na me>
< la st na m e> K el ly
< /la st na m e>
< fi rs tn a m e > G ra
ce < /f ir st na m e>
< /n a m e >
< h ire d a te > O ct o
b e r 1 5 , 20 05 < /h
ir ed at e>
< /e m p lo ye e >
< e m p lo ye e >
<name>
< la st n a m e > G ra
n t< /la st n a m e >
< fi rs tn a m e > C a ry
< /f ir st n a m e >
</name>
< hiredate >Octobe r 20, 2005 </hireda
te>
< /e m p lo ye e >
<e m p loyee>
<:na me >
<= la stname>Gab le
< /last name >
c"' firstnarne >Clark <
/firstname >
<.: /name >
<hireda te >Octorio r 25, 20
05 .--Jhi mdate >
<: /employee >
</document> /
//
/
OUTPUT:

1 ' r,,,. 111,

lh" \\II - ..
til, d,-.·, no t ;JJ'Pt';t, I1,l\ •·
1" .ir,,. ,;tvl<' 111form~t1on a<:~orrait•d \\1th II The dor um<"nt tri·,· 1•, ,;how n L,,., I11
"

►'d ly
(1r ,l( t"

0<to hi>r I'., .'00',

Gr,1n t
fary

Octo ber }0, 2005 i_ i

. ! ~ t •

.
Gabl e
Clar k

Octo ber )5, 2005 '....

,
lO. Create a style sheet in CSS/ XSL & display the document in internet
explorer.

index.xm/

<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>

<?xml-stylesheet type="text/css" href="nt.css"?>
<!DOCTYPE document [
<!ELEMENT document (employee)*>
<!ELEMENT employee (name, hiredate)>
<!ELEMENT name (lastname, firstname)>
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT firstname (#PCDATA)>
<!ELEMENT hiredate (#PCDATA)>
]>
<document>
<employee>
<name>
<lastname>Kelly</lastname>
<firstname>Grace</firstname>
</name>
<hiredate>October 15, 2005</hiredate>
</employee>
<employee>
<name>
<lastname>Grant</lastname>
<firstname>Cary</firstname>
</name>
<hiredate>October 20, 2005</hiredate>
</employee>
<employee>
<name>
<lastname>Gable</lastname>
<firstname>Clark</firstname>
</name>
<hiredate>October 25, 200 /hiredate>
</employee>
</document>
 I

nt.css
employee {
color: white;
background-color : gray;
width : 100%;
}
name {
color: green;
font-size : 40px;
background-color : powderblue;
display : block;
}
phone {
font-size : 25px;
font-weight: bold;
}
 OUTPU
T:

'-"" 1 0 ., m l

K e l ly G
:• hhi •i-l ► race
fi!IDE
G r a nt C
:•:&M t!-iXt ary
tiiliiJ
Gable C
larl<.