If you want users to be able to type then you need an input field of type text (or password, email, etc.):
- html Code
<input type="text" class="text_input" />
which you would then styled as before by targeting the .text_input class (or all <input>s; as you choose).
However, I would recommend recreating the image in CSS, if you can live with it not looking perfect in (older versions of) Internet Explorer (although there are also workarounds for that).
Gradients and rounded corners can easily be recreated in pure CSS:
(note, I am only using unprefixed version, google for support)
- css Code
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
To easily create gradients in CSS, look at this awesome tool, which also spits out all the prefixed versions for easy copy and paste: http://www.colorzilla.com/gradient-editor/
Just to sum things up:
There are different types of <input>s. In my first example I used a button, which is used for clicking. "text" for regular text inputs and "password" for "hiding" the users input.