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>
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 am trying to put my CSS code in the same file as my HTML code, but it does not display properly (I do not want to just link my CSS to my HTML, I already got that to work). I have tried copying and pasting the code, but that does not work. Do I have to do it differently when it is in the same file?
Here is the relevant code:
<head>
<title> Example </title>
<style type="text/css">
input: textarea{
resize: none;
}
input[type=button]{//set the sizes for all of the input buttons
width: 5em;
height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<form id = "mainForm" name="mainForm" method="get" action="" onsubmit=" return checkForm()">
Type something: <br> <textarea id="info" name="info" > </textarea>
<input type="button" value="1" id="button1"> </input>
<input type="button" value="2" id="button2"> </input>
<input type="button" value="3" id="button3"> </input>
<input type="submit" id="submit" name="submit" class="btn" value="Submit" />
<input type="reset" id="reset" name="reset" class="btn" value="Clear" />
</form>
</body>
Here is a pic of how it looks when I link it
And here is a pic of how it looks when I try putting the CSS in the HTLM file
no need to specify input just textarea . you can even use inline css for textarea.
<style type="text/css">
textarea{
resize: none;
}
input[type=button]{
width: 5em; height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
Works for me. Only problem I see is input: textarea is invalid. Just use textarea instead.
<head>
<title> Example </title>
<style type="text/css">
textarea{
resize: none;
}
input[type=button]{ //set the sizes for all of the input buttons
width: 5em;
height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<form id="mainForm" name="mainForm" method="get" action="" onsubmit="return checkForm()">
Type something: <br> <textarea id="info" name="info" > </textarea>
<input type="button" value="1" id="button1">
<input type="button" value="2" id="button2">
<input type="button" value="3" id="button3">
<input type="submit" id="submit" name="submit" class="btn" value="Submit">
<input type="reset" id="reset" name="reset" class="btn" value="Clear">
</form>
</body>
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 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">