HTML - Undeletable placeholder in input element

Question

I have an URL field in my form. The validator requires for it to have http:// in front of it, which I think many people won't understand.

Could I have a "placeholder" that the user cannot delete or write before it?

Example: http:// myinputhere.com

<input type="url" placeholder="http://">

Placeholder can't be used for this. Placeholder text will go away when user starts typing — Aziz Shaikh, Dec 18 '13 at 08:00
@AzizShaikh It doesn't have to be a placeholder. Actually it should be just text in the field, so the validator would recognize it. — Claudio, Dec 18 '13 at 08:01
@techfoobar That won't work as the input will not validate the input with the http:// or https:// and users will think they don't have to enter it. — pwdst, Dec 18 '13 at 08:02

Mr. Alien · Accepted Answer · 2013-12-18T08:19:45.767

3

Placeholder doesn't concatenate the placeholder text to the user entered text, it's just for any information you would like to provide to your users, like some programmers do not use label instead they write placeholder for example

<input type="text" placeholder="Enter Username Here" />

So here you can do that is, either you can have a predefined http:// value..

<input type="url" value="http://" />

Or you can use JavaScript or jQuery for client side validation instead of HTML5 type="url" which will give only meaning to your semantics but you cannot rely on HTML5 validation only.

Also if you want to preserve your semantics by using type with a value of search or url than you can disable the HTML5 validation using novalidate attribute for your form tag.

OR

You can use multiple field, one with type set to url and other to text and you can concatenate both the field values ..

input[type=url] {
    width: 40px;
}

<input type="url" value="http://" readonly />
<input type="text" />

Demo

Note: Using client side validation like HTML5 and JavaScript can be easily disabled by your users, I would recommend you to have a server side validation if this matters to you alot.. But relying on client side validation ONLY is not good.

edited Dec 18 '13 at 08:19

answered Dec 18 '13 at 08:02

Mr. Alien

153,751
34
298
278

Using placeholder instead of label is strictly forbidden by the HTML 5 standard - can you change the emphasis in your answer from *instead of* to *additional information*. – pwdst Dec 18 '13 at 08:06
I'm really new to JS, so I'd appreciate if you'd give me an example of the code. `Value` works fine, but it can be deleted, which isn't good. – Claudio Dec 18 '13 at 08:06
@pwdst I do that often, can you throw me a link which says that? – Mr. Alien Dec 18 '13 at 08:09
@user109899 JS validation or HTML5 validation can be easily hacked using console, so don't rely on that, I can also create a separate field for `http://` with a `readonly` attribute but that can be hacked as well – Mr. Alien Dec 18 '13 at 08:10
@Mr.Alien It's not some top-secret-level website that needs an unhackable validation, but just a working one that filters most of the spam. – Claudio Dec 18 '13 at 08:24
@Mr.Alien I have a PHP validator. – Claudio Dec 18 '13 at 08:28
@user109899 The way you were worried seemed like it's top secret and if you are using PHP than why don't you add `http://` using PHP + Regex, why you are relying on client side than... you can refer this http://stackoverflow.com/questions/2762061/how-to-add-http-if-its-not-exists-in-the-url – Mr. Alien Dec 18 '13 at 08:29
@Mr.Alien The W3C spec is more forgiving and has a more advisory tone, but the WHATWG spec states "The placeholder attribute **should not be used as an alternative to a label**. For a longer hint or other advisory text, the title attribute is more appropriate." - http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute. See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder and http://blog.paciellogroup.com/2011/02/html5-accessibility-chops-the-placeholder-attribute/ – pwdst Dec 18 '13 at 09:00
@pwdst well I guess it's a matter of UX and not of valid and invalid yea? Cuz I am damn sure it's not invalid to use `input` with a `placeholder` without a `label` :) even gmail uses it, it's just a matter of UX – Mr. Alien Dec 18 '13 at 09:21
@Mr.Alien This is a serious accessibility issue, and Google do at least add labels which are visually hidden for accessibility purposes if you look at the source (including GMail). Pages always *used* to fail validation if a label was not present and IMHO still should, but with the changed tone of the W3C specification (it used to be more prescriptive in this area) it is possible it no longer does. I'd strongly encourage you to *at least* add a hidden label to forms. This may also be a minimum legal requirement where disability access laws exist. – pwdst Dec 18 '13 at 09:48
@pwdst Well, am not saying you are wrong, am just saying that it is not invalid, we are not talking about the UX here, it depends on OP how to use it.. I just focused on what the question was, no one is talking about accessibility so it's fine :) – Mr. Alien Dec 18 '13 at 09:56

score 2 · Answer 2 · answered Dec 18 '13 at 08:08

2

Why don't you use javascript in order to do so. I assume that you have any HTML tag like this

<input id="test" type="url" onclick="testJS()" placeholder="http://">

and try this following javascript

function testJS(){
   var a = document.getElementById("test");
   a.value = "http://";
}

answered Dec 18 '13 at 08:08

Yoshua Joo Bin

517
3
6
15

1

Note: This will fail if JS is disabled – Mr. Alien Dec 18 '13 at 08:20
1. You **can** delete it. 2. It deletes everything from the `http://`'s way if clicked again. – Claudio Dec 18 '13 at 08:21
@Mr.Alien A user who disables javascript these days deserves to get a bad UI. – Nick N. Dec 30 '16 at 10:55

score 1 · Answer 3 · answered Dec 18 '13 at 08:49

1

You can display a span element over the input like this:

HTML:

<div class="wrapper">
    <input type="url" />
    <span>http://</span>    
</div>

CSS:

.wrapper {
    position: relative;
}
input {
    padding-left: 48px;
}
.wrapper span {
    position: absolute;
    left: 2px;
}

Example

answered Dec 18 '13 at 08:49

EasyDevop

135
1
1
8

Without wanting to seem like I'm picking on you, how does this help make the input value valid in the event that the user omits the protocol (http:// or https://) from their URL? If anything the fact that http:// is provided it will make the user more likely to omit the protocol as it appears it has already been provided for you. It also precludes https:// sites. I have not voted you down this time, but please consider your answer. – pwdst Dec 18 '13 at 09:52
Thanks, it was just what I needed. – Francisco Sandi Apr 24 '19 at 23:04

score 1 · Answer 4 · answered Dec 18 '13 at 09:42

No, you cannot have initial content that cannot be deleted.

The question implies a wrong approach because a) users may need to delete http:// e.g. if they need to enter an https: URL, b) placeholders aren’t for this, c) if you use value="http://", it’s not a meaningful default value and it makes the control initially invalid, d) if you use type="url", you are asking for a control that takes an absolute URL as value and leaving it to browsers to implement that.

What you can do to help users who don’t know how to type an absolute URL is to use a title attribute, which has a special function in a context like this: its value will appear in an error message shown by the browser, if the user tries to submit the form when the control value is invalid. Example:

<input type="url" title="An absolute URL (usually starts with http://)">

score 0 · Answer 5 · answered Dec 18 '13 at 08:11

You can either use Javascript and jQuery to do this. (still searching for solution)

Or you can put the http:// text in the text box with:

<input type='url' value='http://'>

Or you can add some text in front of the text box and then accept the input to be without the http:// text

<p style='display: inline-block'>http://</p><input type='url' style='display: inline-block'>

You can also use css positioning to show a span element on the input box and then add padding to the input box so that the user input won't go over the span element.

HTML - Undeletable placeholder in input element

5 Answers5