HTML Tutorials

Setting values and using placeholders

The text box has been empty in all of the form examples so far, but this need not be the case. You can use the value attribute to specify a default value and the placeholder attribute to give the user a helpful hint about the kind of data that they should enter.

Using the value and placeholder attributes
    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <form method="post" action="http://titan:8080/form">
        <label for="name">
          Name: <input placeholder="Your name" id="name" name="name"/>
        <label for="city">
          City: <input placeholder="Where you live" id="city" name="city"/>
        <label for="fave">
          Fruit: <input value="Apple" id="fave" name="fave"/>
      <button type="submit">Submit Vote</button>

Use the placeholder attribute when you need the user to enter data, and you want to provide some context to help the user decide what data to provide. Use the value attribute to provide a default value, either because the user has previously provided this information, or because it is a common choice that is likely to be correct. You can see how the browser represents the values specified by these attributes below..