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://">

Answer 1

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.

Answer 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://";
}