I have a login page. It doesn't have much text, and it is quite readable in big screens, such as a laptop or a tablet. However, in a mobile one has to zoom it until he sees what is written there. I want to make it scalable, but it looks like I don't know how to do it. Here is the HTML.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style>
.big {
width:100%;
text-align:center;
}
</style>
</head>
<body>
<form name="form1" action="enter.php" method="post">
<table class="big">
<tr>
<td colspan="2">
<img src="http://www.lipsum.com/images/banners/grey_234x60.gif">
</td>
</tr>
<td align="right">Name:</td>
<td align="left"><input id="Username" name="Username" size="25" type="text"></td>
</tr>
<tr>
<td align="right">Pass:</td>
<td align="left"><input id="Password" name="Password" size="25" type="password"></td>
</tr>
<tr>
<td><input type="submit" value="Sumbit"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
You need to make adaptive and responsive design . You can use these libraries to help you make a responsive grid, for example:
http://getskeleton.com/
They use "media queries " for responsive design, you leave a link :
https://developer.mozilla.org/es/docs/CSS/Media_queries
Good luck :)
Try adding the below line between your <head>...</head> tag
<meta name=viewport content="width=device-width, initial-scale=1">
Only to give you an idea about the elements envolved...
Expand the snipet in fuul screen than resize browser page.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style>
.big {
width:100%;
text-align:center;
}
#media only screen and (max-width: 600px) {
body {
font-size:1.6em;
}
input{
width: 90%;
font-size: 1.4em;
}
input[type="submit"] {
width: 50%;
}
}
</style>
</head>
<body>
<form name="form1" action="enter.php" method="post">
<table class="big">
<tr>
<td colspan="2">
<img src="http://www.lipsum.com/images/banners/grey_234x60.gif">
</td>
</tr>
<td align="right">Name:</td>
<td align="left"><input id="Username" name="Username" size="25" type="text"></td>
<td></td>
</tr>
<tr>
<td align="right">Pass:</td>
<td align="left"><input id="Password" name="Password" size="25" type="password"></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="text-align:left"><input type="submit" value="Sumbit"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
Related
I create one Sign Up form where it will be connected afterwards with SQL Database using PHP. The problem is that I can not center the submit button within the table. As far as I know HTML5 does not support table functionality. All HTML code it's in PHP file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<section>
<form action="#" method="post">
<table>
<tr>
<td><label>Full Name:</label><td>
<td><input type="text" placeholder="Full Name" name="name" ><br></td>
</tr>
<tr>
<td><label>E-mail:</label><td>
<td><input type="email" placeholder="E-mail" name="email" ><br><td>
</tr>
<tr>
<td><label>Username:</label><td>
<td><input type="text" placeholder="Username" name="username" ><br><td>
</tr>
<tr>
<td><label>Password:</label><td>
<td><input type="password" placeholder="Password" name="password" ><br><td>
</tr>
<tr>
<td><input type="submit" name="Registration" value="Submit" ><br><td>
</tr>
</table>
</form>
</section>
</body>
</html>
body {
background: #40E0D0;
background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
}
form {
text-align: center;
display: flex;
justify-content: center;
}
table {
display: flex;
background-color: lightcyan;
margin: 15px;
padding: 15px;
}
tr {
text-align:center;
}
td {
margin-right: 10px;
}
input {
width: 300px;
height: 25px;
}
1). You should add a colspan to the last td.
2). Make sure the closing tags are formatted correctly -> you should use </td>, when you close a "td" tag. See the updated HTML below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<section>
<form action="#" method="post">
<table>
<tr>
<td><label>Full Name:</label></td>
<td><input type="text" placeholder="Full Name" name="name" ></td>
</tr>
<tr>
<td><label>E-mail:</label></td>
<td><input type="email" placeholder="E-mail" name="email" ></td>
</tr>
<tr>
<td><label>Username:</label></td>
<td><input type="text" placeholder="Username" name="username" ></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="password" placeholder="Password" name="password" ></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Registration" value="Submit" ></td>
</tr>
</table>
</form>
</section>
</body>
</html>
I know that it's been an ongoing discussion, and that float:right is supposed to be the answer to avoiding the use of tables for formatting, but I can't seem to figure out how to do the following without tables. The labels will change based on language, so fixed widths can't be used.
I can't seem to get float:right to work when the inputs are different widths. Here's the HTML I used with a table...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
<style>
.left {
width:1%;
white-space:nowrap;
text-align:right;
padding-right: 5px;
}
</style>
<form>
<table
width="400">
<tr>
<td class="left">Name:</td>
<td>
<input
type="text"
style="display:table-cell; width:100%"/>
</td>
</tr>
<tr>
<td class="left">Telephone Number:</td>
<td>
<input
type="text" style="width: 30px;"
/>-<input
type="text" style="width: 30px;"
/>-<input
type="text" style="width: 40px;"/>
</td>
</tr>
<tr>
<td colspan="2">
<input
type="checkbox"
/>Okay to leave the package without a signature.
</td>
</tr>
<tr>
<td valign="top" class="left">Delivery Notes:</td>
<td>
<textarea
rows="5"
style="display:table-cell;
width:100%"
></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
Thanks.
I am trying to write a jsp that will show the errors for a form, however I can't seem to format it properly. I tried to add a table in one of the cells, which made it look a bit better, but it still doesn't look clean. This is my code.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New user account</title>
</head>
<body>
<h1 align="center">Sign Up</h1>
<h3 align="center">Please fill in the following form to create
your account.</h3>
<form action="SignupCheck" method="post">
<table border="1" align=center width="500">
<tr>
<td width="250"><p align="center">Full Legal Name:</p></td>
<td align="center"><input type="text" name="name"></td>
</tr>
<tr>
<td width="250"><p align="center">Username:</p>
<td align="center"><input type="text" name="username"></td>
</tr>
<tr>
<td width="250"><p align="center">Password:</p></td>
<td align="center"><input type="password" name="password"></td>
</tr>
<tr>
<td width="250"><p align="center">Confirm Password:</p></td>
<td align="center"><input type="password"
name="confirmPassword"></td>
</tr>
<tr>
<td width="250"><p align="center">Starting Balance:</p></td>
<td>
<table align="center">
<tr>
<td align="center"><input type="text" name="balance"></td>
</tr>
<tr>
<td align="center"><p align="center"
style="color: red; font-size: 18px">Please enter your
password</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="250" align="right"><input type="reset" value="Reset"></td>
<td align="left"><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
As you see I placed a sample error and the Textbox is too high and the error message takes up too much space...
Add the following as CSS:
td {
padding: 5px 5px 5px 5px
}
p {
text-align:right;
}
table {
border: solid lightgray;
border-radius: 10px;
}
Here is the JSFiddle demo
Also note that I modified the HTML code, removing the sub-table you added. Please have a look at the JSFiddle for the full code.
I am using pure css to design my web page. I have this table/form on my page. Unfortunaltey it exceeds the width of my screen. How can I make the table autoamticall format so that it fits my screen? I would like that each columns "shrinks" until the table fits the screen width of the user.
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200">
<link rel="stylesheet" href="css/layouts/style_pure.css">
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/side-menu.css">
<!--<![endif]-->
</head>
<body>
<form class="pure-table">
<table class="pure-table">
<thead>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
<td>Col7</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</form>
</body>
</html>
set your table width to 100% , also set the text input fields inside each cell to 100% width.
here is a working example :
http://jsfiddle.net/ggLvLs3e/16/
CSS
.stretch{
width:100%;
}
input[type="text"]{
width:100%;
}
HTML
<table class="pure-table stretch">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
I am new to html/css. i am trying to build up my own form and i am trying to align it in the center. I used the align property in css but its not working.
Html code:
<!DOCTYPE HTML>
<head>
<title>Web Page Having A Form</title>
<link rel = "stylesheet" type="text/css" href="Form.css">
</head>
<body>
<h1>Create a New Account</h1>
<form >
<table>
<tr>
<td>Name :</td> <td><input type="text" name="name"></td><br>
</tr>
<tr>
<td>Email :</td> <td><input type="text" name="email"></td><br>
</tr>
<tr>
<td>Password :</td> <td><input type="password" name="pwd"></td><br>
</tr>
<tr>
<td>Confirm Password :</td> <td><input type="password" name="cpwd"><br>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
Css Code:
body
{
background-color : #484848;
}
h1
{
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form
{
align:"center";
}
How should i change my code to align the entire form in the center?
Like this
demo
css
body {
background-color : #484848;
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form {
width: 300px;
margin: 0 auto;
}
This is my answer. I'm not a Pro. I hope this answer may help you :3
<div align="center">
<form>
.
.
Your elements
.
.
</form>
</div>
Wrap the <form> element inside a div container and apply css to the div instead which makes things easier.
#aDiv{width: 300px; height: 300px; margin: 0 auto;}
<html>
<head></head>
<body>
<div>
<form>
<div id="aDiv">
<table>
<tr>
<td>Name :</td>
<td>
<input type="text" name="name">
</td>
<br>
</tr>
<tr>
<td>Email :</td>
<td>
<input type="text" name="email">
</td>
<br>
</tr>
<tr>
<td>Password :</td>
<td>
<input type="password" name="pwd">
</td>
<br>
</tr>
<tr>
<td>Confirm Password :</td>
<td>
<input type="password" name="cpwd">
<br>
</tr>
<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
I would just use table and not the form. Its done by using margin.
table {
margin: 0 auto;
}
also try using something like
table td {
padding-bottom: 5px;
}
instead of <br />
and also your input should end with />
e.g:
<input type="password" name="cpwd" />
Or you can just use the <center></center> tags.
Wrap the element inside a div container as a row like
your form here or something like that.
Set css attribute:
width: 30%; (or anything you want)
margin: auto;
Please take a look on following picture for more detail.