用于数字和特殊文本的HTML输入-用户友好

Question

In my html form the inputtag is supposed to be a number (so I specify number type), but some numbers have special meanings. Like the expiry in days input tag can have any number of days but if user wants to specify No Expiry I expect 0 as input so to convey that I show placeholder text

1, 2, 30, 0 (No Expiry) etc.

It doesn't seem user friendly as input can have some number initially, which hides the message and can confuse the user.

Also, I need to take input a number but also allow the user following value:

Unlimited

I don't want user to type this. What is best way to handle this?

Answer 1

Sounds like a dropdown would work if you don't have to use input tag. As you mentioned that you don't want user to type. So a simple dropdown would be like this:

<select>
  <option value="0">No Expiry</option>
  <option value="Unlimited">Unlimited</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <!-- more option -->
  <option value="3">3</option>
</select>

You can see the effect here: https://jsfiddle.net/nx1Lt86g/