I have the following code that basically is a input form as I have it now the spacing between the title of each field and the field are all lined up properly when executed on my browser but when I try it on another browser some of the spacing is off, what is the best way to align the input so that it will render the same on all browsers?
<div style="z-index:12; position:absolute">
<font style="color:#FF6600; font-family:pirulen">
*Name: <input type="text" name="name" style=" margin-left:70px" size="30px" /><br/>
*Email: <input type="email" name="email" style="margin-left:70px; margin-top:5px; " size="30px" /><br/>
Company: <input type="text" name="company" style="margin-left:28px; margin-top:5px" size="30px" /><br/>
Address: <input type="text" name="address" style="margin-left:30px; margin-top:5px" size="30px" /><br/>
Address 2: <input type="text" name="address2" style="margin-left:10px; margin-top:5px" size="30px" /><br/>
City: <input type="text" name="city" style="margin-left:92px; margin-top:5px" size="30px" /><br/>
State: <input type="text" name="state" style="margin-left:65px; margin-top:5px" size="30px" /><br/>
Zip: <input type="text" name="zip" style="margin-left:106px; margin-top:5px" size="30px" /><br/>
*Phone: <input type="text" name="phone" style="margin-left:58px; margin-top:5px" size="30px" /><br/>
*Comments:<textarea style=" margin-left:12px; margin-top:5px; vertical-align:top; resize:none" name="comments" cols="30" rows="10" draggable="false"></textarea><br/>
<input type="submit" value="Submit" style="margin-left:150px" />
Thanks
This pretty well covers it:
http://www.alistapart.com/articles/prettyaccessibleforms
A styled unordered list, labels and inputs.
Just use a table, with labels (titles) in one column, fields in another. Having done that, you can then easily test different stylistic settings. The default rendering (fields aligned to the left) is not too bad, but consider right-aligning the labels; you may find this even better. You won’t need any pixel widths, since browsers automatically make each column as wide as needed for its widest cell contents. No other approach does this, except the use of CSS to simulate an HTML table (a clumsier way, which does not work on many versions of IE still in use).
Related
I want to trigger the number keypad, email keypad and tel keypad in all touch devices without using any input types.
<input type="text" value="" class="text-box number">
<input type="text" value="" class="text-box email">
<input type="text" value="" class="text-box tel">
if it possible through jquery also fine.
Due our comments in the main post, the only choice is javascript.
According with your original HTML:
<input type="text" value="" class="text-box number">
<input type="text" value="" class="text-box email">
<input type="text" value="" class="text-box tel">
I can make some changes (for example, add a data-type custom attribute, see the following HTML) and then the javascript block:
$(document).ready(function() {
// iteration through all elements that matches
$('.text-box[data-type]').each(function() {
//replace the type
$(this).attr('type', $(this).attr('data-type'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" value="" data-type="number" class="text-box">
<input type="text" value="" data-type="email" class="text-box">
<input type="text" value="" data-type="tel" class="text-box">
This will not work in IE9 or less since it doesn't allow to change dynamically the type of an input, but in the rest of browsers it will work perfectly.
This is my html
<form action="" id="form">
<label for="name">NAME:</label>
<input class="inputfield" type="text" name="name" placeholder="Full name">
<br>
<label for="email">E-MAIL:</label>
<input class="inputfield" type="email" name="email" placeholder="Email adress">
<br>
<label for="subject">SUBJECT:</label>
<input class="inputfield" type="text" name="subject" placeholder="Subject">
<br>
<label for="message">MESSAGE:</label>
<textarea cols="50" rows="4" class="textarea" name="message" placeholder="Message"></textarea>
<br>
<input class="submitform" type="submit" name="submit" value="Send">
</form>
and it linked to bootstrap. and to another simple css file.
It works good in all the other sizes. I tried some things but nothing works.
Thanks.
Chances are you're additional stylesheet is overriding the Bootstrap CSS because of a media query you may have added to it.
Or have you done anything to the Bootstrap CSS itself instead of using a new stylesheet to override it?
Check your stylesheet and if your stylesheet isn't too large you should post it if you still need help.
i have a form on a div with check boxes, the check boxes are to low in relationship to the line of the text,
what is missing to make it align vertically?,, thanks!
<div id="dialog-form2" title="Titulo">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Your name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Your email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="email">Your phone number</label>
<input type="text" name="phone" id="phone" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Your Member Number</label>
<input type="password" name="password" id="password" value="" class="text ui-widget- content ui-corner-all" />
<br>
Enquiry<br>
<input type="checkbox" name="option1" value="Milk"> I would like to r <br>
<input type="checkbox" name="option2" value="Butter">I need a h <br>
<input type="checkbox" name="option2" value="Butter">Please email me with offer details<br>
<input type="checkbox" name="option2" value="Butter">Please call me to discuss offer<br>
<input type="checkbox" name="option2" value="Butter">Other?<br>
</fieldset>
</form>
</div>
it's hard to answer this without knowing what your style sheet is looking like. Even your font / font size will affect this to some degree. For instance, just pasting your code into a blank html file and bringing it up in a browser alignment is slightly off because it's using Times for the font for me, but then if i change the body font to arial it lines up great. Just having only this snipped with no associated css makes it hard to answer the question as clearly as you might need.
totally weird and I couldn't fix it so that it was centered...finally I played around with different width % and came to the conclusion that decreasing the % allowed it to center....but it seems backwards....can someone just explain why its doing this....i mean I got it to work but I don't want to burn that technique in my brain if its only a coincedence or something....please explain
HTML CODE
<form action="mailto:info#saucysbulldogs.com" method="post">
<input type="text" id="fName" maxlength="20" size="30" placeholder="First Name" required="required" autocomplete="on"><br />
<input type="text" id="lName" maxlength="20" size="30" placeholder="Last Name" required="required" autocomplete="on"><br />
<input type="email" id="email" maxlength="30" size="30" placeholder="Email" required="required" autocomplete="on"><br />
<textarea name="message" rows="5" cols="30" maxlength="100" wrap="hard" placeholder="Message..." required="required" /></textarea></p>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="clear" value="Clear" />
</form>
</body>
</html>
Here is the css code for the form....I tried 100% and it didn't work...then finally had to get down to 25% in order to center it....you can see it at www.saucysbulldogs.com
form {
padding:10px;
width:25%;
margin-left:auto;
margin-right:auto;
}
thanks
That you can't center an element with a width of 100% should be pretty clear for you.
When you keep the percentage lower and the margin at 0 auto it get's centered.
But there is no need to go down to 25%.
When I look to your url I see no problem. Your form there has a width of 85% and is centered in its parent container.
I have two input elements.
One is to put your email and the other is the email text.
How do I make the email input big enough to put a lot of text in it and be able to space down and stuff?
thanks
<form method="post" action="ttp.actions.emailAction.action">
<h3>Email</h3>
<input name="email" id="email"/><br /><br />
<h3>Message</h3>
<input name="message" size="50" id="message"/>
<br />
<br />
<input type="submit" value=" Send "/>
</form>
use textarea instead of input
<textarea name="email" id="email" rows="25" cols="80">Write stuff here...</textarea>
instead and you can set the size and other properties (scrolling etc...) using CSS.
textarea{
width: 640px;
height: 200px;
}
Check out the size attribute.
<input type="text" size="25" />
Use textarea for large texts instead of input fields:
<textarea rows="5" cols="25"></textarea>
Here is an example of different methods to make input larger