Having trouble with altering the placeholder text of the submit button?

    .RegisterForm {
            height: 35em;
            width: 25em;
        }
        
        .LoginForm {
            height: 20em;
            width: 25em;
        }
        
        .RegisterForm,
        .LoginForm {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 12.5%;
            background-color: rgba(0, 0, 0, 0.8);
        }
        
        .RegisterForm h2,
        .LoginForm h2 {
            color: white;
            margin: 1em 1em 1em 5.5em;
        }
        
        .RegisterForm .Inputbox,
        .LoginForm .Inputbox {
            position: relative;
            margin: 1em;
            color: white;
            background: transparent;
        }
        
        .RegisterForm .Inputbox input,
        .LoginForm .Inputbox input {
            position: relative;
            width: 100%;
            margin-bottom: 1em;
            padding: 1em 0;
            font-size: 1em;
            color: #ffffff;
            border: none;
            outline: none;
            border-bottom: 1px solid white;
            background: transparent;
            transition: 1s;
        }
        
        .RegisterForm .Inputbox label,
        .LoginForm .Inputbox label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 1em 0;
            font-size: 1em;
            color: #ffffff;
            transition: 0.5s;
            pointer-events: none;
        }
        
        .RegisterForm .Inputbox input:focus~label,
        .RegisterForm .Inputbox input:valid~label,
        .LoginForm .Inputbox input:focus~label,
        .LoginForm .Inputbox input:valid~label {
            top: -1em;
            left: 0;
            color: #03a9f4;
            font-size: 0.8em;
        }

        .RegisterForm input[Type="submit"],
        .LoginForm input[Type="submit"] {
            margin: 1em 1em 1em 1.5em;
            padding: 0.5em 1.2em;
            background: transparent;
            border: none;
            outline: none;
            color: #ffffff;
            background: #03a9f4;
            cursor: pointer;
            border-radius: 5px;
        }
<form action="../php/Inloggen.php" method="post" class="LoginForm">
            <!-- Titel -->
            <h2>Inloggen</h2>

            <!-- User Data -->
            <div class="Inputbox">
                <input type="email" name="Email" required>
                <label for=" Email ">Email</label>
            </div>

            <div class="Inputbox">
                <input type="password" name="Password" required>
                <label for="Password ">Wachtwoord</label>
            </div>

            <!-- Send form -->
            <input type="submit" name="Submit" palceholder="Inloggen">
        </form>

I have a submit button:

<input type="submit" name="Submit" palceholder="Inloggen">
the placeholder says "inloggen". so it should show inloggen at the button, right?

it doesnt. it shows "verzenden" which I have at a different html page. when i use inspect element the button placeholder shows "inloggen" https://i.sstatic.net/Isj3o.jpg

I thought it was a a caching issue, so I restarted the browser but it didnt help.

Answer №1

Does the placeholder saying "login" mean that "login" should be displayed on the button?

No, it does not.

Placeholders are simply meant to provide an example or hint for what can be typed into an input field. Since a submit button cannot have text typed into it, it does not make sense for the placeholder to appear on the button.

The text displayed on a <input type="submit"> is determined by the value attribute.

If you want the button to display different text from the submitted value, consider using a <button> element:

<button name="field_name" value="submitted_value">Display Text</button>

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 CSS overlay effect refuses to shut down

Greetings everyone, I'm new around here so please bear with me. I am encountering an issue wherein the overlay only works in one direction - it appears when the button is clicked, but nothing happens when attempting to close it. I have tried adjustin ...

I'm encountering difficulties with customizing the root styling of material-ui's DialogActions

Check out the two buttons in a DialogActions just like this. This is the JSX snippet I'm working with: <DialogActions classes={{ root: classes.dialogActionsLeft }}> <Button autoFocus onClick={() => { setOpen(false); }} ...

Show error messages from HTML 5 Validation using a software program

Is it possible to manually trigger the HTML 5 validation message using code? As far as I can tell, there isn't a straightforward way to do so directly. However, it seems we can prompt this message by simulating a click on the submit button. I attempt ...

Issue with jQuery Quicksand's CSS rendering in Internet Explorer and Firefox browsers, but not affecting Chrome

I'm attempting to achieve an icon-swapping effect using jQuery+quicksand. Although it works seamlessly in Chrome, I am encountering issues with IE and Firefox. Given that the more intricate quicksand demos function flawlessly across all browsers, I su ...

Rows within distance

There seems to be too much space between the grid rows. I tried adding more photos or adjusting the height of the .image class to 100%, but then the image gets stretched out. The gap between items with classes .description and #gallery is too wide. When ...

What is the best approach to choose the thead element from a dynamically created table?

My table in JavaScript/JQUERY is dynamically constructed. Once the table is created, I am attempting to target the thead element. Here is a snippet of my code: $(document).ready(function(){ buildTbl(); }); function buildTbl() { var tbl = '< ...

The cascade of CSS elements arrangement

I have two unique boxes set up like this: <div id="box1"></div> <div id="box2"></div> The second box, box2, has a border and I'm looking to cover the top border with box1. To achieve this, I've applied a negative margin- ...

Ways to insert a color into an HTML text box based on a condition

Hey everyone, I need some help with changing the color of a textbox in cshtml. Here is the code snippet I am working with: $("#BUTTON").click(function (event) { var urlPA = URL; var crty = $("#Courtesy").val(); var fname = $("#Familyname").val ...

Java Library for Converting HTML to Textile Format

I have a requirement to convert a String from HTML format to Textile format. After researching various libraries such as Textile4J, Textile-J, JTextile, and PLextile, I found that none of them offer the specific functionality I need. Although they do prov ...

Creating an endless ticker animation in AngularJS that dynamically adjusts to element dimensions

This is my initial foray into AngularJS, where I am creating a ticker display comprised of boxes. Check out the CodePen here The Code: index.jade: doctype html html(ng-app="ticker") head script(src="../bower_components/angular/angular.js" ...

The clearfix method seems to be ineffective when dealing with elements positioned absolutely

I have a div with position absolute and float left and right. I am trying to add an image below this div. The issue I am facing is that the image is overlapping with the first div. I want the image to be displayed below the first div without any overlap. ...

Fixed Collapse of Vertical Navbar in Bootstrap 4

Currently delving into the world of bootstrap and facing a challenge. I am attempting to craft a vertical navbar on the left side of the page once the user has scrolled past the full-page 'intro' element using bootstrap 4. The code snippet provi ...

Ways to horizontally line up text boxes

I need help aligning two textboxes next to their display names in a single line. I'm currently using dl, dt, and dd, but I'm having trouble getting them to align horizontally. Any suggestions on how to achieve this alignment would be greatly appr ...

Responsive Bootstrap dropdown menu adjusts its size when clicked

I'm currently in the process of creating a basic navbar that includes a drop-down menu on the far right side, as depicted here: https://i.sstatic.net/hs9us.png The issue I'm facing is that when I click on the dropdown, the navbar automatically ...

What is the best way to assign a value to an option element for ordering purposes?

My select element is being populated with fruits from a database, using the following code: <select name="fruitsOption" id="fruitsOptionId" ngModel #fruitRef="ngModel"> <option *ngFor="let fruit of fruits">{{fruit}}</option> </selec ...

The table dynamically adjusts based on the JSON data

My goal is to design a table that displays a JSON-object with multiple levels. The challenge is to showcase all the data in one row, even when it shows as [object object] like the Id in the plnkr example. ResultData=[ { "First_name": "xx", ...

Ways to adjust dimensions depending on zoom level or screen size

Here is the HTML code snippet: <div id="divMainFirst"> <div id="divInnerFirst"> <div id="divTitleHeaderUC"> <span id="spanTitleHeaderUC">Urgent Care Wait Time</span> </d ...

Aligning the up and down vote buttons in Bootstrap for small screens

I'm currently working on implementing a voting system similar to that of Stack Overflow. However, I'm facing an issue with displaying the arrows on smaller screens. I want the arrows to be positioned next to the text, just like on StackOverflow. ...

Creating a dropdown link that features an H3 element with Bootstrap 4

Can someone help me with an issue I'm having regarding dropdowns in a navbar? When using a normal nav-link (without a dropdown), I placed the menu text inside an H3 tag, but when I tried to do the same for the dropdown link, the arrow appeared below t ...

Filtering data in a table or graph based on the most recent 3 months dynamically

Currently, I am manually filtering the last 3 months using labels: ["JAN", "FEB", "MAR"], I want to dynamically filter the last 3 months every month. How can I achieve this? Here is my TypeScript code HTML <div> <canvas id="myChart" ...