I have two table rows with Date and Time values. My input fields are not centered, I aligned my tr to left. So I'm trying to center input from first tr and second tr.
Here is example: https://jsfiddle.net/dmilos89/qyq9cp7j/
HTML code:
<tr align="left">
<td class="dateTime">
<label>Pick up Date</label>
<input name="DateFrom" id="DateFrom" style="width:100px" size="10" maxlength="10" class="dtefld" value="">
<label>Pick up Time</label>
<input name="TimeFrom" id="TimeFrom" class="time" type="text" size="10" maxlength="10" value="">
</td>
</tr>
<br>
<tr align="left">
<td class="dateTime">
<label>Drop off Date</label>
<input name="DateTo" id="DateTo" style="width:100px" size="10" maxlength="10" class="dtefld" value="">
<label>Drop off Time</label>
<input name="TimeTo" id="TimeTo" class="time" type="text" size="10" maxlength="10" value="">
</td>
</tr>
If anyone knows how to fix this please let me know. Thanks.
This fixes it:
label {display: inline-block; width: 100px;}
Preview
Related
Is it possible to have html tables on a form input?
What I am trying to figure out is how to make the form input a small box, and not a box that stretches across the whole page. Hopefully this screenshot makes sense:
The code below trying to implement tables and tables rows (tr) isn't working well, any tips greatly appreciated.
<h1>GEB Research</h1>
<hr>
<fieldset>
<table>
<tr>
<h2>Create Open ADR Event</h2>
</tr>
<tr>
<form method="post" action="/trigger">
<label>VEN ID:</label>
<input type="text" name="VEN ID" value="" required><br>
<tr>
<label>Open ADR Payload Simple Signal:</label>
<input type="number" name="Payload Signal" value="" required><br>
</tr>
<tr>
<label for="starttime">Choose start date and time for event:</label>
<input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
</tr>
<tr>
<label>Event Duration in Minutes:</label>
<input type="number" name="Minutes" value="" min="30" max="720" required><br>
<small>Minimun requirement of 30 and maximum of 720 Minutes</small>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit">
</form>
use display : inline-block;
form {
display : inline-block;
}
<h1>GEB Research</h1>
<hr>
<form method="post" action="/trigger">
<fieldset>
<table>
<tr>
<h2>Create Open ADR Event</h2>
</tr>
<tr>
<label>VEN ID:</label>
<input type="text" name="VEN ID" value="" required><br>
<tr>
<label>Open ADR Payload Simple Signal:</label>
<input type="number" name="Payload Signal" value="" required><br>
</tr>
<tr>
<label for="starttime">Choose start date and time for event:</label>
<input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
</tr>
<tr>
<label>Event Duration in Minutes:</label>
<input type="number" name="Minutes" value="" min="30" max="720" required><br>
<small>Minimun requirement of 30 and maximum of 720 Minutes</small>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit">
</form>
Add width: fit-content to fieldset css. You should also fix your tags (<form> has interesting placement)
fieldset {
width: fit-content;
}
<h1>GEB Research</h1>
<hr>
<form method="post" action="/trigger">
<fieldset>
<table>
<tr>
<h2>Create Open ADR Event</h2>
</tr>
<tr>
<label>VEN ID:</label>
<input type="text" name="VEN ID" value="" required><br>
<tr>
<label>Open ADR Payload Simple Signal:</label>
<input type="number" name="Payload Signal" value="" required><br>
</tr>
<tr>
<label for="starttime">Choose start date and time for event:</label>
<input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
</tr>
<tr>
<label>Event Duration in Minutes:</label>
<input type="number" name="Minutes" value="" min="30" max="720" required><br>
<small>Minimun requirement of 30 and maximum of 720 Minutes</small>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit">
</form>
Trying to get the input fields of my html to align up with the other input fields.
Is there a way to make it aligned without using CSS?
This is what I have :
Name:|-----Input-------|
Password:|-----Input-------|
Confirm password:|-----Input-------|
Email:|-----Input-------|
Phone:|-----Input-------|
Trying to make it like this:
Name:.....................|-----Input-------|
Password:..............|-----Input-------|
Confirm password:|-----Input-------|
Email:.....................|-----Input-------|
Phone:...................|-----Input-------|
(without the dots)
Code:
<form>
<label>Name:</label>
<input type="text" name="namefield" align="center"> <br />
<label><br>Password: </label>
<input type="password" name="pwdfield"> <br />
<label><br>Confirm password: </label>
<input type="password" name="cpwdfield"> <br />
<label><br>Email: </label>
<input type="email" name="email"> <br />
<label><br>Phone: </label>
<input type="tel" name="phone"> <br />
<br>
<input type="submit" value="Register" />
</form>
Using the table tag without borders allows one to align textboxes without css.
<FORM>
<TABLE frame="box">
<TR><TD>Your name</TD> <TD><INPUT TYPE="TEXT" NAME="name" SIZE="25"></TD> </TR>
<TR><TD>Password</TD> <TD><INPUT TYPE="TEXT" NAME="pwdfield" SIZE="25"></TD> </TR>
<TR><TD>Confirm password</TD> <TD><INPUT TYPE="TEXT" NAME="cpwdfield" SIZE="25"></TD> </TR>
<TR><TD>E-mail</TD> <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD> </TR>
<TR><TD>Phone</TD> <TD><INPUT TYPE="TEXT" NAME="phone" SIZE="25"></TD> </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Register" NAME="B1"></P>
</FORM>
I was trying to make a form with a username, password and an email. But for some reason the input text or the box for email isn't aligned with the boxes for the username and the password. I was wondering if there's a way to make them all align each other.
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" maxlength="30"><br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">Email</label>
<input type="email" id="email" name="email" maxlength="30">
<br>
<input type="submit" value="Register">
</form>
It's just for the sake of making everything look nice and pretty.
Oh man... Tables?? HTML from '90s incoming!
<style>
label {
width: 80px;
display: inline-block;
}
</style>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" maxlength="30"><br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">Email</label>
<input type="email" id="email" name="email" maxlength="30">
<br>
<input type="submit" value="Register">
</form>
I went for a different approach than a table, since if your are going to table up your form, I suggest you use a solid css framework, which is simply better.
This is the approach of CSS only A Cool Fiddle
form {
width: 80%;
margin: 0 auto;
}
label, input {
/* in order to define widths */
display: inline-block;
}
label {
width: 30%;
/* positions the label text beside the input */
text-align: right;
}
label + input {
width: 30%;
/* large margin-right to force the next element to the new-line
and margin-left to create a gutter between the label and input */
margin: 0 30% 0 4%;
}
/* only the submit button is matched by this selector,
but to be sure you could use an id or class for that button */
input + input {
float: right;
}
input[type="submit"]{
margin: 4% 40%;
}
With all that said, I also suggest you change the old way of forms being written with label values to placeholder.
for more reference Placeholders are cool!
<form>
<table>
<tr> <td> <label for="username">Username</label> </td> <td> <input type="text" id="username" name="username" maxlength="30"> </td> </tr>
<tr> <td> <label for="password">Password</label> </td> <td> <input type="password" id="password" name="password"></td> </tr>
<tr> <td> <label for="email">Email</label> </td> <td><input type="email" id="email" name="email" maxlength="30"></td> </tr>
<tr> <td></td> <td> <input type="submit" value="Register"> </td> </tr>
</table>
</form>
should work, just surroundet it with a table.
<table>
<form>
<tr>
<td> <label for="username">Username</label></td>
<td> <input type="text" id="username" name="username" maxlength="30"> </td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" id="email" name="email" maxlength="30"></td>
</tr>
<tr>
<td><input type="submit" value="Register"></td>
</tr>
</form>
</table>
It is always a good practice to make any form in either a Table or in a Div.
I am new to HTML alignment. I have three input fields but they are not properly aligned.
<form>
username:<input type="text" name="username" value="ENTER NAME HERE" /><br>
id:<input type="text" name="id" value="ENTER ID HERE" /><br>
age:<input type="text" name="age" value="ENTER AGE HERE" />
</form>
Please help me align using colspan or rowspan so the input fields look good one below the other.
Try this..
It's work properly as HTML alignment vise
<form>
<div style="width:300px">
<div style="float:left">username:</div><div style="float:right"><input type="text" name="username" value="ENTER NAME HERE" /></div><br>
<div style="float:left">id:</div><div style="float:right"><input type="text" name="id" value="ENTER ID HERE" /></div><br>
<div style="float:left">age:</div><div style="float:right"><input type="text" name="age" value="ENTER AGE HERE" /></div>
</div>
</form>
Try this:
<div id="userdata">
<div><label>Enter Name</label><input type="text" /></div>
<div><label>Enter Id</label><input type="text" /></div>
<div><label>Enter Age</label><input type="text"/></div>
</div>
Use them in a table:
<div id="userdata">
<table>
<tr>
<td>Enter Name</td><td><input type="text" /></td>
</tr>
<tr>
<td>Enter ID</td><td><input type="text" /></td>
</tr>
<tr>
<td>Enter Age</td><td><input type="text" /></td>
</tr>
</table>
</div>
<TR>
<TD VALIGN="top">
<LABEL FOR="disabilities">5. Do you have any disability which may limit your-----------
<BR>
ability to perform the essential functions of the job
<BR>
for which you are applying?<FONT COLOR="#FF0000"><SUP>*</SUP></FONT>
</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="disabilities" MAXLENGTH="3" SIZE="6" onFocus="javascript:toggleMsg('msg-23')" onBlur="javascript:toggleMsg('msg-23')" MAXLENGTH="20">
<SPAN ID="msg-23" CLASS="msg" STYLE="visibility:hidden;">Yes or no</SPAN><editcheck="req=Y=Please enter yes or no.">
</TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD VALIGN="top">
<LABEL FOR="ifyes">If yes, describe----------------------------------------------</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="ifyes" MAXLENGTH="50" SIZE="60" onFocus="javascript:toggleMsg('msg-24')" onBlur="javascript:toggleMsg('msg-24')" MAXLENGTH="20">
<SPAN ID="msg-24" CLASS="msg" STYLE="visibility:hidden;">If no, put N/A.</SPAN><editcheck="req=Y=Please enter descriptions of disabilities.">
</TD>
</TR>
<TR>
<TD VALIGN="top">
<LABEL FOR="accommodate">What can we do to accommodate you?---------------------</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="accomodate" MAXLENGTH="50" SIZE="60" onFocus="javascript:toggleMsg('msg-25')" onBlur="javascript:toggleMsg('msg-25')" MAXLENGTH="20">
<SPAN ID="msg-25" CLASS="msg" STYLE="visibility:hidden;">If none, type N/A</SPAN><editcheck="req=Y=Please enter accommodations.">
</TD>
</TR>
Ignoring the javascript since it doesn't work yet and is part of another question, How do I set this up so I have a checkbox next to disabilities. Click on yes, it shows "ifyes" and "accommodate" click on no, it doesn't show it. How do I do that?
You will need to put some javascript in to make it work. I have put together a real quick test for you. Feel free to modify it to suit your needs.
JavaScript
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.visibility = 'visible';
}
else document.getElementById('ifYes').style.visibility = 'hidden';
}
</script>
HTML
<label for="yesCheck">Yes</label> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
<label for="noCheck">No</label> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="visibility:hidden">
<label for="yes">If yes, explain:</label>
<input type='text' id='yes' name='yes'><br>
<label for="acc">What can we do to accommodate you?</label>
<input type='text' id='acc' name='acc'>
</div>
Demo - http://jsfiddle.net/QAaHP/