What steps can I take to modify my code to match the structure shown in the image?
At present, my code appears as follows:
<form id="form" action="/action_page.php">
Login ID:<br>
<input type="text" name="id" id="id">
<br>
Password:<br>
<input type="password" name="password" id="password">
<br><br>
<a href="#" class="btn btn-info" role="button">Register</a>
<input type="submit" value="Submit">
</form>
Implement CSS to achieve this
<style>
.login_box
{
width: 200px;
height: 200px;
margin: auto;
background: gray;
text-align: center;
}
.login_box a{
text-decoration: none; font: menu;
display: inline-block; padding: 2px 8px;
background: ButtonFace; color: ButtonText;
border-style: solid; border-width: 2px;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
</style>
<div class="login_box">
<form id="form" action="/action_page.php">
Login ID:<br>
<input type="text" name="id" id="id">
<br>
Password:<br>
<input type="password" name="password" id="password">
<br><br>
<a href="#" class="btn btn-info" role="button">Register</a>
<input type="submit" value="Submit">
</form>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>My Document</title>
<style>
#form{
margin-top: 200px
}
.button,.btn-info{
font-size: 20px;
border: solid 1px black;
background: none;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
margin: 15px;
padding: 12px;
width: 120px
}
.btn-info{
text-decoration: none;
color: #000;
}
.button:hover,.btn-info:hover{
background-color: gray;
color: #fff
}
.label1,.label2{
font-weight: 500;
font-size: 25px
}
.password,.id{
width: 150px;
height: 20px;
}
</style>
</head>
<body>
<center>
<form id="form" action="/submit.php">
<table>
<tr>
<td><label for="id" class="label1">Username :</label></td>
<td> <input type="text" name="id" id="id" class="id"></td>
</tr>
<tr>
<td><label for="password" class="label2"> Password :</label></td>
<td> <input type="password" name="password" id="password" class="password"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<a href="#" class="btn-info" role="button" >Sign Up</a>
<input type="submit" value="Login" class="button">
</form>
</center>
</body>
</html>
Is it possible to utilize a variable width in my Angular 5 component template? I would like to achieve something similar to this: <style> input:checked + .slider:before { transform: translateX({{width}}px); } </style> The &apo ...
I recently followed a tutorial from W3Schools Now, I am looking to enhance it by adding previous / next buttons for the indicators, rather than for the slider itself Here is what I aim to accomplish: https://i.sstatic.net/qH1PQ.png Below is the code sn ...
Within my React.js component, I have implemented a table using react-table along with some material-ui components displayed alongside the table: import React from 'react' import { useTable, useGlobalFilter, usePagination } from 'react-table& ...
Currently, I am in the process of creating an animated effect for a website that involves moving two elements' positions over time and resetting them to their original position. Only one element is displayed at a time, and the animation should run smo ...
I am currently working on calculating the sum of three scores and displaying the total as "Total:". However, I am facing an issue in dynamically updating the total whenever a score value changes. Is there a way to utilize the "onchange" event to achieve th ...
Here is what the layout looks like: https://i.sstatic.net/Cz0CT.png Here is what I would like to have: https://i.sstatic.net/WbkY2.png Or if the getNumber function returns more, for example: https://i.sstatic.net/ViBXh.png (so essentially the circles ...
Utilizing the jQuery code below for an accordion effect on all my WordPress posts on the front end. (function($) { function initAccordion() { var $ele = $('.entry-content').hide(); $(".entry-header").unbind('click&apos ...
Currently, I am implementing a JavaScript feature that allows my logo to shrink when the user scrolls down and grow when they scroll up. To achieve this effect, I am utilizing the jQuery functions addClass and removeClass. However, I have encountered som ...
Currently, I am working on a project using Vue.js and adding Vuetify. However, I need to use a component. .horizontal{ border-color: #F4F4F4 !important; border-width: 2px ; } <v-divider horizontal class=" horizontal ...
Currently facing an issue with a webpage under development. To provide some context, here is the basic layout of the problematic section: The page features a form where users can select from four checkboxes and a dropdown menu. Once at least one checkbox ...
I am currently in the process of developing a webpage with dual columns. The two columns are segregated into div containers, one labeled right and the other labeled left. These columns reside within a parent div called row, which is nested within a main di ...
While working on applying inline CSS styling to HTML for email, I have encountered an issue where the styling partially works when sending a test email. Can anyone provide guidance on how to resolve this problem? Steps to reproduce: Step 1 - apply CSS st ...
I am managing a Wordpress multisite setup with the following websites: The main portal: which connects to The issue arises on all pages of gprgebouw.nl and gpradvies.nl but not on the other domains. Attached is a screenshot of the homepage of gprgebouw. ...
I have successfully implemented a JavaScript background and now I want to apply this background across all my PHP files. The issue is that the HTML code either overlaps with the JS content or appears behind it. How can I resolve this? Below is the JS fil ...
Not entirely certain if this issue is related to jQuery, but there's a strong suspicion that it might be. The problem at hand can best be described by the picture provided: The query output exceeds the width and doesn't resize or scale according ...
Can someone help me with a CSS issue I'm experiencing? Here is my code: <div class='test'> <div>test 1</div> <div>test 2</div> </div> <div class='test'> <div>test 3&l ...
I stumbled upon this fascinating animation and I'm looking to incorporate it into my project. However, I'm facing a challenge in centering text inside the circle without resorting to using position absolute. My goal is to have the text with the ...
Is there a way to bind a function that takes a String as a parameter to a button so that it is called onclick and takes the innerHTML of the element as a parameter, without assigning the button an id or using queryselector? <button onclick="myFunct ...
For some reason, internal CSS is working fine, but external CSS just won't cooperate. I even tried using the code !important, but it's like it doesn't understand. I'm trying to incorporate a gallery into my website, but I've hit a ...
I am attempting to display a different title for each page In the header.php file, I am checking the file name to set the correct title like this <?php $page = basename($_SERVER['PHP_SELF']); if ($page == 'index.php'): ?> <ti ...