Aligning HTML tags properly - html

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>

Related

html tables on form input

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>

How to align input fields?

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

Organizing my text fields in html

Trying to organize my text fields the way I want.
What I want:
-username feild at the top
-first and last name underneth and next to each other
-password and confirm underneth name and next to each other
I am new to html and having trouble organizing it. Not sure to use div, section, etc.
Also want everything to be centered and not aligned to the left and I want to add an image below all the text fields and have the add child btn underneth that.
here is the code:
<form>
<label-popup for="contact">
<span-popup>USERNAME *</span-popup>
<input type="text" id="contact" />
</label-popup>
</form>
<form>
<div>
<label-popup for="company">
<span-popup>FIRST NAME *</span-popup>
<input type="text" id="company" />
</label-popup>
<label-popup for="contact">
<span-popup>LAST NAME *</span-popup>
<input type="text" id="contact" />
</label-popup>
<label-popup for="contact">
<span-popup>PASSWORD *</span-popup>
<input type="text" id="contact" />
</label-popup>
<label-popup for="contact">
<span-popup>CONFIRM PASSWORD *</span-popup>
<input type="text" id="contact" />
</label-popup>
</div>
</form>

I will suggest you to use table rather than div or section it will be easy for you.
I will provide you simple table structure for your design.
<table border="0" align="center">
<tr>
<td>User Name <input type="text" /></td>
</tr>
<tr>
<td>First Name <input type="text" /> </td>
<td>Last Name <input type="text" /> </td>
</tr>
</table>
Now add your fields in this table.

Align Input fields in HTML without css

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>

How to control auto form fill

my question is how to control fill entries in textfield.
http://support.mozilla.org/en-US/kb/control-firefox-automatically-fills-in-forms
In my app I have page with login form which have username textField. Then I have registration page with email textField. Now I have problem that firefox rember entries which I enter to username textField also in email textField. But when I enter value to email textField firefox does rember it. Same with chrome browser
form1
<form wicket:id="signInForm">
<table>
<tr>
<td align="right"><wicket:message key="username">
Username
</wicket:message></td>
<td><input wicket:id="username" type="text" /></td>
</tr>
<tr>
<td align="right"><wicket:message key="password">
Password
</wicket:message></td>
<td><input wicket:id="password" type="password" /></td>
</tr>
<tr wicket:id="rememberMeRow">
<td></td>
<td><input wicket:id="rememberMe" type="checkbox" /> Remember
Me</td>
</tr>
<tr>
<td></td>
<td><input class="tournamentButton" type="submit"
wicket:id="signIn" value="Sign In" /> <input class="tournamentButton"
type="reset" value="Reset" /> <input class="tournamentButton"
type="submit" wicket:id="register" value="Register" /></td>
</tr>
</table>
</form>
form2
<form class="userform" wicket:id="userEditForm">
<fieldset>
<legend>
<wicket:message key="user">
User
</wicket:message>
</legend>
<div>
<label wicket:for="name"><wicket:message key="name">
Name:
</wicket:message></label><input type="text" wicket:id="name" />
</div>
<div>
<label wicket:for="surname"><wicket:message key="surname">
Surname:
</wicket:message></label><input type="text" wicket:id="surname" />
</div>
<div>
<label wicket:id="userNameLabel" /> <input type="text"
wicket:id="userName" />
</div>
<div>
<label wicket:for="email"><wicket:message key="email">
Email:
</wicket:message></label><input type="email" wicket:id="email" />
</div>
<div>
<label wicket:for="password"><wicket:message key="password">
Password:
</wicket:message></label><input type="password" wicket:id="password" />
</div>
<div>
<label wicket:for="confirmPassword"><wicket:message
key="confirmPassword">
Confirm Password:
</wicket:message></label><input type="password" wicket:id="confirmPassword" />
</div>
<div>
<label wicket:id="platnostLabel" /> <input type="text"
wicket:id="platnost" />
</div>
<div>
<label wicket:id="roleLabel" /><input type="text" wicket:id="role" />
</div>
</fieldset>
<div>
<input class="tournamentButton" type="submit" wicket:id="submit"
value="Save" /> <input class="tournamentButton" type="submit"
wicket:id="back" title="back" value="Back" />
</div>
</form>

In your HTML add the attribute autocomplete="off" to input fields where you dont want browsers to remember that information. For example:
<input type="text" autocomplete="off" wicket:id="userName" />
EDIT: 02.2018:
Browser behavior changed over time and now for login and password fields autocomplete off is not supported in modern browsers:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields