Use CSS3 to conceal the form while displaying the default div

In my project, I am restricted to using only HTML5 and CSS3. Currently, I have a form that requires simulating the action of "sending form data". Upon clicking the submit button, the form should be hidden and a default div (#result) needs to be displayed. Is there a way to achieve this using only CSS3 and HTML5 without involving JavaScript?

Thank you for your help!

Below is the snippet of my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS CHALLENGE</title>

    <!-- CSS Code -->
    <style>
        /* Place your CSS code here */
    </style>
</head>
<body class="global">
<div class="backgound">
    <form id="loginForm" action="#result" method="get">
        <h2>Contact Us!</h2>
        
        <input type="email" placeholder="Email" required>
        <input type="text" placeholder="Subject">
        <textarea placeholder="Message" rows="10" cols="40" required></textarea>
        <button type="submit">Send</button>
    </form>

    <div id="result" class="sended">Form submitted successfully!</div>
</div>
</body>
</html>

Answer №1

Utilizing the :target pseudo-class seems to be the right approach. It would be beneficial to rearrange the order of the result div and the form, and then combine it with a general sibling selector. You can view an example here.

(It appears that using the button to submit the form is not working smoothly due to iframing; however, give it a try on your end. Click the test link on jsfiddle to navigate to #result.)

Answer №2

Seems a tad questionable...

Would using PHP be a viable choice?

If so, you have the option to redirect the form to another page specified in the "action" attribute of the <form> tag, where you can process the input values using PHP and take action, such as displaying them or sending them via email.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The method of document.getElementsByName does not provide any results

I am a beginner in using python flask and understanding the MVC concept. My goal is to display the selected option in a dropdown list. Below is my list defined in a .py function. @app.route('/', methods=['GET']) def dropdown2(): ...

Transferring Chart Div Titles Above Bars

Is there a way to adjust the layout of an HTML bar chart so that the names or labels appear outside of the bars, tagged to the left end? <!DOCTYPE html> <style> .chart div { font: 10px Ubuntu; background-color: white; text-align: right; ...

Works well with Bootstrap but not compatible with other frameworks

Looking for assistance with a code within Bootstrap (HTML and CSS). I have been trying to create a dropdown menu (burger menu) following the Bootstrap Documentation, but I am unable to expand the burger menu (Dropdown). I have tested it on both Firefox an ...

Investigating the variety of HTTP 206 responses pertaining to video content

Currently, I am utilizing Amazon CloudFront to serve HTML5 videos. These videos are being requested through HTTP range requests and the expected responses are often in the form of HTTP 206 Partial Content. I have a requirement where I want to log the requ ...

Combining labels over multiple lines using lower division

I have a setup where I am using two DIVs, one positioned below the other. The top DIV contains a Multiline Label that dynamically generates data. However, when the data in the label exceeds a certain length, it does not create space and instead overlaps w ...

"Utilize Tailwind to effortlessly place a single item at the center

Looking for a way to align a row of items with one item centered in the div and the others positioned on either side while maintaining their original order? Check out this code snippet: <div className="flex mx-auto justify-center items-center" ...

Ways to alter the CSS class of individual labels depending on the content of textContent

In my HTML template, I'm using jinja tags to dynamically create labels from a JSON object. The loop responsible for generating this content is detailed below. <div class="card mb-0"> {% for turn in response %} <div class="card-he ...

I am looking for guidance on how to convert a FlexDashboard file into an HTML format. Can anyone provide instructions

I recently created a FlexDashboard for someone else and they've requested it in HTML format to incorporate it into their web system like WordPress. Since I don't have access to their WordPress system, I need to provide them with an HTML file inst ...

Incorporating Google fonts into email designs

I am struggling to get Google fonts to display properly in my newsletter emails. Here is the code snippet I have been using: $html=" <html> <style> @import url(http://fonts.googleapis.com/css?family=Lato|Simonetta); </style> <body& ...

Having trouble displaying SVG elements in Material UI

Currently, I am faced with an issue while trying to display a .svg file in the header of a drawer using Material-UI and create-react-app. Instead of the expected .svg image, all I see is a broken image rendering. Any assistance on resolving this problem ...

Showing a notification that is persistent and not dismissible

Hello everyone! I've been struggling with a problem on the RPS project for quite some time now. The issue arises when I try to display a message for a tie in the game, but I can't seem to find a solution to make it disappear when the round is not ...

Guide on how to use a tooltip for a switch component in Material-UI with React

I am attempting to incorporate a tooltip around an interactive MUI switch button that changes dynamically with user input. Here is the code snippet I have implemented so far: import * as React from 'react'; import { styled } from '@mui/mater ...

In PHP, special characters in HTML remain unchanged when entered into a text input field

I am currently using the PFBC (PHP form builder class (PFBC)) to generate a TextBox element on a page; However, when dealing with strings containing special characters, it does not properly convert them into normal characters: For example: $razao = "livi ...

Is there a way to set the focus on a text box automatically when a page is loaded, even without support for JavaScript?

On my form, I have a few text fields and I am looking to automatically set the cursor (auto focus) on the first text field when the page loads. I aim to accomplish this without relying on javascript. ...

Is there a way to customize the background color of the active list item class in Bootstrap 4?

Customizing Boostrap Code : <!-- Custom Sidebar --> <div class="bg-light border-right" id="sidebar-wrapper"> <div class="sidebar-heading"><strong><?= __('Admin Panel') ?></strong></div> <div class="li ...

Tab panels are shown by Bootstrap 5 tabs

I am using Bootstrap 5 to design a layout that changes based on the width of the screen. When the screen width is greater than or equal to 992 pixels, a table is displayed in the sidebar and some text is shown in the main content area. However, if the scre ...

Issue with submitting a form within a React modal - lack of triggering events

I am utilizing the npm package react-modal (https://www.npmjs.com/package/react-modal) in my project. The issue I am facing is that when I click on 'Submit', nothing happens. The function handleSubmit</a> is not being triggered, as no conso ...

Is there a way to obtain a comprehensive list of zip codes that are traversed by your route directions?

I have been searching through the Google Maps API (both Android and Web) but have not come across any references on how to retrieve a list of all the zip codes that are traversed by a given driving route. Could it be possible that I am missing something, ...

Ways to recognize when a button has been pressed

I developed my website using the CodeIgniter framework. Here is my personal website On the homepage, if I click on the "landscape" picture (top right) or the "landscape" button in the menu, it takes me to the "landscape" page. However, when I return to t ...

Implementing Material UI datetime-local feature with no minute selection

Is there a way to hide minutes in a TextField with type = datetime-local? <TextField label="From" type="datetime-local" InputLabelProps={{ shrink: true, }} /> This is how it appears on my end: screenshot ...