Groupno4 HTML Forms

TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES
QUEZON CITY
COLLEGE OF INFORMATION TECHNOLOGY EDUCATION(CITE)

ITE011- Introduction to Computing
Name/Program: Group 4 Section: IT11S2

Aguillon, Nicole L. - BSIT
Asuncion, Daniella F. - BSIT
Evangelista, Aivan C. - BSIT
Legada, Kaizen Cyrus R. - BSIT
Reyes, Lianne Czarmaine D. - BSIT
Taguic, Mc Jerviez A - BSIT
Assessment Task: HTML FORMS

Source code:
<html lang="en-US" class="supernova"><head>
<title>Online Order Form</title>
<style type="text/css">@media print{.form-section{display:inline!important}.form-pagebreak{display:none!

important}.form-section-closed{height:auto!important}.page-section{position:initial!important}}</style>
<link type="text/css" rel="stylesheet" href="https://cdn01.jotfor.ms/themes/CSS/5e6b428acc8c4e222d1beb91.css?

themeRevisionID=5f30e2a790832f3e96009402"/>
<link type="text/css" rel="stylesheet" href="https://cdn02.jotfor.ms/css/styles/payment/payment_styles.css?

3.3.28084" />
<link type="text/css" rel="stylesheet" href="https://cdn03.jotfor.ms/css/styles/payment/payment_feature.css?

3.3.28084" />
<style type="text/css" id="form-designer-style">
/* Injected CSS Code */
/*PREFERENCES STYLE*/
/* NEW THEME STYLE */
/* colors */
.form-textbox, .form-textarea {
color: undefined;
.rating-item input:hover+label {
color: #2e69ff;
li[data-type=control_fileupload] .qq-upload-button,
.until-text,
.form-submit-reset {
color: #2c3345;
}
.stageEmpty.isSmall{
color: #CAD0CF;
.rating-item label {
color: #b8bdc9;
.currentDate,
.pickerItem select,
.appointmentCalendar .calendarDay,
.calendar.popup th,
.calendar.popup table tbody td,
.calendar-new-header>*,
.form-collapse-table {
color: #2C3345;
.appointmentCalendar .dayOfWeek {
color: #2e69ff;
.appointmentSlotsContainer > * {
color: #2e69ff;
li[data-type=control_fileupload] .jfUpload-heading,
::placeholder,
.form-dropdown.is-active,
.form-dropdown:first-child,
.form-spinner-input {
color: #57647e;
}
.appointmentCalendar .calendarWeek .calendarDay.isUnavailable,
.calendar tr.days td.otherDay,
.calendar tr.days td:hover:not(.unselectable) {
color: #CAD0CF;
span.form-sub-label, label.form-sub-label, div.form-header-group .form-subHeader,
.rating-item-title.for-to > label:first-child,
.rating-item-title.for-from > label:first-child,
.rating-item-title .editor-container * {
color: #57647E;
.form-pagebreak-back{
color: #2c3345;
.rating-item input:checked+label,
.rating-item input:focus+label {
color: #FFFFFF;
.clear-pad-btn {
color: #57647e;
.form-textbox::placeholder,
.form-dropdown:not(.time-dropdown):not(:required),
.form-dropdown:not(:required),
.form-dropdown:required:invalid {
color: #57647e;
/* border-colors */
.form-dropdown,
.form-textarea,
.form-textbox,
li[data-type=control_fileupload] .qq-upload-button,
.rating-item label,
.rating-item input:focus+label,
.jf-form-buttons,
.form-checkbox+label:before, .form-checkbox+span:before, .form-radio+label:before, .form-radio+span:before,
.signature-pad-passive,
.signature-wrapper,
.appointmentCalendarContainer,
.appointmentField .timezonePickerName,
.appointmentDayPickerButton,
.appointmentCalendarContainer .monthYearPicker .pickerItem+.pickerItem,
.appointmentCalendarContainer .monthYearPicker,
.appointmentCalendar .calendarDay.isActive .calendarDayEach, .appointmentCalendar .calendarDay.isToday .calendar

DayEach, .appointmentCalendar .calendarDay:not(.empty):hover .calendarDayEach,
.calendar.popup:before,
.calendar-new-month,
.form-matrix-column-headers, .form-matrix-table td, .form-matrix-table td:last-child,
.form-matrix-table th, .form-matrix-table th:last-child, .form-matrix-table tr:last-child td, .form-matrix-table tr:last-child

th, .form-matrix-table tr:not([role=group])+tr[role=group] th,
.form-matrix-headers.form-matrix-column-headers,
.isSelected .form-matrix-column-headers:nth-last-of-type(2),
li[data-type=control_inline] input[type=email], li[data-type=control_inline] input[type=number],
li[data-type=control_inline] input[type=tel], li[data-type=control_inline] input[type=text],
.stageEmpty.isSmall {
border-color: #b8bdc9;
}
border-color: #2e69ff;
.appointmentSlot,
.form-checkbox:checked+label:before, .form-checkbox:checked+span:before, .form-checkbox:checked+span

label:before,
.form-radio:checked+label:before, .form-radio:checked+span:before,
.form-dropdown:focus, .form-textarea:focus, .form-textbox:focus, .signature-wrapper:focus,
.form-line[data-payment="true"] .form-product-item .p_checkbox .checked,
.form-dropdown:hover, .form-textarea:hover, .form-textbox:hover, .signature-wrapper:hover {
border-color: #2e69ff;
.calendar tr.days td:hover:not(.unselectable):after {
border-color: #e5eaf4;
.form-header-group,
.form-buttons-wrapper, .form-pagebreak, .form-submit-clear-wrapper,
.form-pagebreak-next,
.form-pagebreak-back,
.form-checkbox:hover+label:before, .form-checkbox:hover+span:before, .form-radio:hover+label:before, .form-

radio:hover+span:before{
border-color: #F3F3FE;
.form-pagebreak-back:focus, .form-pagebreak-next:focus, .form-submit-button:focus {
border-color: rgba(46, 105, 255, 1);
/* background-colors */
.form-line-active {
background-color: #F1F5FF;
.form-line-error {
background-color: #FFD6D6;
.form-matrix-column-headers, .form-matrix-row-headers,
.form-spinner-button-container>*,
.form-collapse-table,
.form-collapse-table:hover,
.appointmentDayPickerButton {
background-color: #e5eaf4;
.calendar.popup, .calendar.popup table,
.calendar.popup table tbody td:after{
background-color: #FFFFFF;
.appointmentCalendar .calendarDay.isActive .calendarDayEach,
.appointmentFieldRow.forSelectedDate,
.calendar.popup tr.days td.selected:after,
.calendar.popup:after,
.submit-button,
.form-checkbox:checked+label:before, .form-checkbox:checked+span:before, .form-checkbox:checked+span

label:before,
.form-radio+label:after, .form-radio+span:after,
.appointmentCalendar .calendarDay:after,

.rating-item input:focus+label {
background-color: #2e69ff;
.appointmentSlot.active {
background-color: #2e69ff !important;
.clear-pad-btn,
.appointmentCalendar .dayOfWeek,
.calendar.popup th {
background-color: #eef3ff !important;
.appointmentField .timezonePicker:hover+.timezonePickerName,
.form-spinner-button-container>*:hover {
background-color: #eef3ff;
.form-matrix-values,
.form-matrix-values,
.signature-wrapper,
.signature-pad-passive,
.rating-item label,
.form-checkbox+label:before, .form-checkbox+span:before,
.form-radio+label:before, .form-radio+span:before {
li[data-type=control_fileupload] .qq-upload-button {
background-color: #fbfcff;
.JotFormBuilder .appContainer #app li.form-line[data-type=control_matrix].isSelected
.questionLine-editButton.forRemove:after,
.JotFormBuilder .appContainer #app li.form-line[data-type=control_matrix].isSelected .questionLine-
editButton.forRemove:before {
.appointmentCalendarContainer, .appointmentSlot,
.rating-item-title.for-to > label:first-child,
.rating-item-title.for-from > label:first-child,
.rating-item-title .editor-container *,
.calendar-opened {
background-color: transparent;
.page-section li.form-line-active[data-type="control_button"] {
background-color: #F1F5FF;
.appointmentCalendar .calendarDay.isSelected:after {
color: #FFFFFF;
/* shadow */
.form-dropdown:hover, .form-textarea:hover, .form-textbox:hover, .signature-wrapper:hover,
.calendar.popup:before,
.jSignature:hover,
li[data-type=control_fileupload] .qq-upload-button-hover,
.form-line[data-payment="true"] .form-product-item .p_checkbox:hover .select_border,
.form-checkbox:hover+label:before, .form-checkbox:hover+span:before, .form-radio:hover+label:before, .form-

radio:hover+span:before,
.calendar.popup:before {
border-color: rgba(46, 105, 255, 0.5);
box-shadow: 0 0 0 2px rgba(46, 105, 255, 0.25);

}
.form-dropdown:focus, .form-textarea:focus, .form-textbox:focus, .signature-wrapper:focus,
li[data-type=control_fileupload] .qq-upload-button-focus,
.form-checkbox:focus+label:before, .form-checkbox:focus+span:before, .form-radio:focus+label:before, .form-

radio:focus+span:before,
.calendar.popup:before {
border-color: rgba(46, 105, 255, 1);
box-shadow: 0 0 0 3px rgba(46, 105, 255, 0.25);
.calendar.popup table tbody td{
box-shadow: none;
/* button colors */
.submit-button {
background-color: #18BD5B;
border-color: #18BD5B;
.submit-button:hover {
background-color: #16AA52;
border-color: #16AA52;
.form-pagebreak-next {
background-color: #2e69ff;
.form-pagebreak-back {
background-color: #e5e7f2;
.form-pagebreak-back:hover {
background-color: #CED0DA;
border-color: #CED0DA;
.form-pagebreak-next:hover {
background-color: #2554CC;
border-color: #2554CC;
.form-sacl-button, .form-submit-print {
background-color: transparent;
color: #2c3345;
.form-sacl-button:hover, .form-submit-print:hover,
.appointmentSlot:not(.disabled):not(.active):hover,
.appointmentDayPickerButton:hover,
background-color: #96B4FF;
/* payment styles */
.form-line[data-payment=true] .form-textbox,
.form-line[data-payment=true] .select-area,
.form-line[data-payment=true] #coupon-input,
.form-line[data-payment=true] #coupon-container input,
.form-line[data-payment=true] input#productSearch-input,
.form-line[data-payment=true] .form-product-category-item:after,
.form-line[data-payment=true] .filter-container .dropdown-container .select-content,
.form-line[data-payment=true] .form-textbox.form-product-custom_quantity,
.form-line[data-payment="true"] .form-product-item .p_checkbox .select_border,
.form-line[data-payment="true"] .form-product-item .form-product-container .form-sub-label-container

span.select_cont,
.form-line[data-payment=true] select.form-dropdown {
border-color: undefined;
.form-line[data-payment="true"] hr,
.form-line[data-payment=true] .p_item_separator,
.form-line[data-payment="true"] .payment_footer.new_ui,
.form-line.card-3col .form-product-item.new_ui,
.form-line.card-2col .form-product-item.new_ui {
.form-line[data-payment=true] .form-product-category-item {
.form-line[data-payment=true] #coupon-input,
.form-line[data-payment=true] .form-textbox.form-product-custom_quantity,
.form-line[data-payment=true] input#productSearch-input,
.form-line[data-payment=true] .select-area,
.form-line[data-payment=true] .custom_quantity,
.form-line[data-payment=true] .filter-container .select-content,
.form-line[data-payment=true] .p_checkbox .select_border {
}
.form-line[data-payment=true] .form-product-category-item.title_collapsed.has_selected_product .selected-items-icon
{
background-color: undefined;
.form-line[data-payment=true].form-line.card-3col .form-product-item,
.form-line[data-payment=true].form-line.card-2col .form-product-item {
background-color: undefined;
.form-line[data-payment=true] .payment-form-table input.form-textbox,
.form-line[data-payment=true] .payment-form-table input.form-dropdown,
.form-line[data-payment=true] .payment-form-table .form-sub-label-container > div,
.form-line[data-payment=true] .payment-form-table span.form-sub-label-container iframe,
.form-line[data-type=control_square] .payment-form-table span.form-sub-label-container iframe {
/* icons */
.appointmentField .timezonePickerName:before {
.appointmentCalendarContainer .monthYearPicker .pickerArrow.prev:after {
.appointmentCalendarContainer .monthYearPicker .pickerArrow.next:after {
.appointmentField .timezonePickerName:after {
li[data-type=control_datetime] [data-wrapper-react=true].extended>div+.form-sub-label-container .form-

textbox:placeholder-shown,
li[data-type=control_datetime] [data-wrapper-react=true]:not(.extended) .form-textbox:not(.time-

dropdown):placeholder-shown,
.appointmentCalendarContainer .currentDate {
background-image:
url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0i
bm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1Ljk0ODkgNVYxNS4wMjZDMT
UuOTQ4OSAxNS41NjM5IDE1LjUwMjYgMTYgMTQuOTUyMSAxNkgwLjk5NjgwNUMwLjQ0NjI4NSAxNiAwIDE1LjU2MzkgM
CAxNS4wMjZWNUgxNS45NDg5Wk00LjE5MjQ1IDExLjQxNjdIMi4zNzQ3NEwyLjI4NTE1IDExLjQyNDdDMi4xMTA3OCAxMS4
0NTY1IDEuOTY4MDEgMTEuNTc5MiAxLjkwNzUyIDExLjc0MjJMMS44ODQzNyAxMS44MjY4TDEuODc2MzQgMTEuOTE2N1
YxMy42NjY3TDEuODg0MzcgMTMuNzU2NUMxLjkxNjAyIDEzLjkzMTUgMi4wMzg0IDE0LjA3NDcgMi4yMDA4MyAxNC4xMz
U0TDIuMjg1MTUgMTQuMTU4NkwyLjM3NDc0IDE0LjE2NjdINC4xOTI0NUw0LjI4MjAzIDE0LjE1ODZDNC40NTY0MSAxNC4x
MjY5IDQuNTk5MTggMTQuMDA0MSA0LjY1OTY3IDEzLjg0MTFMNC42ODI4MiAxMy43NTY1TDQuNjkwODUgMTMuNjY2N
1YxMS45MTY3TDQuNjgyODIgMTEuODI2OEM0LjY1MTE3IDExLjY1MTkgNC41Mjg3OSAxMS41MDg2IDQuMzY2MzUgMTE
uNDQ3OUw0LjI4MjAzIDExLjQyNDdMNC4xOTI0NSAxMS40MTY3Wk04Ljg4MzI5IDExLjQxNjdINy4wNjU1OUw2Ljk3NiAxMS
40MjQ3QzYuODAxNjIgMTEuNDU2NSA2LjY1ODg1IDExLjU3OTIgNi41OTgzNyAxMS43NDIyTDYuNTc1MjIgMTEuODI2OEw2
LjU2NzE5IDExLjkxNjdWMTMuNjY2N0w2LjU3NTIyIDEzLjc1NjVDNi42MDY4NyAxMy45MzE1IDYuNzI5MjUgMTQuMDc0Ny
A2Ljg5MTY4IDE0LjEzNTRMNi45NzYgMTQuMTU4Nkw3LjA2NTU5IDE0LjE2NjdIOC44ODMyOUw4Ljk3Mjg4IDE0LjE1ODZD
OS4xNDcyNiAxNC4xMjY5IDkuMjkwMDMgMTQuMDA0MSA5LjM1MDUxIDEzLjg0MTFMOS4zNzM2NyAxMy43NTY1TDku
MzgxNyAxMy42NjY3VjExLjkxNjdMOS4zNzM2NyAxMS44MjY4QzkuMzQyMDIgMTEuNjUxOSA5LjIxOTY0IDExLjUwODYgOS
4wNTcyIDExLjQ0NzlMOC45NzI4OCAxMS40MjQ3TDguODgzMjkgMTEuNDE2N1pNNC4xOTI0NSA2LjgzMzMzSDIuMzc0NzR
MMi4yODUxNSA2Ljg0MTM5QzIuMTEwNzggNi44NzMxNCAxLjk2ODAxIDYuOTk1OTEgMS45MDc1MiA3LjE1ODg3TDEuOD
g0MzcgNy4yNDM0NkwxLjg3NjM0IDcuMzMzMzNWOS4wODMzM0wxLjg4NDM3IDkuMTczMjFDMS45MTYwMiA5LjM0O
DE1IDIuMDM4NCA5LjQ5MTM3IDIuMjAwODMgOS41NTIwNUwyLjI4NTE1IDkuNTc1MjhMMi4zNzQ3NCA5LjU4MzMzSDQ
uMTkyNDVMNC4yODIwMyA5LjU3NTI4QzQuNDU2NDEgOS41NDM1MyA0LjU5OTE4IDkuNDIwNzUgNC42NTk2NyA5LjI1N
zhMNC42ODI4MiA5LjE3MzIxTDQuNjkwODUgOS4wODMzM1Y3LjMzMzMzTDQuNjgyODIgNy4yNDM0NkM0LjY1MTE3IDc
uMDY4NTIgNC41Mjg3OSA2LjkyNTI5IDQuMzY2MzUgNi44NjQ2MUw0LjI4MjAzIDYuODQxMzlMNC4xOTI0NSA2LjgzMzMz
Wk04Ljg4MzI5IDYuODMzMzNINy4wNjU1OUw2Ljk3NiA2Ljg0MTM5QzYuODAxNjIgNi44NzMxNCA2LjY1ODg1IDYuOTk1OT
EgNi41OTgzNyA3LjE1ODg3TDYuNTc1MjIgNy4yNDM0Nkw2LjU2NzE5IDcuMzMzMzNWOS4wODMzM0w2LjU3NTIyIDkuM
TczMjFDNi42MDY4NyA5LjM0ODE1IDYuNzI5MjUgOS40OTEzNyA2Ljg5MTY4IDkuNTUyMDVMNi45NzYgOS41NzUyOEw3Lj
A2NTU5IDkuNTgzMzNIOC44ODMyOUw4Ljk3Mjg4IDkuNTc1MjhDOS4xNDcyNiA5LjU0MzUzIDkuMjkwMDMgOS40MjA3N
SA5LjM1MDUxIDkuMjU3OEw5LjM3MzY3IDkuMTczMjFMOS4zODE3IDkuMDgzMzNWNy4zMzMzM0w5LjM3MzY3IDcuMj
QzNDZDOS4zNDIwMiA3LjA2ODUyIDkuMjE5NjQgNi45MjUyOSA5LjA1NzIgNi44NjQ2MUw4Ljk3Mjg4IDYuODQxMzlMOC44
ODMyOSA2LjgzMzMzWk0xMy41NzQxIDYuODMzMzNIMTEuNzU2NEwxMS42NjY4IDYuODQxMzlDMTEuNDkyNSA2Ljg3M
zE0IDExLjM0OTcgNi45OTU5MSAxMS4yODkyIDcuMTU4ODdMMTEuMjY2MSA3LjI0MzQ2TDExLjI1OCA3LjMzMzMzVjkuM
DgzMzNMMTEuMjY2MSA5LjE3MzIxQzExLjI5NzcgOS4zNDgxNSAxMS40MjAxIDkuNDkxMzcgMTEuNTgyNSA5LjU1MjA1TD
ExLjY2NjggOS41NzUyOEwxMS43NTY0IDkuNTgzMzNIMTMuNTc0MUwxMy42NjM3IDkuNTc1MjhDMTMuODM4MSA5LjU
0MzUzIDEzLjk4MDkgOS40MjA3NSAxNC4wNDE0IDkuMjU3OEwxNC4wNjQ1IDkuMTczMjFMMTQuMDcyNSA5LjA4MzMzV
jcuMzMzMzNMMTQuMDY0NSA3LjI0MzQ2QzE0LjAzMjkgNy4wNjg1MiAxMy45MTA1IDYuOTI1MjkgMTMuNzQ4IDYuODY
0NjFMMTMuNjYzNyA2Ljg0MTM5TDEzLjU3NDEgNi44MzMzM1oiIGZpbGw9IiM1ODY1N0MiLz4KPHBhdGggZD0iTTEzLjA1
MjIgMS4xMjVIMTUuMDQ1OEMxNS41OTYzIDEuMTI1IDE2LjA0MjYgMS42MDA3IDE2LjA0MjYgMi4xODc1VjRIMC4wOTM3
NVYyLjE4NzVDMC4wOTM3NSAxLjYwMDcgMC41NDAwMzUgMS4xMjUgMS4wOTA1NiAxLjEyNUgzLjA4NDE3VjEuMDYyN
UMzLjA4NDE3IDAuNDc1Njk3IDMuNTMwNDUgMCA0LjA4MDk3IDBDNC42MzE0OSAwIDUuMDc3NzggMC40NzU2OTcgNS
4wNzc3OCAxLjA2MjVWMS4xMjVIMTEuMDU4NlYxLjA2MjVDMTEuMDU4NiAwLjQ3NTY5NyAxMS41MDQ5IDAgMTIuMD
U1NCAwQzEyLjYwNTkgMCAxMy4wNTIyIDAuNDc1Njk3IDEzLjA1MjIgMS4wNjI1VjEuMTI1WiIgZmlsbD0iIzU4NjU3QyIvPgo
8L3N2Zz4K);
}
/* NEW THEME STYLE */
/*PREFERENCES STYLE*//*PREFERENCES STYLE*/
.form-all {
font-family: Inter, sans-serif;
.form-all .qq-upload-button,
.form-all .form-submit-button,
.form-all .form-submit-reset,
.form-all .form-submit-print {
.form-all .form-pagebreak-back-container,
.form-all .form-pagebreak-next-container {
.form-header-group {
.form-label {
.form-line {
margin-top: 12px;
margin-bottom: 12px;
}
.form-all {
max-width: 752px;
width: 100%;
.form-label.form-label-left,
.form-label.form-label-right,
.form-label.form-label-left.form-label-auto,
.form-label.form-label-right.form-label-auto {
width: 229px;
.form-all {
font-size: 16px
.form-all .form-submit-button,
.form-all .form-submit-reset,
.form-all .form-submit-print {
font-size: 16px
.form-all .form-pagebreak-back-container,
.form-all .form-pagebreak-next-container {
font-size: 16px
}
.supernova .form-all, .form-all {
background-color: #FFE5B4;
.form-all {
color: #000000;
.form-header-group .form-header {
color: #000000;
.form-header-group .form-subHeader {
color: #000000;
.form-label-top,
.form-label-left,
.form-label-right,
.form-html,
.form-checkbox-item label,
.form-radio-item label {
color: #000000;
.form-sub-label {
color: #1a1a1a;
.supernova {
background-color: rgba(255,255,255,0);
.supernova body {
background: transparent;
.form-textbox,
.form-textarea,
.form-dropdown,
.form-radio-other-input,
.form-checkbox-other-input,
.form-captcha input,
.form-spinner input {
.supernova {
height: 100%;
background-repeat: repeat;
background-attachment: scroll;
background-position: center top;
.supernova {
background-image: url("background blocks.jpg");
#stage {
background-image: url("background blocks.jpg");
.form-all {
background-image: none;
}
.form-all {
position: relative;
.form-all:before {
content: "";
background-image: url("background blocks.png");
display: inline-block;
height: 140px;
position: absolute;
background-size: 198px 140px;
background-repeat: no-repeat;
width: 100%;
.form-all {
margin-top: 160px !important;
.form-all:before {
top: -150px;
left: 0;
background-position: top left;
.ie-8 .form-all:before { display: none; }
.ie-8 {
margin-top: auto;
margin-top: initial;
}
/*PREFERENCES STYLE*//*__INSPECT_SEPERATOR__*/
.form-label.form-label-auto {
display: block;
float: none;
text-align: left;
width: 100%;
/* Injected CSS Code */
</style>
<script src="https://cdn01.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="https://cdn02.jotfor.ms/static/jotform.forms.js?3.3.28084" type="text/javascript"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/punycode/1.4.1/punycode.js"></script>
<script src="https://cdn03.jotfor.ms/js/vendor/jquery-1.8.0.min.js?v=3.3.28084" type="text/javascript"></script>
<script defer src="https://cdn01.jotfor.ms/js/vendor/maskedinput.min.js?v=3.3.28084" type="text/javascript"></script>
<script defer src="https://cdn02.jotfor.ms/js/vendor/jquery.maskedinput.min.js?v=3.3.28084"

type="text/javascript"></script>
<script type="text/javascript"> JotForm.newDefaultTheme = true;
JotForm.extendsNewTheme = false;
JotForm.newPaymentUIForNewCreatedForms = true;
JotForm.newPaymentUI = true;
JotForm.setConditions([{"action":
[{"id":"action_0_1594143321636","visibility":"Show","isError":false,"field":"14"}],"id":"1594143304509","index":"0","lin
k":"Any","priority":"0","terms":
[{"id":"term_0_1594143321636","field":"13","operator":"equals","value":"Yes.","isError":false}],"type":"field"},
{"action":
[{"id":"action_0_1594143320310","visibility":"Show","isError":false,"field":"12"}],"id":"1594143320309","index":"1","lin
k":"Any","priority":"1","terms":[{"id":"term_0_1594143320310","field":"13","operator":"equals","value":"No, I request
for a delivery.","isError":false}],"type":"field"}]); JotForm.clearFieldOnHide="disable";
JotForm.submitError="jumpToFirstError";
JotForm.init(function(){
/*INIT-START*/
productID =
{"0":"input_24_1009","1":"input_24_1010","2":"input_24_1011","3":"input_24_1039","4":"input_24_1040","5":"input_
24_1041","6":"input_24_1042","7":"input_24_1043","8":"input_24_1044","9":"input_24_1013","10":"input_24_1014",
"11":"input_24_1015","12":"input_24_1045","13":"input_24_1046","14":"input_24_1047","15":"input_24_1048","16":
"input_24_1049","17":"input_24_1050","18":"input_24_1025","19":"input_24_1026","20":"input_24_1031","21":"inpu
t_24_1051","22":"input_24_1052","23":"input_24_1053","24":"input_24_1054","25":"input_24_1055","26":"input_24_
1056"};
paymentType = "product";
JotForm.setCurrencyFormat('PHP',true, 'point');
JotForm.totalCounter({"input_24_1009":
{"price":"55","quantityField":"input_24_quantity_1009_0"},"input_24_1010":
{"price":"120","quantityField":"input_24_quantity_1041_0"},"input_24_1042":{"price":"100"},"input_24_1043":
{"price":"125"},"input_24_1044":{"price":"145"},"input_24_1013":
{"price":"70","quantityField":"input_24_quantity_1056_0"}});
$$('.form-product-custom_quantity').each(function(el, i){el.observe('blur', function(){isNaN(this.value) || this.value <
1 ? this.value = '0' : this.value = parseInt(this.value)})});
$$('.form-product-custom_quantity').each(function(el, i){el.observe('focus', function(){this.value == 0 ? this.value =

'' : this.value})});
JotForm.paymentCategoryHandler(true, true, {}, {});
JotForm.calendarMonths =
["January","February","March","April","May","June","July","August","September","October","November","December"];
JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
JotForm.calendarOther = {"today":"Today"};
var languageOptions = document.querySelectorAll('#langList li');
for(var langIndex = 0; langIndex < languageOptions.length; langIndex++) {
languageOptions[langIndex].on('click', function(e) { setTimeout(function(){ JotForm.setCalendar("33", false, {"days":

{"monday":true,"tuesday":true,"wednesday":true,"thursday":true,"friday":true,"saturday":true,"sunday":true},"future":
true,"past":true,"custom":false,"ranges":false,"start":"","end":""}); }, 0); });
JotForm.onTranslationsFetch(function() { JotForm.setCalendar("33", false, {"days":

{"monday":true,"tuesday":true,"wednesday":true,"thursday":true,"friday":true,"saturday":true,"sunday":true},"future":
true,"past":true,"custom":false,"ranges":false,"start":"","end":""}); });
if (window.JotForm && JotForm.accessible) $('input_17').setAttribute('tabindex',0);
JotForm.alterTexts(undefined);
JotForm.alterTexts({"couponApply":"Apply","couponBlank":"Please enter a
coupon.","couponChange":"","couponEnter":"Enter coupon","couponExpired":"Coupon is expired. Please try another
one.","couponInvalid":"Coupon is invalid.","couponValid":"Coupon is
valid.","shippingShipping":"Shipping","taxTax":"Tax","totalSubtotal":"Subtotal","totalTotal":"Total"}, true);
/*INIT-END*/
});
JotForm.prepareCalculationsOnTheFly([null,{"name":"orderNow","qid":"1","text":"Order
Now","type":"control_head"},null,null,null,null,null,null,null,
{"name":"name","qid":"9","text":"Name","type":"control_fullname"},
{"name":"email","qid":"10","subLabel":"","text":"Email","type":"control_email"},null,
{"name":"deliveryAddress","qid":"12","text":"Delivery Address","type":"control_address"},
{"name":"doYou13","qid":"13","text":"Do you want to pick up your order?","type":"control_radio"},null,null,null,
{"name":"comments","qid":"17","text":"Comments","type":"control_textarea"},null,null,null,null,null,null,
{"description":"","name":"myProducts24","qid":"24","text":"My Products
","type":"control_payment"},null,null,null,null,
{"name":"submit","qid":"29","text":"Submit","type":"control_button"},null,null,
{"description":"","name":"phoneNumber","qid":"32","text":"Phone Number","type":"control_phone"},
{"description":"","name":"date","qid":"33","text":"Date","type":"control_datetime"}]);
setTimeout(function() {
JotForm.paymentExtrasOnTheFly([null,{"name":"orderNow","qid":"1","text":"Order
Now","type":"control_head"},null,null,null,null,null,null,null,
{"name":"name","qid":"9","text":"Name","type":"control_fullname"},
{"name":"email","qid":"10","subLabel":"","text":"Email","type":"control_email"},null,
{"name":"deliveryAddress","qid":"12","text":"Delivery Address","type":"control_address"},
{"name":"doYou13","qid":"13","text":"Do you want to pick up your order?","type":"control_radio"},null,null,null,
{"name":"comments","qid":"17","text":"Comments","type":"control_textarea"},null,null,null,null,null,null,
{"description":"","name":"myProducts24","qid":"24","text":"My Products
","type":"control_payment"},null,null,null,null,
{"name":"submit","qid":"29","text":"Submit","type":"control_button"},null,null,
{"description":"","name":"phoneNumber","qid":"32","text":"Phone Number","type":"control_phone"},
{"description":"","name":"date","qid":"33","text":"Date","type":"control_datetime"}]);}, 20);
</script>
</head>
<body>
<form class="jotform-form" action="https://submit.jotform.com/submit/212742737024452/" method="post"

name="form_212742737024452" id="212742737024452" accept-charset="utf-8" autocomplete="on">
<input type="hidden" name="formID" value="212742737024452" />
<input type="hidden" id="JWTContainer" value="" />
<input type="hidden" id="cardinalOrderNumber" value="" />
<div role="main" class="form-all">
<div class="formLogoWrapper Left">
<img loading="lazy" class="formLogoImg"

src="https://www.jotform.com/uploads/mjtaguic/form_files/242801930_578305113614396_9139655649970277900_n
.6158284cb32750.57802484.png" height="140" width="198">
</div>
<style>
.formLogoWrapper { display:inline-block; position: absolute; width: 100%;} .form-all:before { background: none !

important;} .formLogoWrapper.Left { top: -150px; left: 0; text-align: left;}
</style>
<ul class="form-section page-section">
<li id="cid_1" class="form-input-wide" data-type="control_head">
<div class="form-header-group header-large">
<div class="header-text httac htvam">
<h1 id="header_1" class="form-header" data-component="header">
Online Order Form
</h1>
</div>
</div>
</li>
<li class="form-line form-line-column form-col-1" data-type="control_fullname" id="id_9">
<label class="form-label form-label-top" id="label_9" for="first_9"> Name </label>
<div id="cid_9" class="form-input-wide" data-layout="full">
<div data-wrapper-react="true">
<span class="form-sub-label-container" style="vertical-align:top" data-input-type="first">
<input type="text" id="first_9" name="q9_name[first]" class="form-textbox" data-defaultvalue="" size="10"

value="" data-component="first" aria-labelledby="label_9 sublabel_9_first" />
<label class="form-sub-label" for="first_9" id="sublabel_9_first" style="min-height:13px" aria-hidden="false">

First Name </label>
</span>
<span class="form-sub-label-container" style="vertical-align:top" data-input-type="last">
<input type="text" id="last_9" name="q9_name[last]" class="form-textbox" data-defaultvalue="" size="15"

value="" data-component="last" aria-labelledby="label_9 sublabel_9_last" />
<label class="form-sub-label" for="last_9" id="sublabel_9_last" style="min-height:13px" aria-hidden="false">

Last Name </label>
</span>
</div>
</div>
</li>
<li class="form-line form-line-column form-col-2" data-type="control_email" id="id_10">
<label class="form-label form-label-top" id="label_10" for="input_10"> Email </label>
<div id="cid_10" class="form-input-wide" data-layout="half">
<input type="email" id="input_10" name="q10_email" class="form-textbox validate[Email]" data-defaultvalue=""

style="width:310px" size="310" value="" data-component="email" aria-labelledby="label_10" />
</div>
</li>
<li class="form-line form-line-column form-col-3 jf-required form-field-hidden" style="display:none;" data-

type="control_address" id="id_12">
<label class="form-label form-label-top" id="label_12" for="input_12_addr_line1">
Delivery Address
<span class="form-required">
</span>
</label>
<div id="cid_12" class="form-input-wide jf-required" data-layout="full">
<div summary="" class="form-address-table jsTest-addressField">
<div class="form-address-line-wrapper jsTest-address-line-wrapperField">
<span class="form-address-line form-address-street-line jsTest-address-lineField">
<span class="form-sub-label-container" style="vertical-align:top">
<input type="text" id="input_12_addr_line1" name="q12_deliveryAddress[addr_line1]" class="form-textbox

validate[required] form-address-line" data-defaultvalue="" value="" data-component="address_line_1" aria-
labelledby="label_12 sublabel_12_addr_line1" required="" />
<label class="form-sub-label" for="input_12_addr_line1" id="sublabel_12_addr_line1" style="min-

height:13px" aria-hidden="false"> Street Address </label>
</span>
</span>
</div>
<div class="form-address-line-wrapper jsTest-address-line-wrapperField" style="display:none">
<span class="form-address-line form-address-street-line jsTest-address-lineField">

<input type="text" id="input_12_addr_line2" name="q12_deliveryAddress[addr_line2]" class="form-textbox

form-address-line" data-defaultvalue="" value="" data-component="address_line_2" aria-labelledby="label_12
sublabel_12_addr_line2" />
<label class="form-sub-label" for="input_12_addr_line2" id="sublabel_12_addr_line2" style="min-

height:13px" aria-hidden="false"> Street Address Line 2 </label>
</span>
</span>
</div>
<span class="form-address-line form-address-city-line jsTest-address-lineField ">
<input type="text" id="input_12_city" name="q12_deliveryAddress[city]" class="form-textbox

validate[required] form-address-city" data-defaultvalue="" value="" data-component="city" aria-labelledby="label_12
sublabel_12_city" required="" />
<label class="form-sub-label" for="input_12_city" id="sublabel_12_city" style="min-height:13px" aria-

hidden="false"> City </label>
</span>
</span>
<span class="form-address-line form-address-state-line jsTest-address-lineField ">
<input type="text" id="input_12_state" name="q12_deliveryAddress[state]" class="form-textbox form-

address-state" data-defaultvalue="" value="" data-component="state" aria-labelledby="label_12 sublabel_12_state" />
<label class="form-sub-label" for="input_12_state" id="sublabel_12_state" style="min-height:13px" aria-

hidden="false"> State / Province </label>
</span>
</span>
</div>
<span class="form-address-line form-address-zip-line jsTest-address-lineField ">

<input type="text" id="input_12_postal" name="q12_deliveryAddress[postal]" class="form-textbox
validate[required] form-address-postal" data-defaultvalue="" value="" data-component="zip" aria-labelledby="label_12
sublabel_12_postal" required="" />
<label class="form-sub-label" for="input_12_postal" id="sublabel_12_postal" style="min-height:13px" aria-

hidden="false"> Postal / Zip Code </label>
</span>
</span>
</div>
</div>
</div>
</li>
<li class="form-line form-line-column form-col-4" data-type="control_phone" id="id_32">
<label class="form-label form-label-top" id="label_32" for="input_32_area"> Phone Number </label>
<span class="form-sub-label-container" style="vertical-align:top" data-input-type="areaCode">
<input type="tel" id="input_32_area" name="q32_phoneNumber[area]" class="form-textbox" data-

defaultvalue="" value="" data-component="areaCode" aria-labelledby="label_32 sublabel_32_area" />
<span class="phone-separate" aria-hidden="true">
-
</span>
<label class="form-sub-label" for="input_32_area" id="sublabel_32_area" style="min-height:13px" aria-

hidden="false"> Area Code </label>
</span>
<span class="form-sub-label-container" style="vertical-align:top" data-input-type="phone">
<input type="tel" id="input_32_phone" name="q32_phoneNumber[phone]" class="form-textbox" data-

defaultvalue="" value="" data-component="phone" aria-labelledby="label_32 sublabel_32_phone" />
<label class="form-sub-label" for="input_32_phone" id="sublabel_32_phone" style="min-height:13px" aria-

hidden="false"> Phone Number </label>
</span>
</div>
</div>
</li>
<li class="form-line card-3col" data-type="control_payment" id="id_24" data-payment="true">
<label class="form-label form-label-top category-enabled" id="label_24" for="input_24"> My Products </label>
<div data-wrapper-react="true" class="product-container-wrapper">
<div class="filter-container">
<div class="multi-select-dropdown category-title-enabled hasSelectAll" id="payment-category-dropdown">
<div class="dropdown-container">
<div class="select-area" tabindex="0" role="button" aria-expanded="false">
<span class="dropdown-hint">
Categories:
</span>
<span class="selected-values">
All
</span>
<i class="icon">
</i>
</div>
<div class="select-content">
<div class="options">
<div aria-label="Categories:" class="option selected">
<input type="checkbox" checked="" value="All" />
<span>
All
</span>
</div>
<div aria-label="Categories:" class="option ">
<input type="checkbox" value="2004" />

<span>
BURGER
</span>
</div>
<span>
FOOTLONG
</span>
</div>
<span>
DRINKS
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="simple_fpc" data-payment_type="payment" data-component="payment1"

value="24" />
<input type="hidden" name="payment_total_checksum" id="payment_total_checksum" data-

component="payment2" />
<div id="image-overlay" class="overlay-content" style="display:none">
<img id="current-image" />
<span class="lb-prev-button">
prev
</span>
<span class="lb-next-button">
next
</span>
<span class="lb-close-button">
(X)
</span>
<span class="image-overlay-product-container">
<ul class="form-overlay-item" hasicon="false" hasimages="false">
</ul>
<ul class="form-overlay-item" hasicon="false" hasimages="false" iconvalue="">
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>

</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</span>
</div>
<span class="form-product-category-item " category="2004">
<b>
BURGER
</b>
<span class="selected-items-icon">
</span>
</span>
<span class="form-product-item hover-product-item on_col1 show_option new_ui" categories="2004" active-

category="2004" pid="1009" aria-labelledby="label_24">
<div data-wrapper-react="true" class="form-product-item-detail new_ui">
<div class="p_col">
<div class="p_checkbox">
<input type="checkbox" class="form-checkbox form-product-input" id="input_24_1009"

name="q24_myProducts24[][id]" value="1009" />
<div class="checked">
</div>
<div class="select_border">
</div>
</div>
</div>
<div class="p_image">
<div role="img" aria-label="Hamburger (Solo)" class="image_area null" style="background-

image:url("null")">
<div class="image_zoom">
</div>
</div>
</div>
<div for="input_24_1009" class="form-product-container">
<span data-wrapper-react="true">
<div class="title_description">
<span class="form-product-name" id="product-name-input_24_1009">
Hamburger (Solo)
</span>
<span class="form-product-description" id="product-name-description-input_24_1009">
</span>
</div>
<span class="form-product-details">
<b>
<span id="input_24_1009_price">
55.00
</span>
<span class="currency_abr">
PHP
</span>
</span>
</b>
</span>
</span>
<label class="form-sub-label" for="input_24_quantity_1009_0" style="min-height:13px" aria-

hidden="false"> Quantity </label>
<span class="select_cont">
<select class="form-dropdown" name="q24_myProducts24[special_1009][item_0]"

id="input_24_quantity_1009_0">
<option value="1"> 1 </option>
</select>
</span>
</span>
</div>
</div>
</span>
<div class="p_item_separator ">
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Hamburger (Combo) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Hamburger (Combo)
</span>
</span>
</div>
<b>
65.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Hamburger (King Feast)" class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>

Hamburger (King Feast)
</span>
</span>
</div>
<b>
75.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>



</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Cheeseburger (Solo) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Cheeseburger (Solo)
</span>
</span>
</div>
<b>
85.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>

</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Cheeseburger (Combo) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Cheeseburger (Combo)
</span>
</span>
</div>
<b>
100.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>


<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Cheeseburger (King Feast) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Cheeseburger (King Feast)
</span>
</span>
</div>
<b>
120.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>
<span class="form-product-item hover-product-item on_col1 new_ui" categories="2004" active-

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Veggie Burger (Solo)" class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Veggie Burger (Solo)

</span>
</span>
</div>
<b>
100.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Veggie Burger (Combo)" class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Veggie Burger (Combo)
</span>
</span>
</div>
<b>
125.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Veggie Burger (King Feast)" class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Veggie Burger (King Feast)
</span>
</span>
</div>
<b>
145.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>
</div>
</div>
</span>
<div class="p_item_separator last_p_seperator">
</div>
<span class="form-product-category-item " category="2005">

<b>
FOOTLONG
</b>
</span>
</span>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Italian (Junior)" class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>

Italian (Junior)
</span>
</span>
</div>
<b>
85.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>



</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Italian (Senior)" class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Italian (Senior)
</span>
</span>
</div>
<b>
115.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>

</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Italian (Extra long)" class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Italian (Extra long)
</span>
</span>
</div>
<b>
135.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>


<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Guatemala (Junior) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Guatemala (Junior)
</span>
</span>
</div>
<b>
95.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Guatemala (Senior) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Guatemala (Senior)
</span>
</span>
</div>
<b>
120.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>



</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Guatemala (Extra long) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Guatemala (Extra long)
</span>
</span>
</div>
<b>
150.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>

</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Chicago (Junior) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Chicago (Junior)
</span>
</span>
</div>
<b>
100.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>


<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Chicago (Senior) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Chicago (Senior)
</span>
</span>
</div>
<b>
135.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Chicago (Extra long) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Chicago (Extra long)

</span>
</span>
</div>
<b>
155.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>



</select>
</span>
</span>
</div>
</div>
</span>
<div class="p_item_separator last_p_seperator">
</div>
<span class="form-product-category-item last_p_category" category="2008">
<b>
DRINKS
</b>
</span>
</span>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Milk Tea (Short)" class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Milk Tea (Short)
</span>
</span>
</div>
<b>
55.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>


<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Milk Tea (Grande)" class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Milk Tea (Grande)
</span>
</span>
</div>
<b>
65.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Milk Tea (Trenta)" class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Milk Tea (Trenta)

</span>
</span>
</div>
<b>
75.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>



</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Chocolate Shake (Short) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Chocolate Shake (Short)
</span>
</span>
</div>
<b>
50.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>

</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Chocolate Shake (Grande) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Chocolate Shake (Grande)
</span>
</span>
</div>
<b>
60.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>


<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Chocolate Shake (Trenta) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Chocolate Shake (Trenta)
</span>
</span>
</div>
<b>
70.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Halo Halo (Short) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Halo Halo (Short)

</span>
</span>
</div>
<b>
40.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>



</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Halo Halo (Grande) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Halo Halo (Grande)
</span>
</span>
</div>
<b>
55.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>

</select>
</span>
</span>
</div>
</div>
</span>
</div>

<div class="p_col">

</div>
</div>
</div>
</div>
<div role="img" aria-label="Halo Halo (Trenta) " class="image_area null" style="background-

image:url("null")">
</div>
</div>
</div>
Halo Halo (Trenta)
</span>
</span>
</div>
<b>
70.00
</span>
PHP
</span>
</span>
</b>
</span>
</span>


</select>
</span>
</span>
</div>
</div>
</span>
<div class="payment_footer new_ui ">
<div class="total_area">
<div class="form-payment-total">
<div id="total-text">
Total
</div>
<div class="form-payment-price">
<span id="payment_total">
0.00
</span>
PHP
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-line form-line-column form-col-1" data-type="control_radio" id="id_13">
<label class="form-label form-label-top" id="label_13" for="input_13"> Do you want to pick up your order? </label>
<div class="form-multiple-column" data-columncount="2" role="group" aria-labelledby="label_13" data-

component="radio">
<span class="form-radio-item">
<span class="dragger-item">
</span>
<input type="radio" aria-describedby="label_13" class="form-radio" id="input_13_0" name="q13_doYou13"

value="Yes." />
<label id="label_input_13_0" for="input_13_0"> Yes. </label>
</span>
<span class="form-radio-item">
<span class="dragger-item">
</span>
<input type="radio" aria-describedby="label_13" class="form-radio" id="input_13_1" name="q13_doYou13"

checked="" value="No, I request for a delivery." />
<label id="label_input_13_1" for="input_13_1"> No, I request for a delivery. </label>
</span>
</div>
</div>
</li>
<li class="form-line" data-type="control_datetime" id="id_33">
<label class="form-label form-label-top form-label-auto" id="label_33" for="lite_mode_33"> Date </label>
<div style="display:none">
<input type="tel" class="form-textbox validate[limitDate]" id="month_33" name="q33_date[month]" size="2"

data-maxlength="2" data-age="" maxLength="2" value="" autoComplete="off" aria-labelledby="label_33
sublabel_33_month" />
<span class="date-separate" aria-hidden="true">
-
</span>
<label class="form-sub-label" for="month_33" id="sublabel_33_month" style="min-height:13px" aria-

hidden="false"> Month </label>
</span>
<input type="tel" class="form-textbox validate[limitDate]" id="day_33" name="q33_date[day]" size="2" data-

maxlength="2" data-age="" maxLength="2" value="" autoComplete="off" aria-labelledby="label_33
sublabel_33_day" />
<span class="date-separate" aria-hidden="true">
-
</span>
<label class="form-sub-label" for="day_33" id="sublabel_33_day" style="min-height:13px" aria-

hidden="false"> Day </label>
</span>
<input type="tel" class="form-textbox validate[limitDate]" id="year_33" name="q33_date[year]" size="4" data-

maxlength="4" data-age="" maxLength="4" value="" autoComplete="off" aria-labelledby="label_33
sublabel_33_year" />
<label class="form-sub-label" for="year_33" id="sublabel_33_year" style="min-height:13px" aria-

hidden="false"> Year </label>
</span>
</div>
<input type="text" class="form-textbox validate[limitDate, validateLiteDate]" id="lite_mode_33" size="12" data-

maxlength="12" maxLength="12" data-age="" value="" data-format="mmddyyyy" data-seperator="-"
placeholder="MM-DD-YYYY" autoComplete="off" aria-labelledby="label_33 sublabel_33_litemode" />
<img class=" newDefaultTheme-dateIcon icon-liteMode" alt="Pick a Date" id="input_33_pick"

src="https://cdn.jotfor.ms/images/calendar.png" data-component="datetime" aria-hidden="true" data-allow-
time="No" data-version="v2" />
<label class="form-sub-label" for="lite_mode_33" id="sublabel_33_litemode" style="min-height:13px" aria-

hidden="false"> Date </label>
</span>
</div>
</div>
</li>
<li class="form-line" data-type="control_textarea" id="id_17">
<label class="form-label form-label-top" id="label_17" for="input_17"> Comments </label>
<textarea id="input_17" class="form-textarea" name="q17_comments" style="width:648px;height:163px" data-

component="textarea" aria-labelledby="label_17"></textarea>
</div>
</li>
<li class="form-line" data-type="control_button" id="id_29">
<div data-align="center" class="form-buttons-wrapper form-buttons-center jsTest-button-wrapperField">
<button id="input_29" type="submit" class="form-submit-button form-submit-button-simple_grey submit-button

jf-form-buttons jsTest-submitField" data-component="button" data-content="">
Submit
</button>
</div>
</div>
</li>
</ul>
</div>

Groupno4 HTML Forms

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Groupno4 HTML Forms

Uploaded by

Copyright:

Available Formats

TECHNOLOGICAL INSTITUTE OF THE PHILIPPINES

COLLEGE OF INFORMATION TECHNOLOGY EDUCATION(CITE)

Name/Program: Group 4 Section: IT11S2

Assessment Task: HTML FORMS

<html lang="en-US" class="supernova"><head>

<title>Online Order Form</title>

<style type="text/css">@media print{.form-section{display:inline!important}.form-pagebreak{display:none!

<link type="text/css" rel="stylesheet" href="https://cdn01.jotfor.ms/themes/CSS/5e6b428acc8c4e222d1beb91.css?

<link type="text/css" rel="stylesheet" href="https://cdn02.jotfor.ms/css/styles/payment/payment_styles.css?

<link type="text/css" rel="stylesheet" href="https://cdn03.jotfor.ms/css/styles/payment/payment_feature.css?

<style type="text/css" id="form-designer-style">

/* Injected CSS Code */

/* NEW THEME STYLE */

.calendar.popup table tbody td,

.appointmentCalendar .calendarWeek .calendarDay.isUnavailable,

.calendar tr.days td.otherDay,

.calendar tr.days td:hover:not(.unselectable) {

span.form-sub-label, label.form-sub-label, div.form-header-group .form-subHeader,

.rating-item-title.for-to > label:first-child,

.rating-item-title.for-from > label:first-child,

.form-checkbox+label:before, .form-checkbox+span:before, .form-radio+label:before, .form-radio+span:before,

.appointmentCalendarContainer .monthYearPicker .pickerItem+.pickerItem,

.appointmentCalendar .calendarDay.isActive .calendarDayEach, .appointmentCalendar .calendarDay.isToday .calendar

.form-matrix-column-headers, .form-matrix-table td, .form-matrix-table td:last-child,

.form-matrix-table th, .form-matrix-table th:last-child, .form-matrix-table tr:last-child td, .form-matrix-table tr:last-child

li[data-type=control_inline] input[type=email], li[data-type=control_inline] input[type=number],

li[data-type=control_inline] input[type=tel], li[data-type=control_inline] input[type=text],

.form-checkbox:checked+label:before, .form-checkbox:checked+span:before, .form-checkbox:checked+span

.form-dropdown:focus, .form-textarea:focus, .form-textbox:focus, .signature-wrapper:focus,

.form-line[data-payment="true"] .form-product-item .p_checkbox .checked,

.form-dropdown:hover, .form-textarea:hover, .form-textbox:hover, .signature-wrapper:hover {

.calendar tr.days td:hover:not(.unselectable):after {

.form-buttons-wrapper, .form-pagebreak, .form-submit-clear-wrapper,

.form-checkbox:hover+label:before, .form-checkbox:hover+span:before, .form-radio:hover+label:before, .form-

.form-pagebreak-back:focus, .form-pagebreak-next:focus, .form-submit-button:focus {

border-color: rgba(46, 105, 255, 1);

.calendar.popup, .calendar.popup table,

.calendar.popup table tbody td:after{

.appointmentCalendar .calendarDay.isActive .calendarDayEach,

.calendar.popup tr.days td.selected:after,

.form-checkbox:checked+label:before, .form-checkbox:checked+span:before, .form-checkbox:checked+span

.form-line[data-payment="true"] .form-product-item .p_checkbox .checked,

background-color: #2e69ff !important;

background-color: #eef3ff !important;

.JotFormBuilder .appContainer #app li.form-line[data-type=control_matrix].isSelected

.rating-item-title.for-to > label:first-child,

.rating-item-title.for-from > label:first-child,

.form-dropdown:hover, .form-textarea:hover, .form-textbox:hover, .signature-wrapper:hover,

.form-line[data-payment="true"] .form-product-item .p_checkbox .checked,

.form-line[data-payment="true"] .form-product-item .p_checkbox:hover .select_border,

.form-checkbox:hover+label:before, .form-checkbox:hover+span:before, .form-radio:hover+label:before, .form-

border-color: rgba(46, 105, 255, 0.5);

box-shadow: 0 0 0 2px rgba(46, 105, 255, 0.25);

.form-dropdown:focus, .form-textarea:focus, .form-textbox:focus, .signature-wrapper:focus,

.form-checkbox:focus+label:before, .form-checkbox:focus+span:before, .form-radio:focus+label:before, .form-

border-color: rgba(46, 105, 255, 1);

box-shadow: 0 0 0 3px rgba(46, 105, 255, 0.25);

.calendar.popup table tbody td{

.form-line[data-payment=true] #coupon-container input,

.form-line[data-payment=true] .filter-container .dropdown-container .select-content,

.form-line[data-payment="true"] .form-product-item .form-product-container .form-sub-label-container

.form-line[data-payment=true] .filter-container .select-content,

.form-line[data-payment=true] .p_checkbox .select_border {

/PREFERENCES STYLE//PREFERENCES STYLE/