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.
Related
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 need to make a table with multiple rows for a form.
I'm stuck with this part:
,
This is what I want:
Any help on shortening those cells would be much appreciated.
Try this one: https://jsbin.com/kekecixuda/1/edit?html,css,output
// Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="main-box">
<table border=1>
<tr>
<td class="bold-text">Course Information</td>
</tr>
<tr>
<td>Course Name:</td>
<td>
<select class="select-aria">
<option value="">Select a cource</option>
<option value="">...</option>
<option value="">...</option>
</select>
</td>
</tr>
<tr>
<td>Select a section:</td>
<td class="td-pos">
<input type="radio" name="browser" value="a1" class="inputs-pos">1
</td>
<td class="td-pos">
<input type="radio" name="browser" value="a2" class="inputs-pos">2
</td>
<td class="td-pos">
<input type="radio" name="browser" value="a3" class="inputs-pos">3
</td>
</tr>
</table>
</div>
</body>
</html>
// CSS
* {
margin: 0;
padding: 0;
font-size: 15px;
}
.main-box {
background-color: #40b3bf;
width: 680px;
padding: 20px;
}
.bold-text {
font-weight: bold;
width: 250px;
}
.select-aria {
width: 130px;
}
table {
border-collapse: separate;
}
td {
padding: 2px;
min-width: 140px;
}
.inputs-pos {
margin: 0px 5px 0px 3px;
}
.td-pos {
padding-top: 5px;
}
You need to use colspan. Where you want one column to look like 3, set the colspan=3 so on.
<table border="1">
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
My sketch showing some elements, very simple, just for fun:
table{border-collapse:collapse}
td{border:1px solid #000;padding:5px}
<table>
<tr>
<td colspan="4">Course Information</td>
</tr>
<tr>
<td>Course Name:</td>
<td colspan="3"><input type="search"></td>
</tr>
<tr>
<td>Select a section:</td>
<td><input type="radio"> 1</td>
<td><input type="radio"> 2</td>
<td><input type="radio"> 3</td>
</tr>
</table>
I am having trouble getting a border on a table. Here is the html for the table it shows having a border in Dreamweaver but not on the live webpage. I also have other tables on the page and do not want them to have the borders just this one.
<table style="width: 100%;" border="1" bordercolor="#000000">
<tr>
<td colspan="2" align="center" valign="middle">Please comeplete form</td>
</tr>
<tr>
<td width="50%">Event Name:</td>
<td>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Date (YYYY-MM-DD):</td>
<td>
<textarea name="date" id="date"></textarea></td>
</tr>
<tr>
<td>Link to page:</td>
<td>
<input type="text" name="link" id="link"></td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="status" id="status"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><input type="submit" name="submit" id="submit" value="Submit"></td>
</tr>
</table>
You can add CSS to bring it up to standard
Something like:
table.mytable{
border: 1px solid #000000;
}
and then add a class="mytable" attribute to your table
You can initially style it like:
table,td,th {
border-collapse:collapse;
border: 1px solid #000000;
}
And in this way further you can add this as a class.
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>
I have the following html :
<table id="TableNewUser" runat="server" width="50%" cellpadding="3" cellspacing="1"
border="0">
<tr>
<th colspan="2">
New User
</th>
</tr>
<tr>
<td width="50%" align="right">
<asp:TextBox ID="TextBoxUsername" runat="server" Style="direction: rtl;" MaxLength="25"></asp:TextBox>
</td>
<td align="left" width="50%">
UserName
</td>
</tr>
<tr>
<td align="right">
<asp:TextBox ID="TextBoxPass" runat="server" MaxLength="25"></asp:TextBox>
</td>
<td align="left">
Password :
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="ButtonSubmit" runat="server" Text="Submit" OnClick="ButtonSubmitClick" />
</td>
</tr>
</table>
I wanna change the tr style whenever the text-boxes are focused.
I've used below CSS code but it doesn't work.
input[type="text"]:focus tr
{
background-color: #e7e7e7;
}
Could you please guide me?
As Mr. Dissappointment stated, you must use JavaScript (or jquery) to achieve what you want.
I coded a very simple HTML page to exemplify:
<html>
<head>
<script type="text/javascript">
function changeTrStyle()
{
document.getElementById("trId").style.background = "red";
}
</script>
</head>
<body>
<table>
<tr id="trId">
<td>
<input type="text" onfocus="changeTrStyle()"/>
</td>
</tr>
</table>
</body>
</html>
If you focus the textbox, the tr background will become red.
Note: Tested on Safari and Chrome.