Setting Values and Using Placeholders

Description

You can use the value attribute to specify a default value and the placeholder attribute to give the user a helpful hint.

Example

The following code shows these attributes in use.


<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: 
      <input placeholder="Your name" id="name" name="name" />
      </label>
    </p><!--from  www  . j av a 2s  .c o  m-->
    <p>
      <label for="city"> City: 
      <input placeholder="Where you  live" id="city" name="city" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: 
      <input value="Apple" id="fave" name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>
</body>
</html>

Click to view the demo

When you use the button element to reset the form, the browser restores the placeholders and the default values.





















Home »
  HTML CSS »
    HTML »




HTML Introduction
HTML Document
HTML Section
HTML Group Content
HTML Text Marker
HTML Table
HTML Form
HTML Embed