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.
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 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>
The form is displayed on the browser, but when I roll my cursor over the text fields, it just doesn't take the input. How is this caused and how can I solve it?
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--> <div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div><!-->
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
</html>
You are overlaying your form with a div, that blocks the input. Remove it:
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
Your html comments are invalid
should be
<!-- <html not displayed> -->
Not
<!--> <html not displayed> <!-->
Result is the html that it appears you are trying to comment out is masking the form
Your div tag with 100% height and 100% width has covered the entire view port like a modal form, hence the area beneath it has become non-clickable. Remove the height and width from tag like below:
<div style='position:absolute;z-index:0;left:0;top:0;'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div>
Your font size is probably set to zero.
Add this to your css style file:
input {
font-size: 10pt;
}
Or add the style directly on the HTML tag:
<input style="font-size: 10pt;" type="submit" value="Send Info">
I've got a button, two textboxes and some text. How to put all this elements into the center of page?
<body>
Hello world!
<p><input TYPE="text" name="textbox1"><p>
<p><input TYPE="text" name="textbox2"></p>
<p><input TYPE="button" VALUE="Enter" ONCLICK="HomeButton()"></p>
<script>
function HomeButton()
{
location.href="registration.html";
}
</script>
</body>
I would do something like this, or you can use external CSS Sheets :)
<!--In your <head> add this-->
<style type="text/css">
body{margin:0;padding:0}
#body{width:800px; margin:auto}
</style>
<!--And here is your body-->
<body>
<div id="body">
CONTENT HERE!
</div>
</body>
This will make a set width of 800px and then it will align it in the center of the page
try this:
<body>
<div style="margin:0 auto;text-align:center;">
Hello world!
<p><input TYPE="text" name="textbox1"><p>
<p><input TYPE="text" name="textbox2"></p>
<p><input TYPE="button" VALUE="Enter" ONCLICK="HomeButton()"></p>
<script>
function HomeButton()
{
location.href="registration.html";
}
</script>
</div>
</body>
Take a look at this. Her they explain a solution to your problem: http://www.dynamicsitesolutions.com/css/center-page-content-horizontally-and-vertically/
Put:
body {
text-align: center;
}
in your CSS. JSFiddle: http://jsfiddle.net/QXkCn/1/
you can put these controls into div or using <center> tag or <body align="center">
Use table or divs
try the below code
<body >
<table width="100%" border="0">
<tr>
<td height="200"> </td>
<td> </td>
</tr>
<tr>
<td width="400px"> </td>
<td> Hello world!
<p><input TYPE="text" name="textbox1"><p>
<p><input TYPE="text" name="textbox2"></p>
<p><input TYPE="button" VALUE="Enter" ONCLICK="HomeButton()"></p> </td>
</tr>
</table>
</body>
for this simply use <body align="center">
here how it look Fiddle
Although its not a good practice but this will work,
I have a webpage that is using Google's custom search engine. I wanted to make it prettier so I created a wrapper around area that essentially puts the search area is a rounded rectangle. To accomplish this, I am using the following code:
<table style="height:33px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image:url(/leftEdge.png); height:33px; width:5px;"> </td>
<td style="background-image:url(/bg.png); height:33px; background-repeat:repeat-x;">
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="32" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript"
src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
</td>
<td style="background-image:url(/rightEdge.png); height:33px; width:5px;"> </td>
</tr>
</table>
This code looks good in Chrome. However, in Internet Explorer, the rightEdge image appears on the next line. It appears that IE is adding a line break. However, I'm not sure how to get rid of it. Thus far, I have tried:
Changing my DocType to: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Adding the following CSS: form { margin: 0; padding: 0; }
I'm not sure what else to do. Can somebody help me remedy this problem?
Thank you!
I am not a fan fo tables so I remade it using CSS and DIV's:
<div style="height:33px; width:290px">
<div style="background-image:url(/leftEdge.png); height:33px; width:5px; float:left;margin:0; padding:0;"></div>
<div style="background-image:url(/rightEdge.png); height:33px; width:5px; float:right;margin:0; padding:0;"></div>
<div style="background-image:url(/bg.png); height:33px; background-repeat:repeat-x;margin:0; padding:0;">
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse" style="margin:0; padding:0;">
<input type="hidden" name="cref" value="" style="margin:0; padding:0;" />
<input type="hidden" name="ie" value="utf-8" style="margin:0; padding:0;" />
<input type="hidden" name="hl" value="" style="margin:0; padding:0;" />
<input name="q" type="text" size="32" style="margin:0; padding:0;" />
<input type="submit" name="sa" value="Search" style="margin:0; padding:0;" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
</div>
</div>
It's a bit dirty but I hope it will help.