In HTML I am making a form where there are 2 tables side by side. In one table all the form <label>/Name/E Mail/Password</label> and in another table I am trying to put the form <inputs> text/email/password to make them look nicely visible.
But when I gave the label Message and <textarea name="Message" rows="1" cols="30"></text area> my whole form layout is getting disturbed due to which I am not able keep my initial labels and inputs aligned.
<form class="" action="index.html" method="post">
<table>
<tr>
<td>
<table>
<tr>
<td>
<label>Name</label>
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
</tr>
<tr>
<td>
<label>Message</label>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>
<input type="password" name="" value="">
</td>
</tr>
<tr>
<td>
<textarea name="Message" rows="1" cols="30"></textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
When the labels and inputs are aligned
When the labels and inputs are not aligned
There is no need for the extra table inside of the table, and you are including everything inside of 1 row, which is why its formatted like that.
You shouldn't be using tables for this, not when you have things like CSS Flexbox and CSS Grid. Here is a basic example of using flexbox with a form.
But if you must use a table, try a table format like this ...
<table>
<tr>
<td>label here</td>
<td>form field here</td>
</tr>
<tr>
<td>label here</td>
<td>form field here</td>
</tr>
...
</table>
Here is an example using your code.
<form class="" action="index.html" method="post">
<table>
<tr>
<td>
<label>Name</label>
</td>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Message</label>
</td>
<td>
<textarea name="Message" rows="1" cols="30"></textarea>
</td>
</tr>
</table>
</form>
Related
Here is my HTML code which is a registration form. As you see there is a gap between Name and input part and another gap between E-mail and input part.
How can I remove those gaps without CSS?
<center>
<form>
<table>
<tr>
<td>
Name:
</td>
<td>
<input type="text" , placeholder="Name">
</td>
</tr>
<tr>
<td>
E-mail:
</td>
<td>
<input type="email" , placeholder="Email">
</td>
</tr>
<tr>
<td>
Message:
</td>
<td>
<textarea rows="5" cols="32" placeholder="Message"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<button type="submit">Send your Message</button>
</td>
</tr>
</table>
</form>
</center>
This is my output...
I used center to make my form in the center of my page , i know it is obsolete , i just want to know if there is a way to delete gaps no matter if it is obsolete.
You could just align to the right.
<center>
<form>
<table>
<tr>
<td align="right">
Name:
</td>
<td>
<input type="text" , placeholder="Name">
</td>
</tr>
<tr>
<td align="right">
E-mail:
</td>
<td>
<input type="email" , placeholder="Email">
</td>
</tr>
<tr>
<td>
Message:
</td>
<td>
<textarea rows="5" cols="32" placeholder="Message"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<button type="submit">Send your Message</button>
</td>
</tr>
</table>
</form>
</center>
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 think My html code is messed up and I can't fix it.I he been workin on for 2 hours
this is the output
Please can you help me
<?php
if($_POST){
}
else{
echo '
<form action="" method="post">
<table cellspacing="5" cellpadding="5">
<tr>
<td>Ad</td>
<td><input type="text" name="ad"></td>
</tr>
<tr>
<td>Posta</td>
<td><input type="text" name="posta"></td>
</tr>
<tr>
<td>Mesaj</td>
<td><textarea rows="5" cols="30" name="mesaj"</textarea>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Gonder"></td>
</tr>
</table>
</form>
';
}
?>
<form action="" method="post">
<table cellspacing="5" cellpadding="5">
<tr>
<td>Ad</td>
<td>
<input type="text" name="ad">
</td>
</tr>
<tr>
<td>Posta</td>
<td>
<input type="text" name="posta">
</td>
</tr>
<tr>
<td>Mesaj</td>
<td>
<textarea rows="5" cols="30" name="mesaj"> </textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Gonder">
</td>
</tr>
</table>
</form>
You forgot to close the textarea tag and the td its in, also please use some indentation. it hurts my eyes!
<textarea> Missing '>' For End Of Tag (At line 13, column 9)
it should be
<form action="" method="post">
<table cellspacing="5" cellpadding="5">
<tr>
<td>Ad</td>
<td><input type="text" name="ad"></td>
</tr>
<tr>
<td>Posta</td>
<td><input type="text" name="posta"></td>
</tr>
<tr>
<td>Mesaj</td>
<td><textarea rows="5" cols="30" name="mesaj"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Gonder"></td>
</tr>
</table>
</form>
I am trying to make the select option 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.
I hope somebody can help me.
This is my 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="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</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.
See this fiddle
You have to add the below CSS for styling the select
select{
width: 300px;
}
The best option is to try padding like;
select{
padding: 20px;
}
Here is the demo..
I want to use two forms inside a JSP page, in which one form is of enctype="multipart/form-data" and another is of simple Post method, but it's not working. How should I deal with this?
1)
<form action="NewUserRegn" method="POST">
<table class="mai">
<tr>
<td>
<table class="entry">
<tr class="entry">
<th class="entry" colspan="2">
Personal Details
</th>
</tr>
<tr>
<td class="entry">
Candidate's Name :<br>
<p>(As given in Matriculation Certificate)</p>
</td>
<td class="entry">
<input type="text" name="cdname" size="35" />
</td>
</tr>
<tr>
<td class="entry">
Gender :
</td>
<td class="entry">
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" />Female
</td>
</tr>
</table>
</form>
2)
<form name="docs"
action="NewUserRegn"
method="POST"
enctype="multipart/form-data">
<table class="mai">
<tr>
<td>
<table class="entry">
<tr>
<th class="entry" colspan="2">
Documents Upload
</th>
</tr>
<tr>
<td class="entry">
Photograph : <input type="file" name="photo" accept="image/*"/>
</td>
<td class="entry">
Signature : <input type="file" name="sign" accept="image/*"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<table class="mai">
<tr>
<td>
<input type="submit"
value="Recheck"
name="recheck" /></center>
</td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>