I have two problems here:
1) Place holder
2) Cursor text indent
First, I googled a bit, and know that the placeholder is a HTML5 feature and isn't support in IE8. Is there an alternate solution?
Second, in IE8, the cursor doesn't start with text indent.
HTML:
<input autofocus="autofocus" id="home_email_input" name="username" placeholder="E-mail" type="text">
<input id="home_pw_input" name="password" placeholder="PW" type="password">
CSS:
#home_email_input {
margin-left: 22px;
margin-bottom: 10px;
width: 183px;
background: url(/images/envelope.gif) no-repeat scroll 4px 3px;
text-indent: 30px;
}
#home_pw_input {
margin-left: 22px;
margin-bottom: 10px;
width: 183px;
background: url(/images/lock.gif) no-repeat 5px -0.5px;
text-indent: 30px;
}
Add line-height to get the indent work for IE
Here you go:
http://jsfiddle.net/Cernx/12/
For the placeholder, you must use javascript. There is not other alternative in HTML.
Use the webshims library to shim the placeholders in
For the text indent, just add extra left padding to the input box for IE
The alternative solution is to have labels for the input fields, instead of using placeholder as an unreliable surrogate for a label. The placeholder is supposed to help the user e.g. with a description of the expected input format, not to do the job of a label. Example:
<label for=email>E-mail:</label> <input type=email id=email name=email>
The HTML5 CR says about the placeholder attribute: “The placeholder attribute should not be used as a replacement for a label. [...] Use of the placeholder attribute as a replacement for a label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments. While the hint given by the control's label is shown at all times, the short hint given in the placeholder attribute is only shown before the user enters a value. Furthermore, placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.”
Related
I have an input box that I want to be tight to the value string within. As such, I have the input field resized on each input event, e.g.:
<input value=1 size=1 oninput='this.size=this.value.length'>
This works with the exception that both Chrome and Firefox (shown below respectively) leave additional padding on the right within the input field. Firefox being the worst.
How can I, thru CSS or inline attribute, get rid of the extra padding on the right WHILE maintaining the auto-expanding expanding feature (vis a vis this.size = this.value.length)?
UPDATE: While suggestion below fake-fix the problem, none are proper fixes. It seems, in this regards, <input> box is unredeemable. As such, I'm just moving on to using <div contenteditable=true></div>. The outline hugs the textContent tightly. Fortunately, for my use, compatibility with <form> or autocomplete features are not necessary.
It's not padding on the right side. Your text in the input is just aligned to the left. If you want to have it in the center of your input you can use text-align: center;.
input {
text-align: center;
}
<input value=1 size=1 oninput='this.size=this.value.length'>
Try this. It works fine after inputting 3 characters.
HTML:
<input style="text-align:center" type="text" value="1" size="1">
JS:
function resize(e){
len = e.target.value.length;
if(len > 3){
e.target.size = len-3;
}
else {
e.target.size = len;
}
}
document.querySelector("input").addEventListener("input",resize)
playing with width, the output seems to be very close to what you expected. See snippet below. The answer is not 100% accurate but close. Kindly adjust the code to suit your requirement.
Note:
you need a extra span element to get the exact width without extra
padding - this is because, when assigning a fixed width to calculate the width of the input box, slim values like 1 occupies less width and.
ensure the extra span element and the target input box have
some font size.
Plan to set a minimum width for the textbox when
it's empty or slim values like 1.
Hope this helps.
<html>
<style>* {
font-family: calibri;
font-size: 11px;
}</style>
<body>
<span id="d1"></span>
<input type=text value="1" style="width: 12px;" size="1" onkeyup="d1.innerText=this.value;this.style.width = d1.offsetWidth;" id="t" />
</body>
</html>
A little new to html so if further explanation is necessary or this question just doesn't make sense please feel free to say so.
I am using div to layout a webform I am designing and using the   to move text within a div doesnt always produce the result I want as far as the layout of the page.
I started experimenting and by using:
<span style="margin-left:(variable)px"></span>
i am able to move the text exactly where I want it.
My question is this, is this a bad practice? is there a better way to do what I am trying to do, or a more conventional way? Or even something built into html that I just have not discovered yet.
Thank you
* Added Block of code to show what i am trying to accomplish
Complainant's Address
<input type="text" size="50" id="complainantAddress"/>
<span style="margin-left:3px"></span>
City
<input type="text" name="city" maxlength="15" size="15"/>
<span style="margin-left:16px"></span>
State
</div>
Using non breakable spaces for layout/positioning is bad practice.
What you are trying to do with style attributes is better, but inline-style attributes are often considered as bad pratice, too.
Style attributes are hard to maintain and you duplicate lots of information etc. In addition this styling has the highest specificity and cannot be overwritten by other styles (like user CSS files). They should be used with caution.
Use CSS attributes margin, padding and text-align for this.
Sample
http://jsfiddle.net/UYUA7/
HTML
Text<br />
Text <!-- Do NOT use this -->
<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>
CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.indent {
margin-left: 20px;
}
What you're doing is actually a better way to do spacing, than relying on  s. This will give you a much greater flexibility in the long-term and allow you to make changes quicker. (Less typing)
The only other thing that I would recommend is to read through this CSS manual:
http://www.w3schools.com/css/css_intro.asp
This will help you continue to learn about position with css.
UPDATE:
This is what your code can look like:
CSS - Use it in the header
<style type="text/css">
#complainantAddress {
margin-right: 3px;
}
#city {
margin-right: 16px;
}
</style>
HTML
Complainant's Address: <input type="text" size="50" id="complainantAddress"/>
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>
Notice that I created two css styles, one for each matching input boxes. Within each style I defined a margin which would add the appropriate spacing to the right of the input box.
So the first input box called "complainantAddress" will have 3px spacing to the right and the second one who's id is "city" will have 16px spacing to the right of it.
Hi i would like to know how to change the text box in HTML to just a line rather than a box because i am trying to make a webpage look like a PDF form and for a neat outlook i would like to change the text box design to just a long line so the user can type his name or whatever the field requires him to do..
You'll probably want a more specific selector, but this should make a reasonable starting point:
input {
border-style: none;
border-bottom: solid black 1px;
}
You mean to display a <textarea> as an <input type="text">?
In html, i assume, via <textarea cols="" rows="1"> or via CSS styling the width and height of the element
For single lines of input, I'd use a <input type="text" />, which actually is the default type and can be abbreviated to just <input /> (I'm assuming xhtml in these examples).
As question really. I have an input box on my page that I would like to ignore when navigating using the keyboard tab key.
I'm using this input box as a simple bot honeytrap and positioning it off the page, so at the moment when using the tab key, it looks to the user as though nothing has focus when they tab to this element.
You can set the tabindex="-1" on this element so it's ignored in the tab order. 0 tells the browser to figure out the tab order on it's own, -1 tells the browser to ignore it.
You can use tabindex attribute to define order in which the tab key should cycle through elements. If you set tabindex="-1" the element will be skipped.
More info is available here http://www.webcheatsheet.com/HTML/controll_tab_order.php for example.
UPDATE
changed tabindex="0" to "-1" based on comments
display: none it instead.
I used workaround disabled flag on my input element, because no user input is wanted in my case :)
Example with 3 inputs:
.container {
display: flex;
flex-direction: column;
}
input {
width: 200px;
margin-bottom: 10px;
}
<div class="container">
<input placeholder="Not disabled"/>
<input placeholder="Disabled - skipped by tab" disabled/>
<input placeholder="Not disabled"/>
</div>
Hope it works well for somebody <3 - Chrome, Edge, Firefox and also "pseudo" browser IE tested.
How can I internationalize the button text of the file picker? For example, what this code presents to the user:
<input type="file" .../>
It is normally provided by the browser and hard to change, so the only way around it will be a CSS/JavaScript hack,
See the following links for some approaches:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.quirksmode.org/dom/inputfile.html
http://www.dreamincode.net/forums/showtopic15621.htm
Pure CSS solution:
.inputfile {
/* visibility: hidden etc. wont work */
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile:focus + label {
/* keyboard navigation */
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
pointer-events: none;
}
<input type="file" name="file" id="file" class="inputfile">
<label for="file">Choose a file (Click me)</label>
source: http://tympanus.net/codrops
Take a step back! Firstly, you're assuming the user is using a foreign locale on their device, which is not a sound assumption for justifying taking over the button text of the file picker, and making it say what you want it to.
It is reasonable that you want to control every item of language visible on your page. The content of the File Upload control is not part of the HTML though. There is more content behind this control, for example, in WebKit, it also says "No file chosen" next to the button.
There are very hacky workarounds that attempt this (e.g. like those mentioned in #ChristopheD's answer), but none of them truly succeed:
To a screen reader, the file control will still say "Browse..." or "Choose File", and a custom file upload will not be announced as a file upload control, but just a button or a text input.
Many of them fail to display the chosen file, or to show that the user has no longer chosen a file
Many of them look nothing like the native control, so might look strange on non-standard devices.
Keyboard support is typically poor.
An author-created UI component can never be as fully functional as its native equivalent (and the closer you get it to behave to suppose IE10 on Windows 7, the more it will deviate from other Browser and Operating System combinations).
Modern browsers support drag & drop into the native file upload control.
Some techniques may trigger heuristics in security software as a potential ‘click-jacking’ attempt to trick the user into uploading file.
Deviating from the native controls is always a risky thing, there is a whole host of different devices your users could be using, and whatever workaround you choose, you will not have tested it in every one of those devices.
However, there is an even bigger reason why all attempts fail from a User Experience perspective: there is even more non-localized content behind this control, the file selection dialog itself. Once the user is subject to traversing their file system or what not to select a file to upload, they will be subjected to the host Operating System locale.
Are you sure you're doing your user any justice by deviating from the native control, just to localize the text, when as soon as they click it, they're just going to get the Operating System locale anyway?
The best you can do for your users is to ensure you have adequate localised guidance surrounding your file input control. (e.g. Form field label, hint text, tooltip text).
Sorry. :-(
--
This answer is for those looking for any justification not to localise the file upload control.
You get your browser's language for your button. There's no way to change it programmatically.
much easier use it
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
I could achieve a button using jQueryMobile with following code:
<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label>
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>
Above code creates a "Upload" button (custom text). On click of upload button, file browse is launched. Tested with Chrome 25 & IE9.
To make a custom "browse button" solution simply try making a hidden browse button, a custom button or element and some Jquery. This way I'm not modifying the actual "browse button" which is dependent on each browser/version. Here's an example.
HTML:
<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>
CSS:
#import {
margin: 0em 0em 0em .2em;
content: 'Import Settings';
display: inline-block;
border: 1px solid;
border-color: #ddd #bbb #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font: bold 12px/1.2 Arial,sans-serif !important;
/* fallback */
background-color: #f9f9f9;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}
.hideMe{
display: none;
}
JS:
$("#import").click(function() {
$("#browser").trigger("click");
$('#browser').change(function() {
alert($("#browser").val());
});
});
Actually, it is possible to customize the Upload File button with its pseudo selector: ::file-selector-button.
Check this for more info: MDN ::file-selector-button - CSS