HTML - How to prevent user from editing form's value?

Question

I am developing a simple web apps that allowed user to key in information using a form when I discovered I could edit that form's input default value using Chrome -> Check Element and submit the page with a different hacked value.

Code:

<input id="radioOk_100237" name="radio_100237" type="radio" checked="" value="0"> 

As normal, I load the page then using Google Chrome Check Element, I targeted this checkbox and changed the value to "9" before submitting it, in my background page, it reads "9" instead of pre-set value of "0" from this input element.

If every user changed the value and submit, it will completely thrashed my DB. How is this possible and am I supposed to encrypt the page or do something prior to submitting? I am totally lost, btw I am using PHP.

Answer 1

For typical users, you can just add the attribute readonly to the form field(s).

For more advanced users/hackers that try to manipulate your server, you need to validate every piece of data that is submitted to ensure that tampering is caught and rejected. There is no client-side technique for this that is tamper-proof.

Answer 2

You need to be doing server-side validation, to make sure the values you get from your client app make sense. If you know that a value of "9" will "thrash your DB", don't accept values of 9 from the client.

Obligatory XKCD link: http://xkcd.com/327/