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>
Related
I have a simple problem. I have created an html file and when i try to embed the html file in my outlook to send it to my client. The elements are not visible. Why? What am i missing. Please guide. Below is my html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css"> body{background-color: #FFFFFF;font-family: arial;margin: 0;} </style>
<title>TEst</title>
</head>
<body>
<table height="100px;" width="72px;" border="1" align="center" cellpadding="0" cellspacing="0" style="font-family:Verdana, Geneva, sans-serif;">
<tr>
<section id="form">
<form id="gform" method="post" action="someAction">
<div id="left-col-forms" style="float: left; width: 330px; font-family: 'Open Sans', sans-serif;font-size:12px;">
<fieldset style="width:700px;">
<label for="name"><b>Name:</b> </label>
<input id="name" name="name" placeholder="Please Enter Your Name" style="width:400px;" />
</fieldset>
<fieldset style="width:700px;">
<label for="Phone"><b>Phone:</b> </label>
<input id="phone" name="phone" placeholder="" />
</fieldset>
<button style="float: left;">Submit</button>
</div>
</form>
</section>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Forms in emails are considered a security risk, they typically don't work and depending what email client you are using it may not show at all.
Campaign monitor has a good table you can refer to here:
https://www.campaignmonitor.com/dev-resources/will-it-work/forms/
A better solution would be to put the form in a webpage and send them a link to the webpage itself.
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>
I have a HTML Code like this:
<tr>
<td>
<span>Card No: </span>
<input id="Text1" type="text" />
<input id="BtnSave" type="button" value="Save" onclick="return BtnSave_onclick()" />
</td>
</tr>
This all am keeping one Row of my table. I want to give space in between all my fields..
Am new in html and web applications.
You can use margins:
CSS:
span, input {
margin: 5px;
}
EDIT
Inline:
<tr>
<td>
<span style="margin:5px">Card No: </span>
<input id="Text1" type="text" style="margin:5px" />
<input id="BtnSave" type="button" style="margin:5px" value="Save" onclick="return BtnSave_onclick()" />
</td>
</tr>
Or, create a style.css file with these lines of code:
span, input {
margin: 5px;
}
and include it in your project in your head section like this:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Add margin.
input {
margin: 0 5px 0 5px; /* top right bottom left */
}
Hope this will help,
<html>
<head>
<style type="text/css" rel="stylesheet">
span, input {
margin: 5px;
}
</style>
</head>
<body>
<tr>
<td>
<span>Card No: </span>
<input id="Text1" type="text" />
<input id="BtnSave" type="button" value="Save" onclick="return BtnSave_onclick()" />
</td>
</tr>
</body>
</html>
I want to adjust checkboxes in the middle of screen.
My html code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
<form method="get" style="text-align: center">
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</body>
</html>
The checkboxes are on different positions because of different text length.
What's the best way to adjust them to a vertical line roughly to the position of the checkbox of the longest text ("check3")?
I'm sorry for this probably simple question.
You can change it to this which I believe will get you what you want:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
<form method="get" style="text-align: center;">
<div style="display: inline-block; text-align: left;">
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________
</div>
<br>
<input name="Submit1" type="submit" value="submit">
</form>
</body>
</html>
This way you don't need to know the width of your text beforehand.
Use div tag and then u can use margin attribute and remove
style="text-align: center"
form form tag
#checkbox {
float:left
margin-left:70px;
}
<div id="checkbox">
<form method="get" >
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</div>
http://jsfiddle.net/48fwg/
You can go with something as simple as setting a width to your form and then setting margin: 0 auto like so:
HTML
<form method="get">
<input name="check1" type="checkbox" />short text<br>
<input name="check2" type="checkbox" />medium-length text__________<br>
<input name="check3" type="checkbox" />long text________________________________<br>
<input name="Submit1" type="submit" value="submit" />
</form>
CSS
form { display: block; margin: 0 auto; width: 400px; }
jsFiddle
!OR!
If you don't want to set the width, you can set the display of the form to table and get the same result, but with an auto width:
HTML -> the same
CSS
form { display: table; margin: 0 auto; }
jsFiddle
!OR!
If you want it fully centered, horizontal and vertical, you can use a variation of the following:
HTML
<table>
<tbody>
<tr>
<td>
<form method="get">
<input name="check1" type="checkbox" />short text<br />
<input name="check2" type="checkbox" />medium-length text__________<br />
<input name="check3" type="checkbox" />long text________________________________<br />
<input name="Submit1" type="submit" value="submit" />
</form>
</td>
</tr>
</tbody>
</table>
CSS
html, body { margin: 0; height: 100%; width: 100%; }
table { height: 100%; margin: 0 auto; }
td { vertical-align: middle; }
jsFiddle
So I created a website for my uni assignment which had a really good navigation system using two columns, left had navigation buttons by using form and input which resulted in my site looking just as I wanted, like this
http://gyazo.com/38ed9ea8133e44c57209c6992d2a4554
I am trying to recreate a similar site for personal reasons so I can learn more about the functions of CSS and HTML together, but for some reason, even though all the code is the same, the buttons do not appear, and I can't for the life of me see why they won't display on the new site. Below is my CSS file and the HTML underneath.
If you can see why then please let me know!
Here is my CSS
h1 {
color:#FFFFFF;
text-align:center;
}
body {
margin-top:75px;
margin-bottom:75px;
margin-left:30px;
margin-right:30px;
background-color:#A9BCF5;
}
.bt {
width:1050px;
}
.bt tr {
margin:0;
padding:4px;
align:center;
list-style-type:none;
}
.bt td {
align:left;
}
And here is the html
<!DOCTYPE html>
<head>
<title>
Test4CSS
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<h1>Test Heading Text for the site</h1>
</head>
<body>
<table class="bt">
<tbody>
<tr>
<td>
<form action="index.html>
<input type="submit" value="Home Page">
</form>
<form action="page1.html>
<input type="submit" value="The First Page">
</form>
<form action="page2.html>
<input type="submit" value="The Second Page">
</form>
<form action="page3.html>
<input type="submit" value="The Third Page">
</form>
<form action="page4.html>
<input type="submit" value="The Fourth Page">
</form>
<form action="page5.html>
<input type="submit" value="The Fifth Page">
</form>
</td>
<td>
<p>
This is the example text for the page, to understand<br>
a little bit about the formatting that I have put in place.
</p>
</td>
</tr>
</table>
</body>
</html>
This was easy - see http://codepen.io/anon/pen/iwhnJ
you had some mistakes in your quotation.
<form action="index.html">
<input type="submit" value="Home Page">
</form>
In the line above the closing " were missing: <form action="index.html> This is the case for all your form element instead of <form action="page3.html> you have to write <form action="page3.html">