Practical No.
: 05
Aim: Forms and Introducing video and audio tags
a) Design a web page with a form that uses all types of controls.
Input:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form method="POST" action="[Link]">
User ID: <input type="text" name="user_id" required/><br>
User Name: <input type="text" name="user_name" required/><br>
Gender:
<input type="radio" name="gender" value="male" required>Male
<input type="radio" name="gender" value="female" required>Female<br>
Password: <input type="password" name="password" required/><br>
Your Hobbies:
<input type="checkbox" name="reading" value="1">Reading
<input type="checkbox" name="painting" value="2"> Painting
<input type="checkbox" name="photography" value="3"> Photography
<input type="checkbox" name="dance" value="4"> Dance
<input type="checkbox" name="scrapbooking" value="5">
Scrapbookings<br>
Select City:
<select name="city" required>
<option value="None">None</option>
<option value="Mumbai">Mumbai</option>
<option value="Pune">Pune</option>
<option value="Delhi">Delhi</option>
</select><br>
Description:<br />
<textarea rows="5" cols="50" name="description"
required></textarea><br>
<input type="submit" name="submit" value="Submit"/>
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Thankyou</title>
</head>
<body>
<img src="[Link]" height="500px" width="350px"/>
</body>
</html>
b) Design an admission form for any course in your college with
text, pass word fields, check boxes, radio button and reset
button.
Input:
Refer Practical No.: 05(a)
c) Write a program to get the following output.
Input:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<table border=3>
<form method="POST" action="[Link]">
<tr>
<th colspan="2">Sign In</th>
</tr>
<tr>
<td>E-mail Address</td>
<td><input type="text" id="email" name="email" required></td>
</tr>
<tr>
<td>Password</td>
<td> <input type="password" name="password" required></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="submit"
name="submit" value="Submit"></td>
</tr>
</form>
</table>
</body>
</html>
d) Design a web page by placing a Video Clip on a Web Page.
Input:
<!DOCTYPE html>
<html>
<head>
<title>Video Clip on Web Page</title>
</head>
<body>
<h1>Welcome to the Video Clip Page</h1>
<video controls>
<source src="Sample Video.mp4" type="video/mp4">
</video>
<p>This is a sample video. Click the play button to watch the video clip.</p>
</body>
</html>
e) Design a web page by placing an Audio Clip on a Web Page.
Input:
<!DOCTYPE html>
<html>
<head>
<title>Video Clip on Web Page</title>
</head>
<body>
<h1>Welcome to the Audio Clip Page</h1>
<audio width="240" height="320" controls>
<source src="sampleaudio.mp3">
</audio>
<p>This is a sample audio. Click the play button to listen the video clip.</p>
</body>
</html>
f) Design a web page embedding image, audio and video.
Input:
<!DOCTYPE html>
<html>
<head>
<title>Multimedia</title>
</head>
<body>
<h1 style="text-align:center; color:red">Multimedia</h1><hr>
Sample Image
<img src="[Link]" width="300" height="200">   
Sample Video
<video width="240" height="320" controls>
<source src="Sample Video.mp4" controls>
</video>   
Sample Audio
<audio width="240" height="320" controls>
<source src="sampleaudio.mp3">
</audio>
</body>
</html>
