I created a login form in a div (I am preferring to use tables for this - please ignore the php in the values). The issue is that my 'submit' and 'Create a new account' table rows/data only center in relation to table data that is NOT an input field. I would like for the last two rows to center in relation to the entire username and password rows.
How can I get the last two rows to center? I've tried creating a new table with those specific rows and centering them, didn't make a difference. Any input would be appreciated.
Here is a link to the HTML/CSS and output: http://jsbin.com/sepipolohu/4/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<h2>Please login below.</h2>
<h3>Don't have an account? Create one here.</h3>
<div class="formFormat">
<form name="loginForm" method="post" action="<?php? $_SERVER['PHP_SELF'];>" >
<table id="cssTable">
<tr>
<td>Username:</td><td><input type="text" id="user" name="user" value="<?php echo $user_name?>" /></td>
</tr>
<tr>
<td>Password:</td><td><input type="text" id="pass" name="pass" value="<?php echo $user_password?>"/></td>
</tr>
<tr>
<td><input type="submit" name="submitLogin"/></td>
</tr>
<tr>
<td id="createAccount">Create an account.</td>
</tr>
</table>
</form>
</div>
</body>
</html>
CSS:
body {
width: 100%;
height: 100%;
text-align:center;
font-family: helvetica;
font-color: white;
background-image: url(https://download.unsplash.com/phto-1429091967365-492aaa5accfe);
}
.formFormat{
padding: 10px;
height: 150px;
width:240px;
border: 1px black solid;
display:inline-block;
position: relative;
}
#createAccount {
font-style: italic;
}
Remove this
<tr>
<td><input type="submit" name="submitLogin"/></td>
</tr>
<tr>
<td id="createAccount">Create an account.</td>
</tr>
and put the code below after </table> and before </form>
<input type="submit" name="submitLogin"/>
<span id="createAccount">Create an account.</span>
put <br/> between <input type="submit" name="submitLogin"/> and
<span id="createAccount">Create an account.</span> if you want the text 'Create an account' under the button.
Look here
Change the width to auto in .formFormat
width:auto;
If you want the button and the "Create an account" text to center just wrap them in center tags. <center> </center>
Related
I am trying to create a simple login page, but I keep stumbling upon a problem. An input I put in a form (which is in turn in a table) goes to the top left corner of the page. Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<table class="center">
<tr>
<td>
<p style="size: 16px; font-family: Comic Sans MS">LOGIN</p>
</td>
</tr>
<tr>
<td>
<form>
<input type="email" name="mail"><br>
<input type="password" name="password"><br>
<input type="reset"></td>
</form>
<input type="submit" name="submit">
<td>
</tr>
</table>
</body>
</html>
I also have a couple lines of css "code"
table.center {
margin-top: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
I don't quite get why the poor "submit" input won't stay in place.
Thanks in advance for your help.
Your nesting of the td around the form is wrong. the /td needs to come after the submit so that all of the form plus the submit are in the cell.
Here's the changed code:
<style>
table.center {
margin-top: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<table class="center">
<tr>
<td>
<p style="size: 16px; font-family: Comic Sans MS">LOGIN</p>
</td>
</tr>
<tr>
<td>
<form>
<input type="email" name="mail"><br>
<input type="password" name="password"><br>
<input type="reset">
</form>
<input type="submit" name="submit">
</td>
<td>
</tr>
</table>
</body>
</html>
Try putting the submit element inside form?
Otherwise you can just make a button. I might be wrong here tho but worth a try.
<form>
<input type="email" name="mail"><br>
<input type="password" name="password"><br>
<input type="reset"></td>
<input type="submit" name="submit">
</form>
I have a text box within a table that is populated by a form on my website. This text box can also be edited/deleted and I'm having issues displaying the full text onto the text box from the form the user fills out. The issue is that the text box does not expand to fit text that the user inputs. It will display the message all the way to the end of the text box and anything after that will not be displayed as the text box does not expand.
My code:
<table>
<tr>
<th>Title</th>
<th>Description</th>
<th></th>
<th></th>
<th></th>
</tr>
<form action=findGroup.php method=post>
<tr>
<td><input type=text name=name value="John Doe" /> </td>
<td><input type=text name=description value="Column width does not automatically adjust itself to fit content" /></td>
<td><input type=hidden name=hidden value="" /></td>
<td><input type=submit name=update value="update" /></td>
<td><input type=submit name=delete value="delete" /> </td>
</tr>
</form>
</table>
CSS:
table {
width: 100%;
font: 17px/1.5 Arial, Helvetica, sans-serif;
text-align: centre;
}
input {
width: 100%;
font: 17px/1.5 Arial, Helvetica, sans-serif;
text-align: centre;
}
th {
text-align: centre;
background-color: #4D5960;
color: white;
}
tr {
background-color: #f2f2f2
}
Input field has it's limitation. So you can use contenteditable div to mimic an input field and copy the content from this div to the hidden input:
<?php
if (!EMPTY($_POST)) {
var_dump($_POST);
}
?>
<!DOCTYPE html>
<html>
<style>
table {
width: 100%;
font: 17px/1.5 Arial, Helvetica, sans-serif;
text-align: centre;
}
input {
width: 100%;
font: 17px/1.5 Arial, Helvetica, sans-serif;
text-align: centre;
}
.input {
margin: 8px 0;
background-color: #fff;
border: 1px solid grey;
}
th {
text-align: centre;
background-color: #4D5960;
color: white;
}
tr {
background-color: #f2f2f2
}
td {
vertical-align: top;
}
</style>
<body>
<table>
<tr>
<th>Title</th>
<th>Description</th>
<th></th>
<th></th>
</tr>
<form action="" method="POST">
<tr>
<td>
<!-- hide your input field with type hidden -->
<input type="hidden" name="name" value="Fetch you php value here" />
<!-- create div contenteditable with id same as the input name -->
<div class="input" contenteditable id="name">Fetch you php value here again
</div>
</td>
<td>
<!-- same as example above -->
<input type="hidden" name="description" value="Column width does not automatically adjust itself to fit content"/>
<div class="input" contenteditable id="description">Column width does not automatically adjust itself to fit content
</div>
<input type="hidden" name="hidden" value="some value" />
</td>
<td><input type="submit" name="update" value="update" /></td>
<td><input type="submit" name="delete" value="delete" /> </td>
</tr>
</form>
</table>
</body>
</html>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$('form').on('submit', function(e){
// stop the form from being submitted
e.preventDefault(e);
var form = $(this);
// find div with class name input and get their ids and text content
$('.input').each(function(){
// get the id from div
var name = $(this).attr('id');
// remove linebreak and trim excessive spaces
var value = $(this).text().replace('/\n/g', " ").replace('/\s+/g', " ");
// insert value to respective input name
$('input[name="' + name + '"]').val(value);
});
// submit the form
$(form)[0].submit();
});
</script>
Note: The above is just a sample and will post data to the same php file which you will have to change that to: action="findGroup.php" after testing.
DEMO: https://jsfiddle.net/michaelyuen/owv0eb7u/
I am trying to float the submit button to the right in the form but I am facing problem the float is not being applied on the submit button Login. I have added some of server-side generated code.
Code
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" onSubmit='return false'>
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<td><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
Try this one. I set a colspan of 2 to the input button and gave its parent td a width of 100%, this along with the float right should shift it to the right.
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
/* Make the input's parent td 100%, you may want
a class here instead for browser support */
td:last-child {
width: 100%;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" >
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<!-- setting a colspan of two -->
<td colspan="2"><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
I have the child tags of a tag and made the background-color of the parent tag to blue. It change the background-color of the block, but I want it color to the entire width of the web page. Even the background-image of such a tag is not even displayed. Here is my code:
<html>
<head>
<title>Login</title>
<style>
#login
{
background-color:blue;
color:white;
overflow:hidden;
}
#registration
{
background-color:white;
overflow:hidden;
}
.logintable
{
color:white;
}
</style>
</head>
<body bgcolor="white">
<div>
<div id="login">
<div style="display: inline-block; white-space: nowrap;float:left">
<font face="Monotype Corsiva" color="white" size="5">Facebook</font>
</div>
<div style="display: inline-block; white-space: nowrap;float:right">
<table class="logintable" align="right">
<tr>
<td>email:</td>
<td><input type="text" name="email" id="email"></td>
<td>password:</td>
<td><input type="password" name="pswd" id="pswd"></td>
<td><input type="submit" value="Login" onClick="return validate()"></td>
</tr>
</table>
</div>
</div>
<div id="registration" style="background-image:registration.jpg">
<div id="empty" style="float:left">
<img src="registration.jpg" height="610">
</div>
<div id="registraionform" style="float:right">
<table align="right" height="630" cellspacing="10" cellpadding="3">
<tr>
<td><B><font size="6">Sign Up</font></B></h1>
<br><br><font size="3">Its free and always will be.</font>
</td>
</tr>
<tr>
<td>Firstname <input type="text" name="First"></td>
<td>Lastname <input type="text"name="Last"></td>
</tr>
<tr><td>Gender</td><td><input type="radio"name="gender">male
<input type="radio"name="gender">female</td>
</tr>
<tr><td>phone</td><td><input type="text"name="phone"></td></tr>
<tr><td>email</td><td><input type="text"name="user"</td></tr>
<tr><td>password</td><td><input type="text"name="pass"></td></tr>
<tr><td>Re-typepassword</td><td><input type="password"name="rpass"></td></tr>
<tr><td><input type="checkbox" name="check" id="check">I agree to the terms and conditions</td><td></td></tr>
<tr><td></td><td><input type="submit"value="Sign Up"></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
Even the background-image is not loaded, I have used tag to display that pic beside sign up.
And this is the pic of the resultant page:
Setting body {margin: 0;} in the style section fixes the extra white space around the page.
I have a simple contact form within a div but I can't get it to center within the div. I have tried margins, padding, text-align:center but none of them work.
html: http://www.joekellywebdesign.com/churchsample/contact.html
<div id="contactbottomright">
<h2>Contact Form</h2>
<form action="feedback.php" method="post">
<table border="0" cellpadding="8" cellspacing="8">
<tr>
<td>
<label for="tswname">Name</label>:</td>
<td>
<input type="text" name="fullname" id="tswname" size="25" />
</td>
</tr>
<tr>
<td>
<label for="tswemail">Email address</label>:</td>
<td>
<input type="text" id="tswemail" name="email" size="25" />
</td>
</tr>
<tr>
<td colspan="2">
<label for="tswcomments">Comments</label>
<br />
<textarea rows="15" cols="35" name="comments" id="tswcomments"></textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="Submit" />
<br />
</td>
</tr>
</table>
</form>
</div>
css: http://www.joekellywebdesign.com/churchsample/css/styles.css
/* rules for contact page */
#contactbottomleft {z-index:26; width:450px;height: 700px; background-color:#92B681; margin: 30px 0 0 0; float:left;position: relative;}
#contactbottomright { z-index:27; width:450px; height: 700px; margin: 30px 0 0 0px; background-color:#428C3E; float:right;position: relative;}
form {
display: inline-block;
text-align: center;
}
/* end rules for contact page */
You could set a width to the form and then add margin: 0 auto; to the CSS. For example:
HTML:
<div>
<form></form>
</div>
CSS:
form {
margin: 0 auto;
width: 300px;
}
NOTE: For this to work, you must remove display:inline-block from form.
JS Fiddle Example (using your HTML/CSS).
You must set a Width of Ancestor element and then add margin:0 auto to its child.
See demo