5

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

6
  • 1
    like the form having the text "http://" ?
    – joseramonc
    Dec 18, 2013 at 7:59
  • 3
    Placeholder can't be used for this. Placeholder text will go away when user starts typing Dec 18, 2013 at 8:00
  • @techfoobar The validator checks only what's IN the <input>
    – Claudio
    Dec 18, 2013 at 8:00
  • @user109899 - Ahh, right. I didn't think of that!
    – techfoobar
    Dec 18, 2013 at 8:01
  • @AzizShaikh It doesn't have to be a placeholder. Actually it should be just text in the <input> field, so the validator would recognize it.
    – Claudio
    Dec 18, 2013 at 8:01

5 Answers 5

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.

11
  • 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, 2013 at 8: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, 2013 at 8:06
  • @pwdst I do that often, can you throw me a link which says that?
    – Mr. Alien
    Dec 18, 2013 at 8: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, 2013 at 8: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, 2013 at 8:24
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://";
}
3
  • 1
    Note: This will fail if JS is disabled
    – Mr. Alien
    Dec 18, 2013 at 8:20
  • 1. You can delete it. 2. It deletes everything from the http://'s way if clicked again.
    – Claudio
    Dec 18, 2013 at 8:21
  • @Mr.Alien A user who disables javascript these days deserves to get a bad UI.
    – Nick N.
    Dec 30, 2016 at 10:55
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

2
  • 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, 2013 at 9:52
  • Thanks, it was just what I needed. Apr 24, 2019 at 23:04
1

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.