my html code is
<tr>
<td>User ID:</td>
<td><input type="text" id="uid" size="20"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="pass" size="20"></td>
</tr>
<tr>
but the problem is, password textbox length is coming diffrent in IE, means uid size is 20 but pass size is around 17.
Try using style="width:200px" for example rather than specifying size that way.
<input type="text" id="uid" style="width:200px;">
<input type="password" id="pass" style="width:200px;">
Or you can create a class in the CSS like this:
.input{
width:200px;
}
And use like this:
<input type="text" id="uid" class="input">
<input type="password" id="pass" class="input">
You can fix it with width: 150px; (with CSS).
In CSS file :
input {
width: 150px;
}
Or in inline CSS : style="width: 150px;" .
Edit : Grilled :) .
Related
I am doing a calculator and maxlenght is not working. After I set maxlength to 12, when clicking calculator buttons it do more then 12.
<input type="text" maxlength="12" name="display" id="result" disabled placeholder="0">
This is essentially the html from your comment. The maxlength property of an input tag only applies when the user is typing into it. When you set the result programmatically, it is not respected.
document.getElementById("result").value = "1234567890123456";
<div id="history" placeholder="0"></div>
<input type="text" maxlength="12" name="display" id="result" disabled placeholder="0">
<table>
<tr>
<td>
<input type="button" class="buttons1" value="7" onclick="calculator.display.value += '7'" />
</td>
</tr>
</table>
I'm not sure what you are asking, but the following works:
<input type="text" maxlength="12" name="display" id="result" placeholder="0">
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
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've got following auto generated HTML, which I can not change.
This HTML displays the message in em before the input field, however I need to move it to the right side of the input field.
I have tried using float right to the em, but it does not work.
I'll appreciate any help.
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
CSS Only solution (which I don't recommend, but works)
The jsfiddle: http://jsfiddle.net/rLhTs/
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="name_email" name="name_email">
</td>
</tr>
</table>
CSS:
.form-field:nth-child(1):after {
content:"Email is required.";
}
.form-field:nth-child(2):after {
content:"Name is required.";
}
You'll just have to declare the :after content for nth-child and you'll need to know specifically what you're trying to replace.
This is a JavaScript solution:
Check out this jsFiddle: http://jsfiddle.net/E8dJ9/3/
I've expanded it to show you it could work for any number of rows. You may have to refine this a bit depending on your real specific use case.
And the code for completeness:
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="user_name" name="user_name">
</td>
</tr>
</table>
JavaScript (using jQuery):
$('th[scope="row"]').each(function(index, value) {
var em = $(this).find('em').text();
$(this).parent().find('td').append('<em>' + em + '</em>');
});
CSS:
.form-field th em {
display: none;
}
Try something like:
label {
float:left;
}
em {
float: right;
}
input {
float:left;
}
Although this will put the em on the farthest right spot of the parent container. Considering it is in a table it might work as is, can't test unless we have the full HTML with the opening table tags, etc.
If you are unable to do, use HTML5 validation for email in the input field
<input type="email" title="enter the email in correct format" required="true"/>
whenever the user clicks the submit button without entering the email or entered the email in wrong format, the form will not be submitted and error will be displayed.
i am trying to recreate the login form shown on tinypic's main page.
in html, i have the 3 elemnts like this:
E-Mail:
<input type="text" name="id" maxlength="30" value="" />
Password:
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
i have tried putting them into separate divs,
using float:left with a unique class in css
but the code is really messy unreasonably long.
so essentially, i wanted to know if there was a simple way to achieve this layout with html and css.
thanks for the time!
This CSS should work, though I haven't tested:
input { display: inline; }
Here is my solution: ( http://jsfiddle.net/HcppN/ )
HTML:
<label>E-Mail:</label>
<input type="text" name="id" maxlength="30" value="" />
<label>Password:</label>
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
CSS:
input, label {
float:left;
margin:5px;
}
I also recommend you to encapsulate the labels in <label> tags. You can even use the for="inputId" attribute, so that clicking on the label brings the input into focus.
Just add display:inline to your input elements, as shown here
Though there are already accepted and up voted answers, I just want to contribute a way to make a form horizontal without any kind of CSS. Using HTML table is an effective way to make a horizontal form.
Example 1:
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname" > </td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" > </td>
</tr>
</table>
</form>
Example 2:
<form method="">
<table>
<tr>
<td><input type="text" name="fname" ></td>
<td><input type="text" name="lname" ></td>
........................
</tr>
</table>
</form>
My experience says, sometimes in different cases the CSS/class may not work or sometimes they may conflict ; but using an HTML table to make an HTML form is something like forcing to be what we want to be appear. Thank you.