I have the following table code that each row contains a form. My problem is, the bottom row, where the input and submit are, is going to the top above the top table row. I cannot figure out why. Can someone please help and explain why the bottom row goes to the very top?
<table id="bet_table" width=800px cellspacing=0 cellpadding=1 border-width=1px>
<tr bgcolor="BF1919" style="color:#fff; font-weight:bold;">
<td><center>Time</center></td>
<td><center>Game #</center></td>
<td><center>Teams</center></td>
<td><center>Run Line</center></td>
<td><center>Money Line</center></td>
<td><center>Total Runs</center></td>
</tr>
<tr bgcolor="#F0F0F0">
<td colspan=6><center><strong>August 28, 2012</strong></center></td>
</tr>
<tr bgcolor="#fff">
<form action="mlb.php?action=update&gameid=" method="post" />
<td width="130px"><center><input type="text" size="4" name="time" value="7:00" />
<select name="ampm">
<option value="AM">A.M.
<option value="PM">P.M.
</select></center></td>
<td width="60px"><center>306</center></td>
<td>Los Angeles Dodgers<br />Los Angeles Angels</td>
<td width="150px"><center>
<select name="runline1frac">
<option value="-1/2">-1½
<option value="+1/2">+1½
</select> <input type="text" size="4" name="runline1value" value="+120" /><br />
<select name="runline2frac">
<option value="-1/2">-1½
<option value="+1/2">+1½
</select> <input type="text" size="4" name="runline2value" value="-182" /></center></td>
<td width="80px"><center><input type="text" size="4" name="moneyline1value" value="-132" /><br /><input type="text" size="4" name="moneyline2value" value="+132" /></center></td>
<td align=right>Total Runs: <input type="text" size="3" name="totalruns" value="6" /> OV <input type="text" size="4" name="totalrunsOvalue" value="-178" /><br />UN <input type="text" size="4" name="totalrunsUvalue" value="+123" /></td>
</tr>
<tr colspan=6>
<center>
<input type="submit" value="Update" />
</form>
</center>
</tr>
</table>
Pasted your code and fixed it here:
http://jsfiddle.net/5nNxB/
Your last <tr> did not have a <td>. Added it with the right colspan.
As a side note, your code is not very clean. Wrap the entire table in <form> instead of randomly inserting the tags in the middle. Also, try not to use inline styling and attributes like bgcolor etc.
Bottom of your code :
<tr colspan=6>
<center>
<input type="submit" value="Update" />
</form>
</center>
</tr>
Should be:
<tr>
<td colspan=6>
<center>
<input type="submit" value="Update" />
</form>
</center>
</td>
</tr>
The form tag also is placed incorrectly
Related
I trying to make the text bar wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
This is my HTML:
HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Benodigheden">Benodigheden:</label>
</td>
<td>
<input type="text" id="Benodigheden"name="Benodigheden" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
While the above code is very good, minimal and clean, which is best. But IF you need different widths for each of your text inputs then inline CSS is needed.
Example code:
<input style="width: 300px;" type="text">
<input style="width: 340px;" type="text">
If you only wish to make input-type="text" have a certain width, add this style in your css file fx:
input[type=text] {
width: 300px;
}
add some css to the head section of your html
<style>
input{width: 300px}
</style>
Make your table wider.
Add desired width to your td's
Ajust your inputs widht.
NOTE: The markup above is auto-generated by JavaServer Faces.
I have the following markup:
<span style="display: block;">
<input checked="checked" type="checkbox">ID
<select size="1" >
<option value="">Select</option>
<option value="EQUAL" selected="selected">=</option>
</select>
<table style="display: inline-table;">
<tbody>
<tr>
<td>
<input name="cr" value="" type="text">
</td>
</tr>
</tbody>
</table>
</span>
JSFiddle
As we can see from that demo, the inputs is not placed in a row.
How can I place them into a single line as follows:
There are two solutions already, but if you dont want to alter your HTML code, then you can achieve it using some simple css rules. as following fiddle
https://jsfiddle.net/nileshmahaja/5ajmkery/7/
CSS
span *{
display:block;
float:left;
margin-right:5px
}
table{
padding:0;
margin-left:20px;
border-collapse:collapse
}
you have to use table tag in your input???, otherwise you can use
<div>
<input checked="checked" type="checkbox" style="float:left" />
<label style="float:left">ID </label>
<select size="1" style="float:left" >
<option value="" >Select</option>
<option value="EQUAL" selected="selected">=</option>
</select>
<input name="cr" value="" type="text" style="float:left">
</div>
i hope that this solution help you
Im not sure about limitations, but u could add display and margin style to table. It's a bit hacky..
<table style="display: inline-block;margin-bottom: -9px;">
<tbody>
<tr>
<td>
<input name="createRecipientDynamicGroupForm:j_idt240:8:j_idt253" value="" type="text">
</td>
</tr>
</tbody>
</table>
You can try this:
<table style="display: inline-table;">
<tbody>
<tr>
<td>
<input checked="checked" type="checkbox">ID
</td>
<td>
<select size="1" > <option value="">Select</option>
<option value="EQUAL" selected="selected">=</option>
</select>
</td>
<td>
<input name="createRecipientDynamicGroupForm:j_idt240:8:j_idt253" value="" type="text">
</td>
</tr>
</tbody>
</table>
Basically I have moved the 1st 2 elements in the table.
I been doing some html code in a few days now, but i can't figure out how to make the it all in a horizontal look, just like this exsampel:
ID Name Commodity Weight Tolerance
Box Box drop down box box
So box stands for "input form" ofc, and a drop down should be full of names of commodities from my database.
Right now, i have this code so far:
<body>
<div id="header">
<h2 align="center" style="color: #FFFFFF">Edit Recept</h2>
</div>
<div id="content">
<div id="form-wrapper">
<form method="post" action="Front">
<table>
<tr>
<td>ID: <td>
<td><input type="text" name="Id" />
</tr>
<tr>
<td>Name:<td>
<td><input type="text" name="name" />
</tr>
</table>
<table>
<tr>
<p> </p>
<p>Add commodities to your recept: <p>
</tr>
<tr>
<td>Select commodity:<td>
<td><select>
<option value="" disabled="disabled" selected="selected">Please select Commodity</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</tr>
<tr>
<td>Weight:<td>
<td><input type="text" name="tolerance" />
</tr>
<tr>
<td>Tolerance:<td>
<td><input type="text" name="name" />
</tr>
<tr>
<td><input type="submit" value="Add" /><td>
<tr>
</table>
<br>
<input type="submit" value="Save" />
<input type="reset" value="Cancel" />
<input type="hidden" name="whichPage" value="prescription"/>
</form>
</div>
<p align="center">
Enter the new values and press save to make the change
</p>
</div>
Is there a trick how to do it easy?? My goal is to make it like i described on the top, and then add a button which will add a new line of input boxes under the other if you want to store more commodities in the same prescription.
Just make your labels all in one single row of the table, then the input fields for those labels should be jsut under in a second row. So you will have a colomn based input just as you wish, here is a fiddle as a sample.
<div id="header">
<h2 align="center" style="color: #FFFFFF">Edit Recept</h2>
</div>
<div id="content">
<div id="form-wrapper">
<form method="post" action="Front">
<table>
<tr>
<td>ID </td>
<td>Name</td>
<td>Select commodity</td>
<td>Weight</td>
<td>Tolerance</td>
</tr>
<tr>
<td><input type="text" name="Id" /></td>
<td><input type="text" name="name" /></td>
<td><select>
<option value="" disabled="disabled" selected="selected">Please select Commodity</option>
<option value="1">One</option>
<option value="2">Two</option>
</select></td>
<td><input type="text" name="tolerance" /></td>
<td><input type="text" name="name" /></td>
</tr>
</table>
<br />
<input type="submit" value="Save" />
<input type="reset" value="Cancel" />
<input type="hidden" name="whichPage" value="prescription"/>
</form>
</div>
<p align="center">
Enter the new values and press save to make the change
</p>
</div>
Note: You should pay attention to the closing tags for table element markups as you are missing some and introducing an open tag instead of a closing one in some rows.
Just a small hint. This will show the text and input box below each other. But you need to rearrange your whole table with the proper manner. Also dont use multiple tables. Use single table with many columns.
<table>
<tr>
<td>ID: </td>
<td>Name:</td>
</tr>
<tr>
<td><input type="text" name="Id" /></td>
<td><input type="text" name="name" /></td>
</tr>
</table>
Hi? I'm a university student of Korea,
and this semester I'm studying internet programming.
I made html, and I made tag.
However I think that there is problem in my tag.
In fact I hardly effort to find problem, but I cannot find that.
Experts!!!Please find the problem!!!!
This is my form tag.
<html>
<head></head>
<body>
<form name="firstForm" action="http://kisschks.hosting.paran.com/noname2.php">
<table width=500 border=1>
<tr>
<td width=100>이름</td>
<td><input name="name" type="text" size="15"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password" size="20" maxlength="15"></td>
</tr>
<tr>
<td>학번</td>
<td><input type="text" name="schoolnum" size="21"></td>
</tr>
<tr>
<td>전화번호</td>
<td><select name="fst">
<option value="010" selected>010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
</select> - <input name="sec" type="text" size="4" maxlength="4"> - <input name="trd" type="text" size="4" maxlength="4">
</td>
</tr>
<tr>
<td>캠퍼스</td>
<td>
<input type="radio" name="campus" value="명륜">명륜
<input type="radio" name="campus" value="율전" checked>율전
</td>
</tr>
<tr>
<td>학년</td>
<td>
<input type="checkbox" name="year" value="1학년" checked>1학년
<input type="checkbox" name="year" value="2학년">2학년
<input type="checkbox" name="year" value="3학년">3학년
<input type="checkbox" name="year" value="4학년">4학년
<input type="checkbox" name="year" value="휴학">휴학
</td>
</tr>
<tr>
<td>고향</td>
<td><textarea name="고향" rows=3 cols=20>
</textarea>
</td>
</tr>
<tr>
<td>하고픈말</td>
<td><textarea name="intro" rows=3 cols=20></textarea></td>
</tr>
<tr>
<td colspan=2 align="center">
<input type="button" value="안씁니다" disabled>
<input type="reset" value="다시작성">
<input type="submit" value="등록">
</td>
</tr>
</table>
</form>
</body>
</html>
You have not mentioned your problem exactly but I do find charset meta missing for the Korean language you are using on the form:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Interesting Resources:
What Beautiful HTML Code Looks Like
Fix Your Site With the Right DOCTYPE!
One thing that might be relevant is that you haven't specified either method="POST" or method="GET" in your form tag. Though if you're using $_REQUEST in your php it shouldn't matter either way.
Well, you didn't say what your code was doing wrong or what you expected but didn't get... but...
Go to:
http://validator.w3.org/#validate_by_input
and paste your code in there. It turns out the <head> element cannot be empty. Don't just take my revision below, you really should read the output of the Validator to understand what kind of changes needed to be made in order to achieve valid HTML.
Here is valid code that should work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
hello
</title>
</head>
<body>
<form id="firstForm" action="http://kisschks.hosting.paran.com/noname2.php">
<table width="500" border="1">
<tr>
<td width="100">
이름
</td>
<td>
<input name="name" type="text" size="15" />
</td>
</tr>
<tr>
<td>
비밀번호
</td>
<td>
<input type="password" name="password" size="20" maxlength="15" />
</td>
</tr>
<tr>
<td>
학번
</td>
<td>
<input type="text" name="schoolnum" size="21" />
</td>
</tr>
<tr>
<td>
전화번호
</td>
<td>
<select name="fst">
<option value="010" selected="selected">
010
</option>
<option value="011">
011
</option>
<option value="016">
016
</option>
<option value="017">
017
</option>
<option value="018">
018
</option>
<option value="019">
019
</option>
</select> - <input name="sec" type="text" size="4" maxlength="4" />- <input name="trd" type="text" size="4" maxlength="4" />
</td>
</tr>
<tr>
<td>
캠퍼스
</td>
<td>
<input type="radio" name="campus" value="명륜" />명륜 <input type="radio" name="campus" value="율전" checked="checked" />율전
</td>
</tr>
<tr>
<td>
학년
</td>
<td>
<input type="checkbox" name="year" value="1학년" checked="checked" />1학년 <input type="checkbox" name="year" value="2학년" />2학년 <input type="checkbox" name="year" value="3학년" />3학년 <input type="checkbox" name="year" value="4학년" />4학년 <input type="checkbox" name="year" value="휴학" />휴학
</td>
</tr>
<tr>
<td>
고향
</td>
<td>
<textarea name="고향" rows="3" cols="20">
</textarea>
</td>
</tr>
<tr>
<td>
하고픈말
</td>
<td>
<textarea name="intro" rows="3" cols="20">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="안씁니다" disabled="disabled" /><input type="reset" value="다시작성" /><input type="submit" value="등록" />
</td>
</tr>
</table>
</form>
<p>
html form ta
</p>
</body>
</html>
Note that in the <html> tag, it specifies English as the language. I suspect that is not the correct language, but you can fix that yourself once you get everything else working.
Good luck with your studies.
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.