HTML Creating Forms and Form Tags: A Detailed Explanation

HTML forms are essential tools for web developers as they allow interaction between users and websites. Forms enable data collection from users, facilitating tasks such as registration, login, searches, and feedback submissions. This comprehensive guide will detail how to create forms in HTML, including the significance of various form tags and their attributes.

The

Tag

The <form> tag is the foundation of any HTML form. It wraps all the form elements and provides essential attributes like action and method. The action attribute specifies the URL to which the form data should be sent upon submission, while the method attribute indicates the HTTP method (GET or POST) used for sending data.

<form action="/submit" method="POST">
  <!-- Form elements go here -->
</form>

Input Elements

The <input> tag is one of the most commonly used tags within forms. It creates interactive controls for form data entry. This tag supports various type attributes, each specifying a different kind of input field.

Types of Input Elements:

1. Text Input (type="text")

   • Used to collect single-line text input from users.
   • Example:

     <label for="uname">Username:</label>
     <input type="text" id="uname" name="username">
     

2. Password Input (type="password")

   • Used for password fields; text is hidden for security.
   • Example:

     <label for="psw">Password:</label>
     <input type="password" id="psw" name="password">
     

3. Checkbox (type="checkbox")

   • Allows users to select multiple options.
   • Example:

     <input type="checkbox" id="subscribe" name="newsletter" value="subscribe">
     <label for="subscribe">Subscribe to newsletter</label>
     

4. Radio Buttons (type="radio")

   • Used for single choice selection among multiple options.
   • Example:

     <input type="radio" id="male" name="gender" value="male">
     <label for="male">Male</label>
     <input type="radio" id="female" name="gender" value="female">
     <label for="female">Female</label>
     

5. Submit Button (type="submit")

   • Used to submit the form data.
   • Example:

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

6. Reset Button (type="reset")

   • Clears all form data.
   • Example:

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

7. File Upload (type="file")

   • Allows users to upload files.
   • Example:

     <label for="file">Choose a file:</label>
     <input type="file" id="file" name="filename">
     

8. Hidden Input (type="hidden")

   • Not visible to users; stores data sent alongside form data.
   • Example:

     <input type="hidden" id="hidden" name="hiddenValue" value="1234">
     

The Tag

The <label> tag is crucial for improving accessibility and usability. It associates a text label with a form control, making it easier for users to click on the label to activate the corresponding input element.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

The Tag</h4> <p>The <code><textarea></code> tag creates a multi-line text input area. It is ideal for longer input fields, such as comments or messages.</p> <pre><code class="language-html"><label for="comment">Comments:</label> <textarea id="comment" name="comment" rows="4" cols="50"></textarea> </code></pre> <h4>The <select> Tag</h4> <p>The <code><select></code> tag generates a dropdown list of options. Users can select from the predefined choices.</p> <pre><code class="language-html"><label for="country">Country:</label> <select id="country" name="country"> <option value="usa">United States</option> <option value="canada">Canada</option> <option value="uk">United Kingdom</option> </select> </code></pre> <h4>The <button> Tag</h4> <p>While <code><input></code> elements can also create buttons, the <code><button></code> tag provides more flexibility, allowing HTML content within the button (e.g., images, text, icons).</p> <pre><code class="language-html"><button type="submit">Submit</button> </code></pre> <h4>Important Attributes</h4> <ul> <li><strong>name</strong>: Specifies the name of the form element, which is used as the key when sending data to the server.</li> <li><strong>value</strong>: Defines the data value sent to the server when the form is submitted.</li> <li><strong>required</strong>: Indicates that the form field must be filled out before submission.</li> <li><strong>placeholder</strong>: Provides a hint to the user about what to enter in the input field.</li> <li><strong>maxlength</strong>: Limits the maximum number of characters allowed in the input field.</li> <li><strong>minlength</strong>: Specifies the minimum number of characters required in the input field.</li> <li><strong>checked</strong>: Used with checkboxes and radio buttons to indicate that the option is selected by default.</li> </ul> <h4>Example Form</h4> <p>This example demonstrates a complete form incorporating several form elements and attributes.</p> <pre><code class="language-html"><form action="/submit" method="POST"> <label for="fname">First Name:</label> <input type="text" id="fname" name="firstname" required placeholder="Enter your first name"> <label for="lname">Last Name:</label> <input type="text" id="lname" name="lastname" required placeholder="Enter your last name"> <label for="email">Email:</label> <input type="email" id="email" name="email" required placeholder="Enter your email"> <label for="country">Country:</label> <select id="country" name="country"> <option value="usa">United States</option> <option value="canada">Canada</option> <option value="uk">United Kingdom</option> </select> <label for="comment">Comments:</label><br> <textarea id="comment" name="comment" rows="4" cols="50"></textarea> <input type="checkbox" id="subscribe" name="newsletter" value="subscribe"> <label for="subscribe">Subscribe to newsletter</label><br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> </code></pre> <h3>Conclusion</h3> <p>Creating forms in HTML is a fundamental skill for web developers. By understanding the <code><form></code> tag, various input types, and essential attributes, you can design interactive and user-friendly forms. Utilizing <code><label></code>, <code><textarea></code>, and <code><select></code> tags enhances the functionality and accessibility of forms, ensuring a positive user experience. Proper implementation of these form elements allows for efficient data collection and improved interaction between users and websites.</p> <br/><br/><br/><h3>Examples, Setting Route and Running Application: Step-by-Step Guide for Creating HTML Forms</h3> <p>Creating forms in HTML is a fundamental aspect of web development as they enable users to input data, which can then be processed by the server or used locally via JavaScript. In this guide, we will cover everything from basic form creation to setting up a simple server route to handle the data submitted through the form and finally running an application to see how the data flows.</p> <h4>Step 1: Create a Basic HTML Form</h4> <p>Start by creating a basic HTML file with a form that collects user data. We'll demonstrate a simple form that asks for a user's name and email address.</p> <pre><code class="language-html"><!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple HTML Form</title> </head> <body> <h1>Contact Us</h1> <form action="/submit-form" method="POST"> <label for="name">Name:</label><br> <input type="text" id="name" name="name" required><br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email" required><br><br> <input type="submit" value="Submit"> </form> </body> </html> </code></pre> <p><strong>Explanation:</strong></p> <ul> <li><code><form></code> tag: This defines the form and includes <code>action</code> and <code>method</code> attributes.</li> <li><code>action</code>: The URL where the form's data should be submitted. In this case, it's <code>/submit-form</code>.</li> <li><code>method</code>: The HTTP method to use when submitting the form. Using <code>POST</code> helps in sending data securely and hiding data in the URL.</li> <li><code><input></code> tags: These are used to create different types of input fields. Here, we have two text inputs: one for the user's name (<code>type="text"</code>) and one for their email address (<code>type="email"</code>). The <code>required</code> attribute ensures that the field must be filled out before the form can be submitted.</li> <li><code><label></code> tags: These provide labels for each input field which improves form accessibility.</li> </ul> <h4>Step 2: Set Up a Server Environment</h4> <p>We need a server environment to handle form submissions. One of the most popular stacks for beginners is Node.js along with Express.js, a framework that simplifies many common tasks associated with building web servers.</p> <p>First, you need to install Node.js. You can download it from <a href="https://nodejs.org/">nodejs.org</a>. Once installed, create a new directory for your project and initialize a new Node.js project:</p> <pre><code class="language-bash">mkdir html-form-example cd html-form-example npm init -y </code></pre> <p>Next, install Express.js:</p> <pre><code class="language-bash">npm install express </code></pre> <p>Now, let's create a very basic server using Express.js that handles POST requests and prints the submitted form data:</p> <pre><code class="language-javascript">// server.js const express = require('express'); const app = express(); // Middleware to parse urlencoded data app.use(express.urlencoded({ extended: true })); // Route to serve the HTML form app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); // Route to handle form submissions app.post('/submit-form', (req, res) => { console.log(req.body); res.send('Form submitted successfully!'); }); // Start the server on port 3000 app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); </code></pre> <p><strong>Explanation:</strong></p> <ul> <li><code>express.urlencoded</code>: This middleware parses incoming URL-encoded data and makes it available in <code>req.body</code>. If you don't include this, <code>req.body</code> will always be <code>undefined</code>.</li> <li><code>app.get('/')</code>: This defines our main route, which serves the <code>index.html</code> file when users visit the root URL (<code>http://localhost:3000</code>).</li> <li><code>app.post('/submit-form')</code>: This defines a route that listens for POST requests at <code>/submit-form</code>, processes the incoming data, and sends back a response.</li> <li><code>res.sendFile(__dirname + '/index.html')</code>: Serves static files from the current directory. Here, it serves the <code>index.html</code> form.</li> <li><code>app.listen(3000)</code>: Starts the server and listens on port 3000. You can open <code>http://localhost:3000</code> in your browser to interact with the form.</li> </ul> <h4>Step 3: Run the Application and Watch Data Flow</h4> <p>Now that we have our HTML form and server-side setup ready, it's time to run the application.</p> <ol> <li><p>Open your terminal and ensure you’re in the project directory (<code>html-form-example</code>).</p> </li> <li><p>Run the server using the command:</p> <pre><code class="language-bash">node server.js </code></pre> </li> <li><p>Your server will start and print a message in the terminal like "Server is running on http://localhost:3000". Keep this terminal open as it will still be serving the form.</p> </li> <li><p>Open your browser and navigate to <code>http://localhost:3000</code>.</p> </li> <li><p>You should see your "Contact Us" form with Name and Email fields.</p> </li> <li><p>Enter some dummy information into these fields and click "Submit".</p> </li> <li><p>Back in your terminal, observe the output after submission. You should see something like <code>{ name: 'John Doe', email: 'johndoe@example.com' }</code>, indicating that your server has received and logged the data from the form.</p> </li> </ol> <h4>Step 4: Advanced Form Enhancements and Data Handling</h4> <p>While the basic form above works well for demonstration purposes, real-world forms often include more sophisticated features such as validation, error handling, and integration with databases. Here's an example of how to enhance a form with client-side JavaScript validation and server-side validation using the <code>express-validator</code> package:</p> <p>First, install <code>express-validator</code>:</p> <pre><code class="language-bash">npm install express-validator </code></pre> <p>Now, update our server to include validation logic:</p> <pre><code class="language-javascript">// advanced-server.js const express = require('express'); const { body, validationResult } = require('express-validator'); const app = express(); // Middleware to parse urlencoded data app.use(express.urlencoded({ extended: true })); // Serve static files (like our new form) app.use(express.static('public')); // Main route with updated form handling app.get('/', (req, res) => { res.sendFile(__dirname + '/public/advanced-form.html'); }); // Route to handle form submissions with server-side validation app.post('/submit-form', [ body('name').trim().isLength({ min: 2 }).withMessage('Name must be at least 2 characters long'), body('email').isEmail().withMessage('Email must be valid').normalizeEmail() ], async (req, res) => { try { // Validate request body const errors = validationResult(req); if (!errors.isEmpty()) { return res.status(400).send(errors.array()); } // Log the validated data to the console console.log(req.body); // Respond to the user res.send("Form submitted successfully!"); } catch (error) { res.status(500).send('Error processing form submission'); } }); // Start the server on port 3000 app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); </code></pre> <p>And here’s an enhanced version of our HTML form with client-side validation using JavaScript:</p> <pre><code class="language-html"><!-- advanced-form.html in public directory --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Advanced HTML Form</title> <script> document.addEventListener('DOMContentLoaded', function() { const form = document.querySelector('#contact-form'); form.addEventListener('submit', function(event) { event.preventDefault(); // Prevent default form submission // Basic client-side validation const name = form.name.value; const email = form.email.value; if(name.trim().length < 2) { alert('Name must be at least 2 characters long.'); return; } if(!/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/.test(email)) { alert('Email must be valid.'); return; } form.submit(); // Submit the form after passing client-side validation }); }); </script> </head> <body> <h1>Contact Us</h1> <form id="contact-form" action="/submit-form" method="POST"> <label for="name">Name:</label><br> <input type="text" id="name" name="name" required minlength="2"><br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email" required><br><br> <input type="submit" value="Submit"> </form> </body> </html> </code></pre> <p><strong>Explanation:</strong></p> <ul> <li><strong>Server-Side Validation:</strong> Using <code>express-validator</code>, we enforce rules that the name should be at least two characters long, and the email should be in a valid format. If these validations fail, the server responds with an array of validation errors.</li> <li><strong>Client-Side Validation:</strong> We add JavaScript to perform basic validation right in the browser before the data is sent to the server. This reduces unnecessary server load and improves user experience by giving immediate feedback.</li> <li><strong>HTML Changes:</strong> The form now resides within a <code>public</code> directory to utilize <code>express.static</code> middleware, making it accessible as an endpoint directly. Minor tweaks like adding <code>minlength="2"</code> to the name input to complement client-side and server-side validations.</li> </ul> <h4>Conclusion</h4> <p>In this comprehensive guide, we covered how to create a basic HTML form, set up an Express.js server to handle form submissions, and implement both server-side and client-side validation. Understanding these steps is crucial for anyone looking to build interactive and efficient web applications, as handling form data is a staple requirement in web development. Feel free to explore more complex validation scenarios and integrate database functionalities to make your application even more robust!</p> <br/><br/><br/> </div> </section> </div> <nav class="side-nav right-drawer-nav" style=" max-height: 120vh; overflow-y: auto; background-color: #f9f9f9; font-family: 'Times New Roman'; border: none; box-shadow: none; outline: none;"> <div class="nav-section"> <div style="margin-top: 20px;"> <h1 style="color: black"> All Headings</h1> <div id="toc"> </div> <div style="margin-left:-5px"> </div> </div> </div> </nav> </div> <!-- Drawer Toggle Buttons --> <!-- Floating Drawer Toggle Buttons --> <div class="drawer-toggles-floating"> <button class="btn btn-primary toggle-left" title="Open Left Menu"> <i class="bi bi-list"></i> </button> <button class="btn btn-primary toggle-right" title="Open TOC"> <i class="bi bi-layout-sidebar-inset-reverse"></i> </button> </div> </main> <script> document.addEventListener("DOMContentLoaded", function () { const contentBox = document.querySelector('.content-box');//responseBox const toc = document.getElementById('toc'); if (!contentBox || !toc) return; // 1) Clean & convert ```…``` → <pre><code> let html = contentBox.innerHTML; contentBox.innerHTML = html; document.querySelectorAll('.copy-to-clipboard-button').forEach((button) => { button.addEventListener('click', () => { const toolbar = button.closest('.code-toolbar'); if (!toolbar) return; const codeElement = toolbar.querySelector('code'); if (!codeElement) return; const text = codeElement.innerText; navigator.clipboard.writeText(text).then(() => { const span = button.querySelector('span'); if (span) { span.textContent = 'Copied!'; setTimeout(() => (span.textContent = 'Copy'), 2000); } }); }); }); // 2) Build TOC const headings = contentBox.querySelectorAll('h1,h2,h3,h4,h5,h6'); if (headings.length) { const ul = document.createElement('ul'); ul.style.listStyle = 'none'; ul.style.paddingLeft = '10px'; headings.forEach((h, i) => { const id = `heading-${i}`; h.id = id; const li = document.createElement('li'); li.style.marginBottom = '6px'; li.style.fontSize = '14px'; const a = document.createElement('a'); a.href = `#${id}`; a.textContent = h.textContent; a.className = 'toc-link'; a.addEventListener('click', e => { e.preventDefault(); const yOffset = -80; const y = document.getElementById(id).getBoundingClientRect().top + window.pageYOffset + yOffset; window.scrollTo({ top: y, behavior: 'smooth' }); }); li.appendChild(a); ul.appendChild(li); }); toc.appendChild(ul); const links = toc.querySelectorAll('.toc-link'); const highlight = () => { let closest, min = Infinity; headings.forEach(h => { const t = h.getBoundingClientRect().top; if (t >= 0 && t < min) { min = t; closest = h; } }); links.forEach(a => a.classList.remove('active')); if (closest) toc.querySelector(`a[href="#${closest.id}"]`)?.classList.add('active'); }; window.addEventListener('scroll', highlight); window.addEventListener('resize', highlight); highlight(); } // 3) Prism-highlight only inside .content-box if (window.Prism) { contentBox.querySelectorAll('pre code').forEach(el => Prism.highlightElement(el)); } }); </script> <script> document.addEventListener("DOMContentLoaded", function () { const leftToggle = document.querySelector('.toggle-left'); const rightToggle = document.querySelector('.toggle-right'); const leftNav = document.querySelector('.left-drawer-nav'); const rightNav = document.querySelector('.right-drawer-nav'); if (leftToggle && leftNav) { leftToggle.addEventListener('click', () => { leftNav.classList.toggle('active'); }); } if (rightToggle && rightNav) { rightToggle.addEventListener('click', () => { rightNav.classList.toggle('active'); }); } }); </script> <script> document.addEventListener('DOMContentLoaded', () => { const sideNav = document.querySelector('.side-nav'); if (!sideNav) return; // 1. Restore scroll position (if any) const savedScroll = sessionStorage.getItem('sideNavScroll'); if (savedScroll !== null) { sideNav.scrollTop = parseInt(savedScroll, 10); } // 2. Save scroll position on scroll sideNav.addEventListener('scroll', () => { sessionStorage.setItem('sideNavScroll', sideNav.scrollTop); }); }); </script> </main> <footer> <div class="footer-container"> <div class="subscription-section"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m0 0a2 2 0 012 2v8a2 2 0 01-2 2H3a2 2 0 01-2-2v-8a2 2 0 012-2z" /> </svg> <div id="successMessage" style="display:none; color: green; margin-top:10px;"> ✅ Subscription successful! </div> <h2>Level Up Your .NET Skills with .NET School</h2> <p> Join my community of <strong>1,000+ Topic</strong> and <strong>100000+ joined developers</strong><br /> Content in details, Steps by step examples and Top 10 Interview Questions and Answers. </p> <style> .error-message { color: red; font-size: 14px; margin-top: 5px; display: none; } </style> <form class="subscription-form" id="subscribeForm" novalidate> <input type="email" id="emailInput" placeholder="Your Email Address" /> <button type="submit">Subscribe</button> <div id="emailError" class="error-message"></div> </form> </div> <div style="display: flex; justify-content: center; padding: 20px;"> <p style="margin: 0; font-size: 14px; color: #555;"> © 2025 DotNetSchool. All rights reserved. | <a href="/terms" style="text-decoration: underline; color: #007bff;">Terms of Use</a> | <a href="/privacypolicy" style="text-decoration: underline; color: #007bff;">Privacy Policy</a> </p> </div> </div> </footer> <style> #transcript { width: 80%; height: 150px; margin-top: 20px; padding: 10px; font-size: 16px; border: 1px solid #ccc; resize: vertical; } .mic-button { background: none; border: none; font-size: 25px; cursor: pointer; transition: color 0.3s ease; } .mic-idle { color: gray; } .mic-active { color: red; } </style> <script> let recognition; let isListening = false; const micBtn = document.getElementById("micBtn"); function toggleMicColor(active) { if (active) { micBtn.classList.remove("mic-idle"); micBtn.classList.add("mic-active"); } else { micBtn.classList.remove("mic-active"); micBtn.classList.add("mic-idle"); } } function toggleListening() { if (!('webkitSpeechRecognition' in window || 'SpeechRecognition' in window)) { alert('Speech recognition is not supported in your browser.'); return; } if (isListening) { recognition.stop(); return; } const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; recognition = new SpeechRecognition(); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1; recognition.start(); isListening = true; toggleMicColor(true); recognition.onresult = function (event) { const transcript = event.results[0][0].transcript; document.getElementById('aiUserPrompt').value += transcript + '\n'; }; recognition.onerror = function (event) { console.error('Error:', event.error); stopRecognition(); }; recognition.onend = function () { stopRecognition(); }; } function stopRecognition() { isListening = false; toggleMicColor(false); } </script> <!-- Tesseract.js library --> <script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.4/dist/tesseract.min.js"></script> <script> const imageUpload = document.getElementById('imageUpload'); const output = document.getElementById('aiUserPrompt'); const loader = document.getElementById('loader'); imageUpload.addEventListener('change', function (event) { const file = event.target.files[0]; if (file) { loader.style.display = 'block'; output.value = ''; const reader = new FileReader(); reader.onload = function (e) { const img = new Image(); img.src = e.target.result; img.onload = function () { // Draw image on canvas const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); // Check image quality if (isImageBlurryOrLowContrast(canvas)) { loader.style.display = 'none'; output.value = "Image is blurry or low contrast. Please try a clearer photo."; return; } // Resize if larger than 800KB if (file.size > 800 * 1024) { const resizedDataUrl = resizeImage(canvas, 1024, 1024); processImage(resizedDataUrl); } else { processImage(e.target.result); } }; }; reader.readAsDataURL(file); } }); // Resize canvas and return new image as Data URL function resizeImage(canvas, maxWidth, maxHeight) { let width = canvas.width; let height = canvas.height; if (width > height && width > maxWidth) { height *= maxWidth / width; width = maxWidth; } else if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } const newCanvas = document.createElement('canvas'); newCanvas.width = width; newCanvas.height = height; const ctx = newCanvas.getContext('2d'); ctx.drawImage(canvas, 0, 0, width, height); return newCanvas.toDataURL('image/jpeg', 0.7); // 70% quality } // Image quality check based on contrast function isImageBlurryOrLowContrast(canvas, threshold = 20) { const ctx = canvas.getContext("2d"); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; let contrastSum = 0; let totalPixels = canvas.width * canvas.height; for (let i = 0; i < data.length; i += 4) { const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; contrastSum += Math.abs(avg - 128); // center brightness } const avgContrast = contrastSum / totalPixels; return avgContrast < threshold; } // Clean and format text function makeHumanReadable(text) { return text .replace(/[^\x20-\x7E\r\n]+/g, '') // Remove non-printables .replace(/[\\%:-]/g, '') // Remove unwanted symbols .replace(/\r\n|\r|\n/g, '\n') // Normalize newlines .replace(/\s{2,}/g, ' ') // Collapse extra spaces .replace(/([.!?])\s*(?=\w)/g, '$1\n') // New line after sentences .replace(/\n{2,}/g, '\n\n') // Paragraph spacing .replace(/(^\s*\w|[.!?]\s*\w)/g, c => c.toUpperCase()) // Capitalize .trim(); } // Process image and run OCR function processImage(dataUrl) { const img = new Image(); img.src = dataUrl; img.onload = function () { Tesseract.recognize( img, 'eng', { logger: m => console.log(m) } ).then(({ data: { text } }) => { loader.style.display = 'none'; output.value = makeHumanReadable(text); }).catch(err => { loader.style.display = 'none'; output.value = 'Error converting image to text.'; console.error(err); }); }; } </script> <script> $('#subscribeForm').on('submit', function (e) { e.preventDefault(); const email = $('#emailInput').val(); $.ajax({ url: '/Home/Subscribe', method: 'POST', data: { email: email }, success: function (response) { $('#successMessage').show().text(response.message || "✅ Subscription successful!"); $('#subscribeForm')[0].reset(); }, error: function () { alert('❌ Subscription failed. Please try again.'); } }); }); </script> <style> .footer-container { background-color: #f2f2f2; color: #333; padding: 40px 20px; font-family: 'Times New Roman'; } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; } .branding { max-width: 300px; } .address p { font-size: 14px; margin-bottom: 10px; } .social-icons a { display: inline-block; margin-right: 10px; font-size: 18px; color: #333; } .app-links a img { height: 40px; margin-right: 10px; } .advertise-btn { display: inline-block; margin-top: 10px; background-color: #005fa3; color: #fff; padding: 8px 12px; border-radius: 5px; text-decoration: none; font-size: 14px; } .footer-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 30px 40px; width: 100%; max-width: 1400px; /* prevents stretching too wide */ margin: 0 auto; /* centers the grid */ } .link-group { display: flex; flex-direction: column; } .link-group h4 { font-size: 16px; color: #0078d4; margin-bottom: 10px; } .link-group a { display: block; color: #444; font-size: 14px; text-decoration: none; margin-bottom: 6px; } .link-group a:hover { text-decoration: underline; } .link-group h4 { font-size: 16px; margin-bottom: 10px; } .link-group a { display: block; color: #444; font-size: 14px; text-decoration: none; margin-bottom: 6px; } .link-group a:hover { text-decoration: underline; } .footer-bottom { margin-top: 40px; text-align: center; font-size: 13px; color: #666; } </style> <script> document.addEventListener("DOMContentLoaded", function () { const closeBtn = document.getElementById("closePopup"); const popupOverlay = document.getElementById("aiPopupOverlay"); if (closeBtn && popupOverlay) { closeBtn.onclick = function () { popupOverlay.style.display = "none"; }; } else { console.warn("Element with ID 'closePopup' or 'aiPopupOverlay' not found."); } }); </script> <script> document.addEventListener("DOMContentLoaded", function () { const popupOverlay = document.getElementById("aiPopupOverlay"); const closeBtn = document.getElementById("closePopup"); // 👇 Right-click anywhere on the page to show the popup document.addEventListener("contextmenu", function (e) { e.preventDefault(); // Disable default right-click menu if (popupOverlay) { popupOverlay.style.display = "flex"; document.getElementById("aiUserPrompt").placeholder = 'Helping in questions| answers| concepts| coding and implementation.' // Optional: focus input const input = document.getElementById("aiUserPrompt"); if (input) input.focus(); } }); // 👇 Close popup button if (closeBtn) { closeBtn.addEventListener("click", function () { popupOverlay.style.display = "none"; }); } }); </script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script> let currentAbortController = null; function escapeHtml(str) { return str.replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">"); } async function sendPrompt(promptText, targetId,status) { const aiBubble = document.getElementById(targetId); if (!aiBubble) { console.error("AI response container not found:", targetId); return; } const selectedEl = document.querySelector('.section-link.selected'); const sectionName = selectedEl ? selectedEl.textContent.trim() : selectedEl?.dataset.section || ''; var prompt = ''; if (status == 'select') prompt = `Explain ${promptText} on this ${sectionName} steps by steps within 200 words limit and share me complete code`; else { prompt = promptText; } const response = await fetch("/AI/StreamResponse", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: new URLSearchParams({ prompt: prompt }) }); if (!response.ok) { aiBubble.innerHTML = `<span style='color:red;'>Error: ${await response.text()}</span>`; return; } const reader = response.body.getReader(); const decoder = new TextDecoder("utf-8"); let buffer = ""; let output = ""; while (true) { const { value, done } = await reader.read(); if (done) break; buffer += decoder.decode(value, { stream: true }); const events = buffer.split('\n\n'); buffer = events.pop(); for (const event of events) { if (!event.startsWith('data:')) continue; const jsonStr = event.replace(/^data:\s*/, '').trim(); if (jsonStr === '[DONE]') return; try { if (jsonStr) { const parsed = JSON.parse(jsonStr); const content = parsed.choices?.[0]?.delta?.content; if (content !== undefined) { output += content; aiBubble.innerHTML = marked.parse(output); if (window.Prism) { Prism.highlightAllUnder(aiBubble); } } } } catch (err) { console.error("Error parsing AI response", err); aiBubble.innerHTML += "<br><span style='color:red;'>[Error parsing response]</span>"; } } } } // Initialize popup + text selection + send button (function () { const overlay = document.getElementById("aiPopupOverlay"); const closeBtn = document.getElementById("closePopup"); const responseBox = document.getElementById("responseBox"); const input = document.getElementById("aiUserPrompt"); const sendBtn = document.getElementById("sendAiPromptBtn"); // Close popup if (closeBtn) { closeBtn.addEventListener("click", () => { overlay.style.display = "none"; responseBox.innerHTML = ""; input.value = ""; window.getSelection().removeAllRanges(); if (currentAbortController) { currentAbortController.abort(); currentAbortController = null; } }); } // Handle text selection document.addEventListener("mouseup", (event) => { const selectedEl = document.querySelector('.section-link.selected'); const sectionName = selectedEl ? selectedEl.textContent.trim() : selectedEl?.dataset.section || ''; if (sectionName == '') { console.error("No Section Selected"); return; } if (!event.target.closest(".main-content")) return; const text = window.getSelection().toString().trim(); const words = text.split(/\s+/).filter(w => w); if (words.length < 1) return; overlay.style.display = "flex"; const promptText = text; document.getElementById("aiUserPrompt").placeholder = 'Helping in "' + promptText +'" coading and implementation' const formattedUserText = escapeHtml(promptText).includes('\n') ? `<pre>${escapeHtml(promptText)}</pre>` : `<span>${escapeHtml(promptText)}</span>`; const userHtml = `<div class="chat-bubble user-bubble"><br>${formattedUserText}</div>`; //const userHtml = `<div class="chat-bubble user-bubble"><strong>You:</strong> ${escapeHtml(promptText)}</div>`; responseBox.insertAdjacentHTML("beforeend", userHtml); const aiPlaceholderId = "ai-response-" + Date.now(); const aiHtml = `<div class="chat-bubble ai-bubble" id="${aiPlaceholderId}"><em>Teacher is thinking…</em></div>`; responseBox.insertAdjacentHTML("beforeend", aiHtml); responseBox.scrollTop = responseBox.scrollHeight; setTimeout(() => sendPrompt(promptText, aiPlaceholderId,"select"), 50); }); // Handle send button if (sendBtn) { sendBtn.addEventListener("click", (e) => { e.preventDefault(); const promptText = input.value.trim(); if (!promptText) return; const formattedUserText = escapeHtml(promptText).includes('\n') ? `<pre>${escapeHtml(promptText)}</pre>` : `<span>${escapeHtml(promptText)}</span>`; const userHtml = `<div class="chat-bubble user-bubble">${formattedUserText}</div>`; //const userHtml = `<div class="chat-bubble user-bubble"><strong>You:</strong> ${escapeHtml(promptText)}</div>`; responseBox.insertAdjacentHTML("beforeend", userHtml); input.value = ""; const aiPlaceholderId = "ai-response-" + Date.now(); const aiHtml = `<div class="chat-bubble ai-bubble" id="${aiPlaceholderId}"><em>Teacher is thinking…</em></div>`; responseBox.insertAdjacentHTML("beforeend", aiHtml); responseBox.scrollTop = responseBox.scrollHeight; setTimeout(() => sendPrompt(promptText, aiPlaceholderId,"click"), 50); }); } })(); </script> <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script> <script> // Initialize the markdown-it parser const md = window.markdownit({ html: false, linkify: true, typographer: true, breaks: true }); function renderResponse(text) { const html = md.render(text); document.getElementById("responseBox").innerHTML = html; } </script> <script src="/bundles/bootstrap?v=w8onDgD6dxjI0ZL2BTppsIHWiwF60okyYw2WKJDHOF81"></script> </body> </html>