What Are HTML Forms and Form Submission?

HTML forms are the part of a web page that collect user data and send it somewhere. A form wraps inputs, text areas, buttons, and other controls, then submits the values to a server or script through an HTTP request, usually with GET or POST. The big mistake students make is thinking the submit button does the whole job. It does not. The form element holds the data, the named controls supply the values, and the browser packages everything when submission happens. JavaScript can listen for that moment, stop it, change it, or let it continue. That is why form markup matters even in an introduction to javascript course. The browser still needs a real form to work with. Another common mix-up: students think JavaScript automatically handles forms on its own. It does not. JavaScript can intercept the submit event, but the HTML form still defines the structure, the default behavior, and the fallback if script fails. That matters in real projects and in any college credit course that teaches web basics, because form behavior shows up in login pages, search boxes, checkout screens, and contact forms. Once you see the chain from markup to request to response, the whole topic stops feeling mysterious.

A close-up shot of a person coding on a laptop, focusing on the hands and screen — UPI Study

What Are HTML Forms and Submission?

HTML forms are the markup container that wraps fields like , , and <button>, while submission is the exact moment the browser sends the collected data away from the page. That move matters because the form element, not the button, defines where the data starts, and a page with 5 inputs still needs one form tag to make sense.</p> <p><strong>The catch:</strong> The most common student misconception is that a form is “just the submit button,” but the browser actually reads every named control inside the <form> element before it sends anything. A 2024 checkout page, a school login screen, and a 2-minute contact form all follow that same rule.</p> <p>I like this topic because it exposes how web pages really work. HTML gives structure, the browser collects values, and submission sends those values to a server route or script that can save them, check them, or reject them. That is the piece many students miss in an introduction to javascript course: JavaScript can react to submission, but HTML owns the form itself. If a field has no name, the browser ignores it during submission. If the form has no action, the browser still knows a submit happened, but the destination logic changes.</p> <p>A form does not need to look fancy to work. A plain search box with 1 text input and 1 button can submit data just like a 12-field signup form, and that plainness is the point.</p> <div id="ad-in-article"></div> <h2 id="which-form-elements-collect-user-data">Which Form Elements Collect User Data?</h2> <p>A form can collect 1 piece of data or 20, but the browser only sends controls with names, labels, and valid attributes. That is why a clean form uses more than a text box and a button.</p> <ul><li><strong>input</strong> handles the common stuff: text, email, password, number, date, and file. An <code>input type="email"</code> gives the browser a built-in format check before submit.</li><li><strong>textarea</strong> fits longer text, like a 300-word comment or a support message. A single-line input makes that job awkward fast.</li><li><strong>select</strong> gives students a drop-down list with named options, like 12 months or 3 plan choices. It helps when the answer has a fixed set.</li><li><strong>checkbox</strong> works for yes-or-no choices, and radio buttons work for one choice out of several. Two radio buttons with the same name act like one group.</li><li><strong>label</strong> ties text to a control, which helps clicks, screen readers, and usability. A label without a matching control name often feels broken.</li><li><strong>button</strong> starts submission when it uses <code>type="submit"</code>. A plain button with no type can confuse students because it does not always submit the form.</li><li><strong>fieldset</strong> and <strong>legend</strong> group related controls, like 3 payment options or 4 address fields. That structure helps people read the form faster.</li></ul> <p><strong>Worth knowing:</strong> A form with good labels and names beats a flashy one with messy markup every time. The browser can only send what the HTML actually names, and that rule does not care about design trends.</p> <h2 id="how-does-html-form-submission-actually-work">How Does HTML Form Submission Actually Work?</h2> <p>Form submission starts with a user action: clicking a submit button, pressing Enter in a text field, or triggering the form through code. The browser then gathers every successful control inside the form, which means fields with names, checked boxes, selected options, and values from active inputs. A page with 8 controls does not send all 8 the same way; it sends the ones that count.</p> <p>The browser then builds an HTTP request and sends it to the URL in the form’s action attribute, or to the current page if the form leaves action blank. That request uses a method, usually GET or POST, and that choice changes where the data lives. GET puts the data in the URL, so you can see it in the address bar. POST sends the data in the request body, so it stays out of the URL and suits logins, orders, and larger payloads.</p> <p><strong>Reality check:</strong> Submission is not magic. It is a browser-made request with a method, a destination, and a payload, and the server only sees what the browser sends. That is why a form that looks complete can still fail if 1 field has no name or if the action points to the wrong route.</p> <p>A 2023 HTML demo and a production payment form use the same idea, just with different stakes. I prefer teaching submission this way because it strips away the mystery and shows the actual machine underneath.</p> <aside class="key-takeaways reveal"> <div class="key-takeaways__label">Key Takeaways</div> <ul class="key-takeaways__list"> <li>Forms collect input with text boxes, checkboxes, selects, and buttons</li> <li>The submit event fires before the browser sends form data</li> <li>JavaScript can stop a default submit with preventDefault</li> <li>Form markup and script behavior work together on every submission</li> </ul> </aside> <div class="promo-spotlight"> <div class="promo-spotlight__top"> <span class="promo-spotlight__badge">Introduction To Javascript</span> <span class="promo-spotlight__tag">UPI Study Course</span> </div> <div class="promo-spotlight__body-wrap"> <h3 class="promo-spotlight__title">Learn Introduction To Javascript Online for College Credit</h3> <p class="promo-spotlight__body">This is one topic inside the full Introduction To Javascript course on UPI Study — a self-paced, online class that earns real college credit. Credits are ACE and NCCRS evaluated and transfer to partner colleges across the US and Canada. Courses start at $250 with no deadlines and lifetime access.</p> <a href="https://www.upistudy.com/courses/introduction-to-javascript" class="promo-spotlight__btn" target="_blank" rel="noopener">Explore JavaScript Course →</a> </div> </div> <h2 id="how-do-javascript-submit-events-change-forms">How Do JavaScript Submit Events Change Forms?</h2> <p>Students often think JavaScript replaces the form, but the browser still owns the native submit event and JavaScript usually intercepts it after the form starts to submit. That detail matters in a 2024 front-end class because the script can stop the default request with <code>preventDefault()</code>, then validate 4 fields, change a value, or send data another way. Without that step, the browser follows its built-in path and the script never gets a chance to shape the result.</p> <ul><li><code>preventDefault()</code> stops the browser’s normal submission, so the page does not reload right away.</li><li>A script can block bad data after 1 failed check, like an empty email field or a 6-digit code with 5 digits.</li><li>JavaScript can change values before sending, such as trimming spaces or combining 2 fields into 1 payload.</li><li>A script can reroute submission to fetch(), an API route, or a custom save flow.</li></ul> <p><strong>What this means:</strong> The form still matters even when JavaScript runs the show. A script can allow submission, block it, or reroute it, but it still reads the form’s markup, names, and values first.</p> <p>That is the part many beginners miss in an <a href="https://www.upistudy.com/courses/introduction-to-javascript">introduction to javascript</a> lesson. They think the form disappears once script starts. It does not. The native form gives you accessibility, keyboard support, and a fallback path if JavaScript fails on a slow 3G connection or a broken browser extension.</p> <h2 id="why-do-form-markup-and-script-need-each-other">Why Do Form Markup and Script Need Each Other?</h2> <p>Semantic HTML and JavaScript do different jobs, and a good course shows that split with 2 simple demos. In the first demo, the student submits a form normally and the browser sends the request with GET or POST. In the second, the student intercepts the submit event, uses 1 line of <code>preventDefault()</code>, and adds custom logic before any request leaves the page.</p> <p>That split teaches more than syntax. HTML gives structure, labels, and default behavior, while JavaScript adds validation, feedback, and custom handling after a user clicks submit. If a form has 4 fields and one script, the script still depends on the form’s names, values, and events. If the markup is sloppy, the script inherits the mess. That is a hard truth, and I think students need to hear it early.</p> <p>In an <a href="https://www.upistudy.com/courses/introduction-to-javascript">Introduction to JavaScript</a> course, this shows up in tiny builds: a sign-up form that checks for an email, a quiz form that blocks empty answers, or a search form that sends data to a different URL after validation. JavaScript gives you control, but HTML gives you the shape of the control.</p> <p><strong>Bottom line:</strong> Good forms work with script and without it. That combination matters in real sites, because users still hit refresh, lose network access, or submit from older devices.</p> <h2 id="what-should-students-check-before-submitting">What Should Students Check Before Submitting?</h2> <p>A 5-minute check can save a 50-minute bug hunt, and form problems usually hide in plain sight. The fastest fixes come from checking names, button types, and what the browser actually sends.</p> <ul><li>Give every input a <code>name</code>. Without it, the browser leaves the field out of the submission.</li><li>Make sure the submit button lives inside the form or targets it correctly.</li><li>Use <code>preventDefault()</code> on purpose, not by habit, because it changes the native request path.</li><li>Test required fields with 1 empty value and 1 filled value to see what validation does.</li><li>Inspect the payload in DevTools or the network tab so you can see the real request.</li><li>Check that radio groups share the same name and that 2 checkboxes do not overwrite each other.</li></ul> <aside class="body-callout body-callout--upi reveal"> <div class="body-callout__glyph">“</div> <div class="body-callout__label">How UPI Study fits</div> <p class="body-callout__text">Want to learn the full Introduction To Javascript class online, not just this one topic? You can take the complete course on <a href="https://www.upistudy.com/courses/introduction-to-javascript">UPI Study</a> for $250 and earn college credit while you do it — ACE and NCCRS-evaluated, transferable to partner US and Canadian colleges, with no deadlines and lifetime access. <br><br><em>This article and its educational content are solely owned by UPI Study and licensed CC BY-NC-ND. Any citation must include a link back to this page.</em></p> <div class="body-callout__badges"> <img src="https://import.cdn.thinkific.com/204160/custom_site_themes/id/qhBr88NT92jt7WHQ749r_GuAranteed-8.png" alt="ACE and NCCRS approved — college credits guaranteed at UPI Study" loading="lazy"/> </div> </aside> <h2 id="faqs">Frequently Asked Questions about HTML Forms</h2> <div class="bfaq"><div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq0"><span>What are HTML forms and form submission?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq0" hidden><p>HTML forms collect user input with elements like `<input>`, `<textarea>`, `<select>`, and a `<form>` tag, then send that data to a server or script when you press a submit button. In an introduction to javascript course, you often watch the form trigger a `submit` event first, then learn how code can read or stop that submission.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq1"><span>How do you start building a basic HTML form?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq1" hidden><p>Start with a `<form>` tag, add at least one labeled control like `<input type="text">`, and finish with a submit button. A simple form for email, name, or password teaches the core idea fast, and exploring html forms and submission concepts and demonstrations usually begins with just 2 or 3 fields.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq2"><span>What does the submit button actually do?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq2" hidden><p>The submit button tells the browser to send the form data to the URL in the form’s `action` attribute, or it uses the current page if you leave that out. The browser packages each field name and value, so `name=Ana` and `email=ana@example.com` travel together instead of as loose text.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq3"><span>What do most students do first, and what actually works?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq3" hidden><p>Most students click the button and hope the form will work on its own, but what actually works is matching labels, field names, and the submit target from the start. If you forget the `name` attribute, the browser can show the input on screen but skip it in the submitted data.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq4"><span>What surprises most students about HTML form submission?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq4" hidden><p>What surprises most students is that pressing Enter in a text field can submit the form even when they don't click the button. That happens because the browser treats the form as one unit, and a single-field form can submit in under 1 second.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq5"><span>What happens if you get form submission wrong?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq5" hidden><p>If you get form submission wrong, the page may reload, data may disappear, or your server may receive empty fields. In a JavaScript course, that usually means your `submit` handler never runs, or it runs too late after the browser already sent the request.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq6"><span>What is the most common wrong assumption about forms?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq6" hidden><p>The most common wrong assumption is that the visible text on the page becomes the submitted data automatically. It doesn't; the browser sends only field names and values, so `label` text helps people read the form, but `name` text tells the server what each value means.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq7"><span>Who does this apply to, and who doesn't?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq7" hidden><p>This applies to you if you're building a basic website, an introduction to javascript course exercise, or a study online project that needs user input; it doesn't apply if you're only styling a static page with no data entry. The same form ideas also connect to college credit work, including ACE NCCRS credit and transferable credit in an online course.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq8"><span>How does JavaScript intercept a form submission?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq8" hidden><p>JavaScript intercepts a form submission by listening for the `submit` event and calling `event.preventDefault()` before the browser sends the request. That lets you validate 3 required fields, trim spaces, or send the data with `fetch()` instead of a full page reload.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq9"><span>What is the difference between form markup and submit handling?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq9" hidden><p>Form markup defines the fields, labels, and button in HTML, while submit handling in JavaScript decides what happens after the user clicks submit or presses Enter. A form can work with no script at all, but script gives you control over validation, error messages, and custom sending.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq10"><span>How do input types change what users can enter?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq10" hidden><p>Input types tell the browser what kind of data you want, like `email`, `password`, `number`, or `date`, and each type changes the keyboard or built-in checks. An `email` field can reject missing `@` signs, while a `number` field can block letters in most browsers.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq11"><span>How do form elements work together in a real page?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq11" hidden><p>Form elements work together by pairing labels, inputs, and buttons so the browser can group the data into one submission. In a simple login form, 2 fields and 1 submit button can send the username and password as named pairs to a server script.</p></div></div> <div class="bfaq__item"><button class="bfaq__q" aria-expanded="false" aria-controls="cfaq12"><span>What should you watch for in an online course on forms?</span><span class="bfaq__ico" aria-hidden="true">+</span></button><div class="bfaq__a" id="cfaq12" hidden><p>You should watch for clear demos that show both the HTML and the `submit` event, because good online course lessons connect markup to behavior in the browser. In a strong lesson, you see the form submit once, then get intercepted once, so you can compare both outcomes.</p></div></div> </div> <h2 id="final-thoughts">Final Thoughts on HTML Forms</h2> <p>HTML forms look simple, but they sit at the center of real web work. A form collects values, names matter, the browser builds an HTTP request, and JavaScript can step in to change the path. That chain shows up in login screens, checkout pages, search bars, and 1-line demos in class. The most useful habit is to stop thinking of a form as a picture on the page. Think of it as a machine with inputs, events, and a destination. Once you see that, the common mistakes get easier to spot: missing names, buttons with the wrong type, scripts that block submission too early, and fields that look filled but never leave the page. Students also need to treat markup and script as partners, not rivals. HTML gives the form its shape and fallback behavior. JavaScript adds checks, message handling, and custom flows after submit. That split makes front-end code cleaner, and it saves time when something breaks. If you are practicing this topic, build two versions of the same form this week: one that submits normally and one that intercepts the submit event. Compare the request, the payload, and the browser behavior. That small test teaches more than a dozen slides ever will.</p> <aside class="emotional-callout reveal"> <div class="emotional-callout__quote">“</div> <div class="emotional-callout__label">What this comes down to</div> <p class="emotional-callout__story">People hit HTML forms in messy moments: a checkout page that drops a card number on a bad submit, a login box that reloads too fast, a contact form that clears itself before they can copy what they typed. In a JavaScript class, that pain shows up fast because the form tag is simple, but the submit event has sharp edges. One missed preventDefault and the browser does exactly what browsers do: it leaves.</p> <div class="emotional-callout__divider"></div> <p class="emotional-callout__reflection">That is why forms matter so much in an Introduction to JavaScript course. You learn where the input values live, how submit buttons trigger requests, and how a script can read, block, or reshape the data before it leaves the page. UPI Study fits that step neatly when you want practice that maps to ACE and NCCRS credit in the same course path.</p> </aside> <section class="stepviz stepviz--general reveal"> <h3 class="stepviz__title">How UPI Study credits actually work</h3> <div class="stepviz__canvas"> <svg viewBox="0 0 600 240" xmlns="http://www.w3.org/2000/svg" class="stepviz__svg" aria-hidden="true"> <defs> <linearGradient id="gen-track" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#4a90e2"/> <stop offset="100%" stop-color="#2e9e4f"/> </linearGradient> <radialGradient id="gen-end-glow" cx="50%" cy="50%"> <stop offset="0%" stop-color="#2e9e4f" stop-opacity="0.4"/> <stop offset="100%" stop-color="#2e9e4f" stop-opacity="0"/> </radialGradient> <linearGradient id="gen-paper" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#fff"/> <stop offset="100%" stop-color="#f8fafc"/> </linearGradient> </defs>  <line x1="100" y1="120" x2="500" y2="120" stroke="#e5e7eb" stroke-width="2" stroke-dasharray="3 5" class="gen-track-bg"/> <line x1="100" y1="120" x2="500" y2="120" stroke="url(#gen-track)" stroke-width="3" stroke-linecap="round" stroke-dasharray="400" stroke-dashoffset="400" class="gen-track-fill"/>  <g class="gen-stage gen-stage--1">  <circle cx="100" cy="120" r="38" fill="#eff6ff"/>  <rect x="80" y="108" width="40" height="26" rx="3" fill="#fff" stroke="#4a90e2" stroke-width="2"/>  <line x1="86" y1="115" x2="106" y2="115" stroke="#4a90e2" stroke-width="1.5" stroke-linecap="round"/> <line x1="86" y1="120" x2="114" y2="120" stroke="#bfdbfe" stroke-width="1.5" stroke-linecap="round"/> <line x1="86" y1="125" x2="100" y2="125" stroke="#bfdbfe" stroke-width="1.5" stroke-linecap="round"/>  <rect x="76" y="134" width="48" height="3" rx="1.5" fill="#4a90e2"/> </g> <text x="100" y="180" font-family="-apple-system,sans-serif" font-size="12" font-weight="700" fill="#1e3a8a" text-anchor="middle" class="gen-lbl gen-lbl--1">Take the course</text> <text x="100" y="196" font-family="-apple-system,sans-serif" font-size="11" fill="#64748b" text-anchor="middle" class="gen-lbl gen-lbl--1">ACE / NCCRS approved</text>  <g class="gen-stage gen-stage--2"> <circle cx="300" cy="120" r="38" fill="#f5f3ff"/>  <g transform="translate(300 120) rotate(-4)"> <rect x="-18" y="-22" width="36" height="44" rx="2" fill="url(#gen-paper)" stroke="#7c3aed" stroke-width="1.8"/>  <line x1="-12" y1="-14" x2="12" y2="-14" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>  <line x1="-12" y1="-7" x2="6" y2="-7" stroke="#cbd5e1" stroke-width="1.2" stroke-linecap="round"/> <line x1="-12" y1="-2" x2="10" y2="-2" stroke="#cbd5e1" stroke-width="1.2" stroke-linecap="round"/> <line x1="-12" y1="3" x2="4" y2="3" stroke="#cbd5e1" stroke-width="1.2" stroke-linecap="round"/> <line x1="-12" y1="8" x2="10" y2="8" stroke="#cbd5e1" stroke-width="1.2" stroke-linecap="round"/>  <circle cx="9" cy="14" r="4" fill="none" stroke="#f59e0b" stroke-width="1.2"/> <circle cx="9" cy="14" r="1.5" fill="#f59e0b"/> </g> </g> <text x="300" y="180" font-family="-apple-system,sans-serif" font-size="12" font-weight="700" fill="#4c1d95" text-anchor="middle" class="gen-lbl gen-lbl--2">Get a transcript</text> <text x="300" y="196" font-family="-apple-system,sans-serif" font-size="11" fill="#64748b" text-anchor="middle" class="gen-lbl gen-lbl--2">Official credit record</text>  <g class="gen-stage gen-stage--3"> <circle cx="500" cy="120" r="48" fill="url(#gen-end-glow)" class="gen-end-glow"/> <circle cx="500" cy="120" r="38" fill="#ecfdf5"/>  <g transform="translate(500 120)">  <path d="M 0,-12 L 18,-2 L 0,8 L -18,-2 Z" fill="#2e9e4f" stroke="#065f46" stroke-width="1"/>  <path d="M -10,2 Q -10,12 0,12 Q 10,12 10,2" fill="none" stroke="#2e9e4f" stroke-width="2.5" stroke-linecap="round"/>  <line x1="14" y1="-2" x2="14" y2="10" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round"/> <circle cx="14" cy="11" r="2" fill="#f59e0b"/> </g> </g> <text x="500" y="180" font-family="-apple-system,sans-serif" font-size="12" font-weight="700" fill="#065f46" text-anchor="middle" class="gen-lbl gen-lbl--3">Apply to your degree</text> <text x="500" y="196" font-family="-apple-system,sans-serif" font-size="11" fill="#059669" text-anchor="middle" class="gen-lbl gen-lbl--3">Transfer to cooperating college</text> </svg> </div> </section> <section class="enroll-cta enroll-cta--vfd reveal"> <div class="enroll-cta__blob enroll-cta__blob--1"></div> <div class="enroll-cta__blob enroll-cta__blob--2"></div> <h3>Ready to Earn College Credit?</h3> <p>ACE & NCCRS approved · Self-paced · Transfer to colleges · $250/course or $99/month</p> <div class="enroll-cta__btns"> <a href="https://www.upistudy.com/enroll/2282799?price_id=3057908" class="enroll-cta__btn enroll-cta__btn--green cta-primary" target="_blank" rel="noopener">Start Today →</a> <a href="https://www.upistudy.com/collections" class="enroll-cta__btn enroll-cta__btn--ghost" target="_blank" rel="noopener">Browse Courses</a> </div> </section> <div class="resources"><div class="resources__title">Helpful Resources</div> <div class="resources__grid"> <a href="https://www.upistudy.com/pages/upi-s-cooperating-universities" class="resources__card"><span class="resources__icon">🎓</span><span class="resources__card-t">Find My College</span><span class="resources__card-s">Check if your school accepts UPI Study credits</span></a> <a href="https://www.upistudy.com/collections" class="resources__card"><span class="resources__icon">📚</span><span class="resources__card-t">Browse All Courses</span><span class="resources__card-s">90+ ACE & NCCRS approved</span></a> <a href="https://www.upistudy.com/pages/accreditation" class="resources__card"><span class="resources__icon">✅</span><span class="resources__card-t">Our Accreditation</span><span class="resources__card-s">What ACE & NCCRS means for you</span></a> <a href="https://www.upistudy.com/pages/pricing" class="resources__card"><span class="resources__icon">💰</span><span class="resources__card-t">Plans & Pricing</span><span class="resources__card-s">$250/course or $99/month</span></a> <a href="https://calendly.com/upiglobale/15" class="resources__card" target="_blank" rel="noopener"><span class="resources__icon">📅</span><span class="resources__card-t">Talk to an Advisor</span><span class="resources__card-s">Free 15-min transfer planning call</span></a> <a href="https://www.upistudy.com/pages/resources" class="resources__card"><span class="resources__icon">📄</span><span class="resources__card-t">More Resources</span><span class="resources__card-s">Guides, tools & transfer strategies</span></a> </div></div> <section class="more-topic"> <div class="more-topic__heading">More on Introduction To Javascript</div> <div class="more-topic__grid"> <a href="https://www.upistudy.com/blog/introduction-to-javascript/what-is-pseudocode-in-programming" class="more-topic__card reveal"> <span class="more-topic__card-tag">More reading</span> <span class="more-topic__card-title">What Is Pseudocode In Programming</span> <span class="more-topic__card-arrow">→</span> </a> <a href="https://www.upistudy.com/blog/introduction-to-javascript/what-is-the-html-script-tag-in-javascript" class="more-topic__card reveal"> <span class="more-topic__card-tag">More reading</span> <span class="more-topic__card-title">What Is The Html Script Tag In Javascript</span> <span class="more-topic__card-arrow">→</span> </a> <a href="https://www.upistudy.com/blog/introduction-to-javascript/" class="more-topic__card reveal"> <span class="more-topic__card-tag">More reading</span> <span class="more-topic__card-title">Introduction To Javascript</span> <span class="more-topic__card-arrow">→</span> </a> </div> </section> <div class="upi-license-notice" style="margin:40px 0 8px;padding:16px 18px;border:1px solid #e6e9ef;border-radius:12px;background:#f8fafc;font-size:13px;line-height:1.6;color:#475569;"> <strong>© UPI Study.</strong> This article and its educational content are solely owned by UPI Study and licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" rel="license nofollow" target="_blank">CC BY-NC-ND 4.0</a>. It is not free to reuse or modify. Any citation must credit UPI Study with a direct link to <a href="https://www.upistudy.com/blog/introduction-to-javascript/what-are-html-forms-and-form-submission">this page</a>. </div> </main> <aside class="sidebar"> <nav class="btoc"><div class="btoc__lbl">Table of Contents</div> <ul class="btoc__list"><li><a href="#quick-answer" class="btoc__link"><span class="btoc__n">01</span><span>Quick Answer on HTML Forms</span></a></li> <li><a href="#what-are-html-forms-and-submission" class="btoc__link"><span class="btoc__n">02</span><span>What Are HTML Forms and Submission?</span></a></li> <li><a href="#which-form-elements-collect-user-data" class="btoc__link"><span class="btoc__n">03</span><span>Which Form Elements Collect User Data?</span></a></li> <li><a href="#how-does-html-form-submission-actually-work" class="btoc__link"><span class="btoc__n">04</span><span>How Does HTML Form Submission Actually Work?</span></a></li> <li><a href="#how-do-javascript-submit-events-change-forms" class="btoc__link"><span class="btoc__n">05</span><span>How Do JavaScript Submit Events Change Forms?</span></a></li> <li><a href="#why-do-form-markup-and-script-need-each-other" class="btoc__link"><span class="btoc__n">06</span><span>Why Do Form Markup and Script Need Each Other?</span></a></li> <li><a href="#what-should-students-check-before-submitting" class="btoc__link"><span class="btoc__n">07</span><span>What Should Students Check Before Submitting?</span></a></li> <li><a href="#faqs" class="btoc__link"><span class="btoc__n">08</span><span>Frequently Asked Questions about HTML Forms</span></a></li> <li><a href="#final-thoughts" class="btoc__link"><span class="btoc__n">09</span><span>Final Thoughts on HTML Forms</span></a></li></ul></nav> <div id="ad-sidebar-top"></div> <div class="bcta-side"> <h3>Earn College Credit Online</h3> <p>ACE & NCCRS approved. Self-paced. Transfer to partner colleges. Start for $250.</p> <a href="https://www.upistudy.com/enroll/2282799?price_id=3057908" target="_blank" rel="noopener">Enroll Now →</a> </div> <div class="brel"><div class="brel__lbl">Related Course Blogs</div> <a href="https://www.upistudy.com/courses/introduction-to-html-css" class="brel__card" target="_blank" rel="noopener"><span class="brel__name">Introduction to HTML and CSS</span><span class="brel__arr">→</span></a><a href="https://www.upistudy.com/courses/introduction-to-javascript" class="brel__card" target="_blank" rel="noopener"><span class="brel__name">Introduction to JavaScript</span><span class="brel__arr">→</span></a><a href="https://www.upistudy.com/courses/computer-concepts-applications" class="brel__card" target="_blank" rel="noopener"><span class="brel__name">Computer Concepts and Applications</span><span class="brel__arr">→</span></a><a href="https://www.upistudy.com/courses/database-fundamentals" class="brel__card" target="_blank" rel="noopener"><span class="brel__name">Database Fundamentals</span><span class="brel__arr">→</span></a></div> <div id="ad-sidebar-mid"></div> </aside> </div>  <footer class="footer" role="contentinfo"> <div class="footer__in">  <div class="footer__grid"> <div class="footer__brandcol"> <img src="https://import.cdn.thinkific.com/204160%2Fcustom_site_themes%2Fid%2Fdoz6H41mQoq2WytyG3Kc_transparent%20bg%20UPI%20LOGO.png?width=384&dpr=2" alt="UPI Study" class="footer__logo"/> <p class="footer__tag">Earn college credits recognized by ACE & NCCRS. Accepted at cooperating universities worldwide. Study at your own pace.</p> </div> <details class="footer__col" open> <summary class="footer__h">Platform</summary> <ul> <li><a href="https://www.upistudy.com/collections">All Courses</a></li> <li><a href="https://www.upistudy.com/pages/pricing">Plans & Pricing</a></li> <li><a href="https://www.upistudy.com/pages/upi-s-cooperating-universities">Find My College</a></li> <li><a href="https://www.upistudy.com/pages/calculator">Degree Planner</a></li> <li><a href="https://www.upistudy.com/blog">Blog</a></li> </ul> </details> <details class="footer__col" open> <summary class="footer__h">For You</summary> <ul> <li><a href="https://www.upistudy.com/pages/first-responders">First Responders</a></li> <li><a href="https://www.upistudy.com/courses/efa">EFA Program</a></li> <li><a href="https://www.upistudy.com/pages/uk">UK Programs</a></li> </ul> </details> <details class="footer__col" open> <summary class="footer__h">Partnerships</summary> <ul> <li><a href="https://www.upistudy.com/pages/upi-for-colleges">For Colleges</a></li> <li><a href="https://www.upistudy.com/courses/partner-with-upi">Become a UPI Study Center</a></li> <li><a href="https://www.upistudy.com/bundles/business">Corporate Partnerships</a></li> </ul> </details> <details class="footer__col" open> <summary class="footer__h">Support</summary> <ul> <li><a href="https://www.upistudy.com/pages/accreditation">Accreditation</a></li> <li><a href="https://www.upistudy.com/courses/requestdocuments">Request Transcript</a></li> <li><a href="https://calendly.com/upiglobale/15" target="_blank" rel="noopener">Talk to Advisor</a></li> <li><a href="mailto:team@upistudy.com">Email Us</a></li> </ul> </details> </div> <div class="footer__bot"> <span>© UPI Study. All rights reserved.</span> <div class="footer__legal"> <a href="https://www.upistudy.com/pages/privacy">Privacy Policy</a> <a href="https://www.upistudy.com/pages/terms">Terms of Service</a> </div> </div> </div> </footer> <script> (function(){ var burger=document.getElementById("blogBurger"); var menu=document.getElementById("blogMobileMenu"); if(burger&&menu){ burger.addEventListener("click",function(){ var open=menu.classList.toggle("is-open"); burger.setAttribute("aria-expanded",open); document.body.style.overflow=open?"hidden":""; }); document.addEventListener("click",function(e){ if(!burger.contains(e.target)&&!menu.contains(e.target)){ menu.classList.remove("is-open"); burger.setAttribute("aria-expanded","false"); document.body.style.overflow=""; } }); } })(); (function(){ function syncFooterAccordions(){ var isMobile = window.matchMedia("(max-width: 700px)").matches; document.querySelectorAll(".footer__col").forEach(function(d){ if(d.tagName==="DETAILS") d.open = !isMobile; }); } syncFooterAccordions(); window.addEventListener("resize", syncFooterAccordions); })(); </script> <script> var _liked=false,_base=643; function doLike(){_liked=!_liked;var btn=document.getElementById("likeBtn"),cnt=document.getElementById("likeCnt");btn.classList.toggle("liked",_liked);cnt.textContent=_liked?_base+1:_base;} document.querySelectorAll(".bfaq__q").forEach(function(btn){btn.addEventListener("click",function(){var exp=this.getAttribute("aria-expanded")==="true";var panel=document.getElementById(this.getAttribute("aria-controls"));this.setAttribute("aria-expanded",String(!exp));if(panel)panel.hidden=exp;});}); (function(){var links=document.querySelectorAll(".btoc__link");var heads=document.querySelectorAll(".article h2[id]");if(!links.length||!heads.length)return;var obs=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting){var id=e.target.id;links.forEach(function(l){l.classList.toggle("active",l.getAttribute("href")==="#"+id);});}});},{rootMargin:"-15% 0px -75% 0px"});heads.forEach(function(h){obs.observe(h);});})(); (function(){var els=document.querySelectorAll(".reveal");if(!els.length||!("IntersectionObserver"in window))return;var ob=new IntersectionObserver(function(entries){entries.forEach(function(e,i){if(e.isIntersecting){setTimeout(function(){e.target.classList.add("visible");},i*220);ob.unobserve(e.target);}});},{threshold:0.15});els.forEach(function(el){ob.observe(el);});})(); </script> <script src="/blog/ads.js?v=7" defer></script>  <style> #upitoast{position:fixed;z-index:99999;left:24px;bottom:24px;width:520px;max-width:calc(100vw - 32px); background:#fff;border-radius:14px;box-shadow:0 8px 34px rgba(16,24,40,.20); display:flex;align-items:center;gap:14px;padding:14px 16px; transform:translateX(-130%);opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .55s; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;} #upitoast.show{transform:translateX(0);opacity:1;} #upitoast .ut-ic{flex:0 0 46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center; font-size:21px;color:#fff;} #upitoast .ut-body{flex:1;min-width:0;} #upitoast .ut-title{font-size:14.5px;font-weight:600;color:#15181f;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} #upitoast .ut-sub{font-size:12.5px;color:#6a6a6a;margin-top:2px;line-height:1.4;} #upitoast .ut-cta{flex:0 0 auto;background:#2563eb;color:#fff;font-size:13px;font-weight:600; text-decoration:none;padding:10px 16px;border-radius:9px;white-space:nowrap;transition:background .15s;} #upitoast .ut-cta:hover{background:#1d4ed8;} #upitoast .ut-x{position:absolute;top:7px;right:11px;font-size:17px;line-height:1;color:#c2c2c2;cursor:pointer; background:none;border:0;padding:2px;} #upitoast .ut-x:hover{color:#888;} #upitoast .ut-ic .ti{font-size:21px;} @media(max-width:600px){ #upitoast{left:8px;right:8px;bottom:8px;width:auto;max-width:none;padding:10px 12px;gap:10px; transform:translateY(140%);} #upitoast.show{transform:translateY(0);} #upitoast .ut-ic{flex:0 0 36px;height:36px;border-radius:9px;font-size:17px;} #upitoast .ut-ic .ti{font-size:17px;} #upitoast .ut-title{font-size:12.5px;-webkit-line-clamp:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #upitoast .ut-sub{display:none;} #upitoast .ut-cta{font-size:12px;padding:8px 12px;} } </style> <div id="upitoast" role="dialog" aria-label="UPI Study suggestion"> <div class="ut-ic" id="ut-ic"></div> <div class="ut-body"> <div class="ut-title" id="ut-title"></div> <div class="ut-sub" id="ut-sub"></div> </div> <a class="ut-cta" id="ut-cta" href="#" target="_blank" rel="noopener"></a> <button class="ut-x" id="ut-x" aria-label="Dismiss">×</button> </div> <script> (function(){ "use strict"; var SIGNUP="https://www.upistudy.com/users/sign_up"; /* inline SVG icons (white stroke) — no external font needed, always render. keyed by the same names used in the message defs. */ function svg(p){return '<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'+p+'</svg>';} var ICONS={ "ti-book-2":svg('<path d="M19 4v16H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12z"/><path d="M9 4v16"/>'), "ti-certificate":svg('<circle cx="12" cy="9" r="5"/><path d="M9 13.5V21l3-2 3 2v-7.5"/>'), "ti-building-bank":svg('<path d="M3 21h18"/><path d="M5 21V10l7-5 7 5v11"/><path d="M9 21v-6h6v6"/>'), "ti-world-heart":svg('<circle cx="12" cy="12" r="9"/><path d="M3.6 9h16.8M3.6 15h10"/><path d="M12 3a15 15 0 0 0 0 18"/>'), "ti-briefcase":svg('<rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M3 13h18"/>'), "ti-shield-heart":svg('<path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/><path d="M9 11.5c0-1 1.5-1.8 3-.3 1.5-1.5 3-.7 3 .3 0 1.5-3 3.5-3 3.5s-3-2-3-3.5z"/>'), "ti-flag-3":svg('<path d="M5 21V4"/><path d="M5 4h11l-1.5 3L16 10H5"/>'), "ti-users-group":svg('<circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5"/><path d="M16 6.5a3 3 0 0 1 0 5.8"/><path d="M19 20c0-2-1-3.6-2.5-4.3"/>'), "ti-target-arrow":svg('<circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1"/>'), "ti-school":svg('<path d="M12 4 2 9l10 5 10-5-10-5z"/><path d="M6 11v5c0 1 3 2 6 2s6-1 6-2v-5"/>') }; /* timing */ var START_DELAY=1500, SHOW_MS=7000, GAP_MS=3000, CYCLES_PER_BURST=2, REST_MS=180000, ANIM=560; var DISMISS1_WAIT=15000; /* after x on msg1: wait, then show msg2 once */ /* ---- page-type detection ---------------------------------------------- */ var path=location.pathname.toLowerCase(); /* category = first segment after /blog/ */ var m=path.match(/\/blog\/([^\/]+)\//); var cat=m?m[1]:""; var title=(document.title||"").toLowerCase(); var h1el=document.querySelector("h1"); var h1=(h1el?h1el.textContent:"").toLowerCase(); var hay=cat+" "+title+" "+h1; /* explicit category lists (accurate for everything live today) */ var EXAM=["clep","dsst","ap","sat","ielts","uexcel","tecep","cis-testing","instantcert", "modern-states","microsoft-exams","aleks","actfl","cosc","excelsior","uopeople", "davar","lawshelf","saylor-not","tel-learning","csm-learn","bain4weeks","coopersmith"]; /* note: a few "credit source" cats double as exam-prep; keep CLEP/DSST/AP/SAT/IELTS authoritative */ var EXAM_STRONG=["clep","dsst","ap","sat","ielts","uexcel","tecep"]; var COLLEGE=["tesu","wgu","snhu","psu","purdue-global","universities","suny","cuny-sps", "excelsior","excelsior-plans","pierpont","liberty","strayer","asu","umpi","umpi-plans", "tesu-plans","snhu-plans","cosc-plans","charteroak","woodmont-college","peirce","tamuc", "uw-flex","olivet-nazarene","big-three","colleges","universities","pathways-college", "uk-degrees","european-degrees","general-college","school-comparisons","choosing-school"]; var STATES=["alabama","alaska","arizona","arkansas","california","colorado","connecticut", "delaware","florida","georgia","hawaii","idaho","illinois","indiana","iowa","kansas", "kentucky","louisiana","maine","maryland","massachusetts","michigan","minnesota", "mississippi","missouri","montana","nebraska","nevada","new-hampshire","new-jersey", "new-mexico","new-york","north-carolina","north-dakota","ohio","oklahoma","oregon", "pennsylvania","rhode-island","south-carolina","south-dakota","tennessee","texas","utah", "vermont","virginia","washington","west-virginia","wisconsin","wyoming"]; var EMPLOYER=["employee-benefit","layoffs","veterans","employer-aid","tuition","tuition-reimbursement", "tuition-assistance-from-employer","top-employee-benefits","employee-tuition-reimbursement", "employee-tuition-reimbursement-policy","working-parents","employer"]; /* authoritative UPI course/subject slugs — a positive "course" match. Append new course slugs here as the catalog grows. */ var SUBJECTS=["managerial-accounting","business-essentials","principles-of-management", "foundations-of-leadership","leadership-organizational-behavior","leadership-and-organizational-behavior", "business-communication","business-ethics","leading-organizational-change","project-management", "business-law","international-business","human-resources-management","human-resource-management-in-healthcare", "globalization-and-international-management","globalization-international-management","entrepreneurship", "microeconomics","macroeconomics","principles-of-finance","financial-management","principles-of-marketing", "marketing-research","advanced-technical-writing","technical-writing-course","business-math","math-100-business-math", "calculus-1","calculus-2","calculus-3","quantitative-analysis","discrete-mathematics","principles-of-statistics", "statistics","college-algebra","pre-calculus","current-trends-in-computer-science-and-it", "computer-concepts-and-applications","computer-concepts-applications","introduction-to-html-and-css", "introduction-to-html-css","introduction-to-javascript","ethics-in-technology","introduction-to-networking", "fundamentals-of-information-technology","introduction-to-linux","introduction-to-java","programming-in-python", "introduction-to-computing","programming-in-c","programming-in-c++","data-structure-and-algorithms", "data-structures-algorithms","network-and-systems-security","cybersecurity","introduction-to-cybersecurity", "database-fundamentals","software-engineering","introduction-to-operating-systems", "introduction-to-artificial-intelligence","artificial-intelligence","database-programming", "system-analysis-and-design","medical-terminology","healthcare-finance-budgeting", "healthcare-organization-management","biology","biology-1","biology-2","chemistry","chemistry-1", "physics","physics-1","introduction-to-psychology","research-methods-in-psychology","psychology-of-diversity", "educational-psychology","abnormal-psychology","psychology-of-personality","advanced-social-psychology", "psychology","ethics-in-the-social-sciences","introduction-to-sociology","introduction-to-criminology", "principles-of-philosophy","environmental-science","english-composition-1","english-composition-2", "anatomy-and-physiology-i","anatomy-and-physiology-ii","art-history-1","art-history-2","college-writing", "us-history-1","us-history-2","french-1","french-2","critical-thinking-analysis","chem","chemistry-i", "business-and-management","business-essentials","macroeconomics","managerial-accounting","marketing-research"]; /* known college display names (abbreviation -> friendly name); else "this university" */ var NAMES={tesu:"Thomas Edison State",wgu:"WGU",snhu:"SNHU",psu:"Penn State", "purdue-global":"Purdue Global",suny:"SUNY","cuny-sps":"CUNY SPS",excelsior:"Excelsior", asu:"ASU",umpi:"UMPI",liberty:"Liberty",strayer:"Strayer",uopeople:"UoPeople", charteroak:"Charter Oak",cosc:"Charter Oak",pierpont:"Pierpont",peirce:"Peirce", tamuc:"Texas A&M Commerce","pathways-college":"your target school"}; function inList(L){ for(var i=0;i<L.length;i++){ if(cat===L[i]) return true; } return false; } function titleNum(){ return ""; } function detect(){ /* exam-prep first (TransferCredit) — authoritative cats or strong title signal */ if(inList(EXAM_STRONG) || inList(EXAM) || /\b(clep|dsst)\b/.test(hay) || /\bap exam\b/.test(hay)) return "exam"; /* EFA */ if(cat==="efa" || /\beducation for all\b/.test(hay)) return "efa"; /* first responders */ if(cat==="first-responders" || /first responder/.test(hay)) return "first"; /* UK */ if(cat==="uk-degrees" || cat==="uk" || /\b(uk|united kingdom|british)\b/.test(hay) && /degree|universit/.test(hay)) return "uk"; /* partner / upi center */ if(cat==="upi-center" || /partner with upi|become a partner/.test(hay)) return "partner"; /* employer / tuition benefit */ if(inList(EMPLOYER) || /tuition reimbursement|tuition assistance|employer (pay|cover)/.test(hay)) return "employer"; /* college / school / US state — but NOT prep/guide cats that merely contain "college" */ var NOT_COLLEGE=["college-prep","community-college","college-credit","online-college","general-college"]; if(NOT_COLLEGE.indexOf(cat)===-1 && (inList(COLLEGE) || inList(STATES) || /\b(university|college|degree at|online degree)\b/.test(hay))) return "college"; /* known UPI subject -> course (authoritative, before the generic default) */ if(inList(SUBJECTS)) return "course"; /* default: course/subject */ return "course"; } function collegeName(){ var nm=null; if(NAMES[cat]) nm=NAMES[cat]; else { for(var i=0;i<STATES.length;i++){ if(cat===STATES[i]){ nm="in "+STATES[i].replace(/-/g," ").replace(/\b\w/g,function(c){return c.toUpperCase();}); break; }} } /* no JS length cap — the CSS clamp (2 lines desktop / 1 line + ellipsis mobile) safely handles any length. Only fall back when no name resolved. */ if(!nm) return "this university"; return nm; } /* detect if TWO different known colleges are referenced (a comparison) */ function isComparison(){ var found={}; for(var key in NAMES){ if(NAMES.hasOwnProperty(key)){ if(new RegExp("\\b"+key+"\\b").test(hay)) found[NAMES[key]]=1; }} return Object.keys(found).length>=2; } /* ---- messages ---------------------------------------------------------- */ function msgs(){ var SIGNUP_MSG={ic:"ti-book-2",bg:"#ffc23d",icColor:"#7a4d00", title:"You're reading 1 of 2,000+ free guides", sub:"Create a free UPI account to unlock the full library.", cta:"Sign up",href:SIGNUP}; var type=detect(); var second; if(type==="exam"){ second={ic:"ti-target-arrow",bg:"#6366f1", title:"Pass this exam — or get UPI courses free", sub:"Free CLEP & DSST prep at our partner TransferCredit.org, with a pass-or-it's-free guarantee.", cta:"Prep free",href:"https://www.transfercredit.org"}; } else if(type==="efa"){ second={ic:"ti-world-heart",bg:"#a855f7", title:"A degree you can actually afford", sub:"Stack affordable accredited UPI credits into a real degree — see the whole path.", cta:"See the path",href:"https://www.upistudy.com/courses/efa"}; } else if(type==="first"){ second={ic:"ti-shield-heart",bg:"#ef4444", title:"You served — fast-track your degree", sub:"First responders get a quicker, more affordable route to an accredited degree with UPI.", cta:"Start now",href:"https://www.upistudy.com/pages/first-responders"}; } else if(type==="uk"){ second={ic:"ti-flag-3",bg:"#0ea5e9", title:"Study in the UK for a fraction of the cost", sub:"Bank accredited UPI credits now and transfer them into a UK degree.", cta:"Explore UK",href:"https://www.upistudy.com/pages/uk"}; } else if(type==="partner"){ second={ic:"ti-users-group",bg:"#14b8a6", title:"Bring affordable credit to your learners", sub:"Schools and organizations partner with UPI to open accredited courses to their students.", cta:"Partner",href:"https://www.upistudy.com/courses/partner-with-upi"}; } else if(type==="employer"){ second={ic:"ti-briefcase",bg:"#f97316", title:"Turn tuition benefits into real degrees", sub:"Whether you're an employee or an employer, UPI makes accredited credit affordable to fund.", cta:"See how",href:"https://www.upistudy.com/bundles/business"}; } else if(type==="college"){ var head; if(isComparison()){ head="Cut your tuition at either school"; } else { var nm=collegeName(); head = (nm.indexOf("in ")===0) ? "Cut your tuition "+nm : "Cut your tuition at "+nm; } second={ic:"ti-building-bank",bg:"#22c55e", title:head, sub:"Earn accredited credits with UPI, transfer them in, and graduate from this school for far less.", cta:"Cut tuition",href:"https://www.upistudy.com/pages/upi-s-cooperating-universities"}; } else { second={ic:"ti-certificate",bg:"#3b82f6", title:"Get college credit for this subject", sub:"Take the full accredited course with UPI and turn what you're reading into credit toward your degree.", cta:"Earn credit",href:"https://www.upistudy.com/collections"}; } return [SIGNUP_MSG, second]; } /* ---- render + rotation ------------------------------------------------- */ var box=document.getElementById("upitoast"); if(!box) return; var icEl=document.getElementById("ut-ic"), titleEl=document.getElementById("ut-title"), subEl=document.getElementById("ut-sub"), ctaEl=document.getElementById("ut-cta"); var MESSAGES=msgs(), idx=0, cycles=0, dead=false, timer=null; function paint(msg){ icEl.innerHTML=ICONS[msg.ic]||ICONS["ti-school"]; icEl.style.background=msg.bg; titleEl.textContent=msg.title; subEl.textContent=msg.sub; ctaEl.textContent=msg.cta; ctaEl.href=msg.href; } /* a hold-timer that can be paused on hover and resumed on mouse-leave. calls onDone() after SHOW_MS of *un-hovered* time. */ var holdStart=0, holdRemaining=SHOW_MS, holdTimer=null, holdDone=null, holdPaused=false; function startHold(onDone){ holdDone=onDone; holdRemaining=SHOW_MS; holdPaused=false; holdStart=Date.now(); holdTimer=setTimeout(fireHold, holdRemaining); } function fireHold(){ holdTimer=null; if(holdDone){ var d=holdDone; holdDone=null; d(); } } function pauseHold(){ if(holdPaused||!holdTimer) return; holdPaused=true; clearTimeout(holdTimer); holdTimer=null; holdRemaining-=(Date.now()-holdStart); if(holdRemaining<0) holdRemaining=0; } function resumeHold(){ if(!holdPaused) return; holdPaused=false; holdStart=Date.now(); holdTimer=setTimeout(fireHold, holdRemaining); } // pause while hovering the toast; resume on leave box.addEventListener("mouseenter", pauseHold); box.addEventListener("mouseleave", resumeHold); function showOne(){ if(dead) return; paint(MESSAGES[idx]); box.classList.add("show"); startHold(function(){ box.classList.remove("show"); setTimeout(function(){ if(dead) return; idx++; if(idx>=MESSAGES.length){ idx=0; cycles++; if(cycles>=CYCLES_PER_BURST){ cycles=0; timer=setTimeout(showOne, REST_MS); /* normal 3-min rest, then loop */ return; } } timer=setTimeout(showOne, GAP_MS); }, ANIM); }); } /* show msg2 a single time, then a normal rest, then resume the normal cycle */ function showSecondOnceThenRest(){ if(dead) return; idx=1; paint(MESSAGES[1]); box.classList.add("show"); startHold(function(){ box.classList.remove("show"); setTimeout(function(){ if(dead) return; idx=0; cycles=0; timer=setTimeout(showOne, REST_MS); /* 3-min rest, then normal cycle resumes (option a) */ }, ANIM); }); } document.getElementById("ut-x").addEventListener("click",function(){ if(timer) clearTimeout(timer); if(holdTimer){ clearTimeout(holdTimer); holdTimer=null; holdDone=null; } box.classList.remove("show"); if(idx===0){ /* x on message 1 -> wait 15s, show message 2 once, then 3-min rest, then resume */ timer=setTimeout(showSecondOnceThenRest, DISMISS1_WAIT); } else { /* x on message 2 -> stop completely for the session */ dead=true; } }); setTimeout(showOne, START_DELAY); })(); </script>  </body> </html>