How do we put “plus” sign in html form?

Question

According When to encode space to plus (+) or %20? when we have any space in html form name or value, our browser will encode the space into "+", but what if we have "plus" sign in value (for example like text field) which is typed by user intentionally? Will our web server misunderstood the symbol and change it back to space? How are we going to avoid this?

Answer 1

Will our web server misunderstood the symbol and change it back to space?

No, because when a + character is entered in a form, it gets encoded to %2B .

Here's an example ( fiddle ):

<form method="POST" action="/">
    <input name="foo" type="text" value="+">
    <input name="bar" type="text" value="bacon sauce">
</form>

<script>
    // This encodes the form, (i.e. that's what your server receives)
    alert( $('form').serialize() );
</script>

The alert box will show: foo=%2B&bar=bacon+sauce

This implies that + is encoded as %2B . So on your server, just convert all + characters to a space , and %2B to + , but you should probably leave the decoding part to your framework or a library. ​

Here's a fiddle you can use to play with parameter encoding: fiddle

Answer 2

The Plus needs to be converted into the urlencoded form with the % notation. In this case %2B.