I want to put inputs in one row.
<table border='1' cellpadding="25" style='border-collapse: collapse;border-color: silver;'>
<tr style='font-weight: bold;'>
<td width='350' align='center'>
<h2>Register:</h2><br>
Login: <input type="text" name="login" maxlength="20" size="25" /><br>
Password: <input type="password" name="password" size="25" maxlength="32" /><br>
Repeat password: <input type="password" name="password2" size="25" maxlength="32" /><br><br>
</td></tr></table>
I think you are trying to get all this aligned in the center.For that we have to use the the "tr" tag defines a row in an HTML table and "th" tag which defines a header cell in an HTML table.Try the following code :
<html>
<body>
<h2 align="center">Register</h2>
<table align="center">
<tr>
<td>Login</td>
<td><input type="text" name="login" align="middle"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pass" align="middle"/></td>
</tr>
<tr>
<td>Repeat Password</td>
<td><input type="password" name="rpass" align="middle"/></td>
</tr>
</table>
Also we use the align property for table and the new rows we create to get what you desire.
I think you have 3 options:
using CSS & position:relative and play with left' of eachinputs`, that's not valid at all.
Add some more HTML, I mean put each inputs on separate td. this is the best choice I think, and even better that you put the label / text' of each input on another td as well.
Using div (for example) instead of td for having more control and using CSS as well.
I strongly recommend you that using option #2, hope this help.
Do it like that:
<table border='1' cellpadding="25" style='border-collapse: collapse;border-color: silver;'>
<tr style='font-weight: bold;'>
<td style="width: 300px; text-align: right;">
Login:
</td>
<td style="width: 300px; text-align: left;">
<input type="text" name="login" maxlength="20" size="25" />
</td>
</tr>
<tr style='font-weight: bold;'>
<td style="width: 300px; text-align: right;">
Password:
</td>
<td style="width: 300px; text-align: left;">
<input type="password" name="password" size="25" maxlength="32" />
</td>
</tr>
</table>
Related
So I'm trying to build upon the following application, and previously I had this functional <form> tag below.
It's a bit of an eyesore but it's essentially just some inputs in a table for stylistic purposes, wrapped around by a form:
<form method='POST' action='http://localhost:8080/hw4/submission'
form id="form" name="form">
<table>
<tr>
<td>
<b>Claim *</b>
</td>
<td>
<input id="claim" name='claim' class="text" size="35" type="text" placeholder="What's your assertion?">
</td>
</tr>
<tr>
<td>
<b>Argument/Evidence *</b>
</td>
<td>
<textarea id="arg" name='arg' class="text" cols="37" rows="4" placeholder="Go ahead, prove yourself!" style="resize:none; font-family: 'Trebuchet MS', sans-serif; font-size: 13px;"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="font-size:12px; color:#FF0099;x"> ∗ - Required field
</td>
</tr>
</table>
<!-- Form submit -->
<p><input type='button' value='Submit' style='width:100px' onclick='return checkFields();'></p></form>
checkFields() is a Javascript function that just checks for empty input fields, and if they are not all empty, it calls document.getElementById("form").submit();
When inspecting the source code, my browsers (Chrome, Firefox) would say the <form> tag was open, but yet it would still do the POST call without any problems.
I then tried to add an additional input field like so:
<form method='POST' action="http://localhost:8080/hw5/submission"
id="form" name="form">
<table width="550px">
<tr>
<td>
<b>Name</b>
</td>
<td>
<input id="username" class="text" size="45" type="text" placeholder="This will display with your claim">
</td>
</tr>
<tr>
<td>
<b>Claim</b>
</td>
<td>
<input id="claim" class="text" size="45" type="text" placeholder="What's your assertion?">
</td>
</tr>
<tr>
<td>
<b>Argument/Evidence</b>
</td>
<td>
<textarea id="arg" class="text" cols="37" rows="2" placeholder="Go ahead, prove yourself!"></textarea>
</td>
</tr>
</table>
<!-- Form submit -->
<input id="submit" type="button" value="Submit" style="width:100px" onclick="return checkFields();">
</form>
Note all I really changed was I added <input id="username">. When inspecting the code in the browsers, it says the <form> is closed (though eclipse says it's not) and it won't submit.
I tried wrapping each <input> itself with <form id="form"></form>, which appeased eclipse's warnings, but in trying to output any of the request parameters, it'd return NULL.
I'm at my wits end trying to understand what's going on under the hood here.
Don't use the Snippet, use the Plunker
There were some critical typos that brought everything down:
Each <form> was broken into two lines, but it wouldn't matter if that was fixed...
...because each form had an extra word inside the tag: form
A color:#FF0099" was followed by a x; that looks like a piece of px.
Added a few things:
Each <form> has a functioning test server in method and target attribute pointing to...
...a new iframe. It's purpose is to display the data sent by the forms.
Changed all <input type='button'...> to <input type='submit'...>. Now with real submit buttons you don't need any extra JS/jQ to submit a form anymore.
PLUNKER
SNIPPET
<form method='POST' action='http://www.hashemian.com/tools/form-post-tester.php/form1' id="form1" name="form1" target='win1'>
<table>
<tr>
<td>
<b>Claim *</b>
</td>
<td>
<input id="claim1" name='claim1' class="text" size="35" type="text" placeholder="What's your assertion?">
</td>
</tr>
<tr>
<td>
<b>Argument/Evidence *</b>
</td>
<td>
<textarea id="arg1" name='arg1' class="text" cols="37" rows="4" placeholder="Go ahead, prove yourself!" style="resize:none; font-family: 'Trebuchet MS', sans-serif; font-size: 13px;"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="font-size:12px; color:#FF0099"> ∗ - Required field
</td>
</tr>
</table>
<!-- Form submit -->
<p><input type='submit' style='width:100px'></p></form>
<iframe src='about:_blank' id='win1' name='win1' width='200' height='50px'></iframe>
<!--==================================================-->
<form method='POST' action='http://www.hashemian.com/tools/form-post-tester.php/form2' id="form2" name="form2" target='win2'>
<table>
<tr>
<td>
<b>Claim *</b>
</td>
<td>
<input id="claim2" name='claim2' class="text" size="35" type="text" placeholder="What's your assertion?">
</td>
</tr>
<tr>
<td>
<b>Argument/Evidence *</b>
</td>
<td>
<textarea id="arg2" name='arg2' class="text" cols="37" rows="4" placeholder="Go ahead, prove yourself!" style="resize:none; font-family: 'Trebuchet MS', sans-serif; font-size: 13px;"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="font-size:12px; color:#FF0099"> ∗ - Required field
</td>
</tr>
</table>
<!-- Form submit -->
<p><input type='submit' style='width:100px'></p></form>
<iframe src='about:_blank' id='win2' name='win2' width='200' height='50px'></iframe>
<!--===================================================-->
<form method='POST' action="http://www.hashemian.com/tools/form-post-tester.php/form3" id="form3" name="form3" target='win3'>
<table width="550px">
<tr>
<td>
<b>Name</b>
</td>
<td>
<input id="username3" class="text" size="45" type="text" placeholder="This will display with your claim">
</td>
</tr>
<tr>
<td>
<b>Claim</b>
</td>
<td>
<input id="claim3" class="text" size="45" type="text" placeholder="What's your assertion?">
</td>
</tr>
<tr>
<td>
<b>Argument/Evidence</b>
</td>
<td>
<textarea id="arg3" class="text" cols="37" rows="2" placeholder="Go ahead, prove yourself!"></textarea>
</td>
</tr>
</table>
<!-- Form submit -->
<input id="submit3" type="submit" style="width:100px">
</form>
<iframe src='about:_blank' id='win3' name='win3' width='200' height='50px'></iframe>
I have a simple login form and it is centered in internet explorer but in Chrome and Firefox it is aligned to the left of the page. What do I need to do to have the form centered in the other 2 browsers.
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
<td> </td>
</tr>
</table>
</td>
</form>
Try to change the form width to 100%. This the example
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>" style="width:100%;">
You should avoid using HTML tables to define the layout of your page. Here's a good overview on why tables should not be used for layout.
You should rely on HTML tag for semantic and CSS to tell the browser how he should display the stuff in the page.
Now consider the following:
<style>
form {
width: 200px;
margin: 0 auto;
}
input {
display: block;
margin: 5px 0;
}
</style>
<form name="form1" method="POST" action="/">
<h1>Client Login</h1>
<input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24">
<input name="mypassword" type="password" id="mypassword" placeholder="password" size="25">
<input name="Submit" type="submit" class="submit_button" value="Login">
</form>
The HTML is stripped down to the bare essential: your title then your form elements. The form here is the main container. With CSS we tell the form to have 200px width and we use the margin property to center it.
We also tell the input element to display like a block element to fill it'S container, this way they each occupy 1 line.
Learning CSS is useful to separate appearance from meaning, here's a great demonstration of the relation between content, container and design.
Would you mind to try this maybe :)
<style>
table {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
<td> </td>
</tr>
</table>
</td>
</form>
I have attached image containing elements on my page. I want "format-123-456-7890) exactly below phone element. at present "phone ext" element is wrapped. If i increase size of "format.." element, phone ext element is getting wrapped. don't know solution. here is html code. i want Phone Ext in one line and Format element in one line (don't want to be wrapped).
<table datatable="0" role="presentation">
<caption class="hiddenContent">data table</caption>
<tr>
<td style="width: 30%;text-align: right">*First Name:</td>
<td>
<input type="text" name="elctnFirstName" id="elctnFirstName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">Middle Name:</td>
<td>
<input type="text" name="elctnMiddleName" id="elctnMiddleName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">*Last Name:</td>
<td>
<input type="text" name="elctnLastName" id="elctnLastName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">Email Address:</td>
<td>
<input type="text" name="emailAddress" id="emailAddress" value="" aria-required="true" maxlength="256" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">*Phone:</td>
<td>
<input type="text" name="elctnPhone" id="elctnPhone" value="" aria-required="true" maxlength="12" />
</td>
<td style="width: 20%;text-align: right">Phone Ext:</td>
<td>
<input type="text" name="eltcnPhoneExt" id="eltcnPhoneExt" value="" aria-required="true" maxlength="3" />
</td>
</tr>
<tr>
<td style="width: 40%;text-align: right">(Format-123-456-7890)</td>
</tr>
</table>
Here are a couple of suggestions
1) Use in Phone Ext
2) Let the table go to its natural width rather than setting the with to 40% and 20%
3) Explicity set the widths of <input>. I doubt that the extension field needs to be as long as others
4) Put a nowrap on the cell you don't want to wrap.
5) Use Bootstrap rather than tables to layout your form
I am using Bootstrap 2.3 and I have like 7 text input fields inside a table that uses bootstrap table style. I would like to resize (or shrink the width of) these text inputs instead of taking the whole width of the table cell but I could not do that
I tried to use the class of span1 but it did not shrink them well. So is there any way of minimizing the size or width of all text input fields within the table cell?
Here's my code:
<table class="table table-bordered">
<thead>
<tr>
<th>Exercise</th>
<th>Exercise Code</th>
<th>Initiated by</th>
<th>Initiated on</th>
<th>Done by</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
For Action
</td>
</tr>
</tbody>
</table>
Since you have access to JQuery, try doing this in your <header> area of html, but be sure it is after all Javascript includes.
<script type="text/javascript">
$(".span1").css("width", "10px");
</script>
If the above works, I think you need to update your original post to show all your js/css includes. This seems like you just have something in the wrong order.
--Original Answer Below--
Could you not simply add a CSS entry in your header like:
.table > input[type="text"] {
width: 10px;
}
The only negative is that this will change all table type=text elements that use the .table class.
So instead, have the table itself have the span1 tag and change the above code to reflect it?
.span1 > input[type="text"] {
width: 10px;
}
*Note: Make sure this is AFTER you reference the bootstrap css.
my question is how would I use an HTML::Template tag inside a value of form field to change that field. For example
<table border="0" cellpadding="8" cellspacing="1">
<tr>
<td align="right">File:</td>
<td>
<input type="file" name="upload" value= style="width:400px">
</td>
</tr>
<tr>
<td align="right">File Name:</td>
<td>
<input type="text" name="filename" style="width:400px" value="" >
</td>
</tr>
<tr>
<td align="right">Title:</td>
<td>
<input type="text" name="title" style="width:400px" value="" />
</td>
</tr>
<tr>
<td align="right">Date:</td>
<td>
<input type="text" name="date" style="width:400px" value="" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="Cancel">
<input type="submit" name="action" value="Upload" />
</td>
</tr>
</table>
I want the value to have a <TMPL_VAR> variable in it.
You use it the same way you'd use a template variable anywhere else:
<input type="text" name="date" style="width:400px" value="<TMPL_VAR NAME=date>" />
Yeah, it's ugly and it breaks your HTML validator. Which is one of the many reasons why I like Template Toolkit better.