Scribd
Upload
26 views9 pages

Act 5

The document contains code for two different web forms: 1. An enrollment form with a video thumbnail that collects student information like name, email, gender, course, and semester. 2. A survey form that plays a "thank you" music file when submitted, and collects date, time, feedback on different advertisement types, name, email, and comments. It uses checkboxes, text inputs, and a textarea. Both forms are contained in HTML documents with CSS styling for layout and elements. The survey form additionally uses JavaScript to trigger playing the audio file when the form is submitted.

Uploaded by

Erwin De Jesus
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
26 views9 pages

Act 5

The document contains code for two different web forms: 1. An enrollment form with a video thumbnail that collects student information like name, email, gender, course, and semester. 2. A survey form that plays a "thank you" music file when submitted, and collects date, time, feedback on different advertisement types, name, email, and comments. It uses checkboxes, text inputs, and a textarea. Both forms are contained in HTML documents with CSS styling for layout and elements. The survey form additionally uses JavaScript to trigger playing the audio file when the form is submitted.

Uploaded by

Erwin De Jesus
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/ 9

ACT 5

Enrollment with video and thumbnail:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>STI Enrollment Form</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 20px;

.container {
position: relative;

max-width: 600px;

.video-thumbnail {

width: 100%;

height: 300px;

object-fit: cover;

.form-group {

margin-bottom: 20px;

.form-group label {

display: block;

margin-bottom: 5px;

.form-group input[type="text"],

.form-group input[type="email"],

.form-group input[type="tel"] {

width: 100%;

padding: 8px;

border: 1px solid #ccc;

border-radius: 4px;

.gender-group {

display: inline-block;

margin-right: 20px;

.form-group input[type="radio"] {

margin-right: 5px;
}

.form-group input[type="submit"],

.form-group input[type="reset"] {

padding: 10px 20px;

background-color: #007bff;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer;

</style>

</head>

<body>

<h2>STI Enrollment Form</h2>

<form action="#" method="post">

<div class="container">

<div class="form-group">

<label for="video">Enrollment Video:</label>

<video controls class="video-thumbnail" poster="C:\Users\CeciliaRivas\Downloads\For


Assignment\Thumbnail.png">

<source src="C:\Users\CeciliaRivas\Downloads\For Assignment\Enrollment.mp4"


type="video/mp4">

Your browser does not support the video tag.

</video>

</div>

</div>

<div class="form-group">

<label for="full-name">Full Name:</label>


<input type="text" id="full-name" name="full-name" required>

</div>

<div class="form-group">

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

</div>

<div class="form-group">

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

<input type="tel" id="phone" name="phone" required>

</div>

<div class="form-group">

<label>Gender:</label>

<div class="gender-group">

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label>

</div>

<div class="gender-group">

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label>

</div>

<div class="gender-group">

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label>

</div>

</div>

<div class="form-group">

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

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

</div>
<div class="form-group">

<label for="semester">Semester:</label>

<input type="text" id="semester" name="semester" required>

</div>

<div class="form-group">

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</div>

</form>

</body>

</html>

Survey Form with Thanks Music:

The audio will play when the user hit the submit button:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>STI Advertisement Survey Form</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

.container {

max-width: 600px;

margin: 20px auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

.form-group {

margin-bottom: 20px;

label {

display: block;

font-weight: bold;

margin-bottom: 5px;

input[type="text"],
input[type="date"],

input[type="time"],

textarea {

width: 100%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;

input[type="checkbox"] {

margin-right: 5px;

vertical-align: middle;

input[type="submit"] {

background-color: #4CAF50;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

input[type="submit"]:hover {

background-color: #45a049;

</style>

</head>

<body>

<div class="container">

<h2>STI Advertisement Survey Form</h2>


<form action="#" method="POST" id="surveyForm">

<div class="form-group">

<label for="date">Date:</label>

<input type="date" id="date" name="date" required>

</div>

<div class="form-group">

<label for="time">Time:</label>

<input type="time" id="time" name="time" required>

</div>

<div class="form-group">

<label>Advertisements (Select all that apply):</label><br>

<input type="checkbox" id="tv" name="tv" value="TV Advertisements">

<label for="tv">TV Advertisements</label><br>

<input type="checkbox" id="radio" name="radio" value="Radio Advertisements">

<label for="radio">Radio Advertisements</label><br>

<input type="checkbox" id="online" name="online" value="Online Banner Ads">

<label for="online">Online Banner Ads</label><br>

<input type="checkbox" id="social" name="social" value="Social Media Ads">

<label for="social">Social Media Ads</label><br>

<input type="checkbox" id="print" name="print" value="Print Ads">

<label for="print">Print Ads</label>

</div>

<div class="form-group">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

</div>

<div class="form-group">

<label for="email">Email:</label>

<input type="text" id="email" name="email" required>


</div>

<div class="form-group">

<label for="comments">Comments/Feedback:</label>

<textarea id="comments" name="comments" rows="4"></textarea>

</div>

<audio id="thanksAudio" controls style="display: none;">

<source src="C:\Users\CeciliaRivas\Downloads\For Assignment\Thanks.mp3"


type="audio/mpeg">

Your browser does not support the audio element.

</audio>

<input type="submit" value="Submit" id="submitButton">

</form>

</div>

<script>

document.getElementById("surveyForm").addEventListener("submit", function(event) {

event.preventDefault();

var audio = document.getElementById("thanksAudio");

audio.play();

});

</script>

</body>

</html>

You might also like