Online Form

100%

✓ Published0🌍 Public

Last edited Sep 18, 2021

Created on Sep 18, 2021

This interactive form displays a booking interface with fields for a user’s first and last name, a "book now" submit button, and an additional total amount text box. The page shows a live date/time in a header and uses JavaScript’s `Date` object to hide the booking button if the current date matches a hard-coded date (October 23, 2021). A separate script tracks clicks on the "book now" button via a counter and displays the accumulated count in an alert dialog when a second submit button is pressed. The form logic relies on standard HTML input elements and embedded JavaScript functions (`checkEdu()` and `display_count()`), with styling applied from an external `styles.css` file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Login & Registration Form

This example presents an interactive login and registration form built with HTML and CSS, featuring a toggle between two views. The interface uses a hidden checkbox (`#check`) to switch between the login and signup forms, with CSS transitions on the submit buttons for hover feedback. The design is styled with the Poppins font from Google Fonts, and the form inputs are purely presentational, with no backend or validation logic. The implementation relies on vanilla JavaScript only for the checkbox interaction, while the visual styling and layout are handled entirely through the included stylesheet.

SSriyaI

59% match

Loading thumbnail…

Login-Box

This interactive login form demonstrates a form-validation and animation sequence. It presents a centered login box where users enter a username and password; blank fields receive a red error box-shadow. Upon successful submission, the dark background layer slides in, the form animates off-screen to the right, and a personalized greeting in the "Rock Salt" font fades in from the top. The implementation uses jQuery `.animate()` for the CSS-based motion, while the D3.js library (v5) is loaded but not directly used; the page structure and styling rely on HTML, CSS, and JavaScript.

AAndrew-Kiwa

55% match

Loading thumbnail…

redux-form example - http://insin.github.io/redux-form-example/

This example demonstrates a travel-add form built with React and redux-form, styled using React-Bootstrap. It validates user input—start and end dates, origin, destination, hotel, and car access—with client-side rules like date range checks, and includes a fake submit flow that displays the submitted data as formatted JSON. The visualization highlights redux-form's declarative field binding, validation, and state management through a multi-field form, with a loading state simulated during submission.

AAbhay-Joshi-Git

55% match

Loading thumbnail…

Gist ee842d3f857add56f3a62dbd10cbcf1a

This interactive form builder dynamically appends cloned blocks of academic data fields to a page. The code uses the native DOM API, including `getElementById`, `cloneNode`, and `appendChild`, to duplicate a labeled input container. Each new block receives a unique ID and incremented class suffixes. The example demonstrates a client-side approach for adding repeatable form sections without external libraries.

MMistyBlunch

55% match

Loading thumbnail…

calculator

This interactive simple interest calculator uses a standard web form to compute interest based on principal amount, time in years, and interest rate. Users enter three numeric values into separate input fields and trigger the calculation via an HTML button that calls the `calculate()` function. The JavaScript code retrieves the input values using `document.getElementById()`, applies the formula `(principal*time*rate)/100`, and displays the output in a designated heading element. A reset button reloads the page to clear all values. The interface is styled with custom CSS, using absolute positioning and border styling for a clean, basic layout.

SSreenivasulu

55% match

Loading thumbnail…

Input

This example demonstrates two groups of radio buttons for selecting options, with a form that captures and displays the chosen contact method as text output. The page combines static HTML form elements with a JavaScript event listener that uses the FormData API to log submitted values. Styling relies on CSS with monospace fonts, rem-based spacing, and a highlighted class for visual emphasis. The code uses standard browser APIs—including addEventListener, preventDefault, and querySelector—to handle form submission without any external visualization libraries.

Rross-fisher

55% match

Loading thumbnail…

Untitled

This example demonstrates the use of vanilla JavaScript and CSS to handle basic user input and display dynamic text on a web page. It shows a prompt-based grade calculator that assigns letter grades (A through F) based on a numeric score, along with corresponding feedback messages, and also displays the current day of the week using a switch statement on `new Date().getDay()`. The page uses `document.write()` for output and a simple `style.css` file with a custom `g2` element style, though no React or specific data-visualization libraries are involved.

Wwoojinsong

54% match

Loading thumbnail…

step by step form

This example demonstrates a multi-step form with a visual progress tracker. The form uses a numbered list of four steps, with the active step highlighted in purple, and each step displays as an animated sliding fieldset. The code uses vanilla JavaScript event listeners to navigate between fieldsets, storing input values in a Map array. CSS animations (`showme` and `hideme`) control the slide transitions, while the progress bar is built with styled list items and counters. The final review page displays all collected data as text before submission.

KKacieW

54% match