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>
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>
I want to send the total value of this table to an email. I wrapped the mailto around the table but there was no success is doing that. Am I missing something here? I would like to embed this on a wix website.
<form action="mailto:someone#gmail.com" method="post" enctype="text/plain"> <tr>
<td>Patio Set/Workshop Table/Gun Cabinet</td>
<td>
<input type="text" value="" name="7QTY5" id="7QTY5" onKeyUp="multiply()" />
</td>
<td style=display:none;>
<input type="text" name="7PRICE5" id="7PRICE5" value="25" readonly/>
</td>
<td style=display:none;>
<input type="text" name="7TOTAL5" id="7TOTAL5" />
</td> <input type="button" name="Submit1" value="Calculate" onclick="javascript:add()"/><br> Total:
<input type="text" name="9TOTAL" id="9TOTAL" readonly/> <br>
<input type="button" name="Submit2" value="Calculate" onclick="javascript:calculate()"/><br>
<input id= "result" type= "text" value="0"/> Final Result<br/>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
Here is a sample code I got from my textbook and for some reason it's not displaying correctly. I just can't find the error.
It only show the second input text field "surname" and not the first input text "First name" also.
<html>
<head><title>Holiday Program</title></head>
<body style="background-color:cyan">
<form action="HolidayChoice.jsp"> <!--also try this with method="post"-->
<center>
<table style="background-color:lightblue”>
<tr>
<td>First Name<input type="text" name="clientFirstName"></td>
<td>Surname<input type="text" name="clientSurname"></td>
</tr>
<tr>
<td>Location :<br/>
<input type="radio" name="location" value="ocean"
checked=”true”>Ocean<br/>
<input type="radio" name="location" value="lake">Lake<br/>
<input type="radio" name="location" value="nature">
Nature Reserve<br/>
<input type="radio" name="location" value="casino">Casino<br/>
</td>
<td>Accommodation Type :<br/>
<input type="checkbox" name="hotel" value="1">Hotel<br/>
<input type="checkbox" name="camping" value="1">Camping<br/>
<input type="checkbox" name="caravan" value="1">Caravan<br/>
<input type="checkbox" name="bungalow" value="1">Bungalow
</td>
</tr>
<tr>
<td colspan="2">
<center>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</center>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
You're using ” instead of " at line 6
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
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>