The value Attribute

The Current State of HTML5 Forms

<input type="text"     name="data"   value="Prefilled data">
<input type="checkbox" name="toggle" value="Send to server">
<select name="select">
	<option value="cat">One</option>
	<option value="dog">Two</option>
<input type="submit"   name="button" value="Check the URL">

Live Demo









The Low Down

The value attribute is used to set the value of <input> elements: it defines the value associated with the input and the value in the name/value pair that is sent to the server on form submission.

  • The value attribute is valid for <button><option><input>, as well as <li><meter><progress><param>
  • The value attribute behaves slightly differently depending on the input type.
    • When defined on a button input type (submitreset or button), the value is the text displayed on the button.
    • The value attribute is required for checkbox and radio, and needed, though not required for hidden.
    • The value attribute is not valid and ignored on the file input type.
  • For select options, the value of the selected <option> gets submitted with the form. If the value of an <option> is not explicitly defined, its default value is the text content of the element. If no label attribute is set and the option textnode is null, the value of the valueattribute, if present, gets displayed as a label explaining the option.
  • In terms of <button>, the value attribute defines the value part of the name/value pair associated with this button for the purposes of form submission.
  • If the user may change directionality, consider including the dirname attribute.
  • In terms of <progress>, its value must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted, showing what percent of the task is complete. If there is no value attribute, the progress bar is indeterminate.
  • In terms of <meter>, it represents the current numeric value, and is what the meter will display. Required, the value must be between the min and max values inclusive. If it falls outside the min/max range, the value will equal either the min or max if its under or over range respectively.
  • Not relevant to forms, but the value attribute on <li> within an <ol> defines the number marker, or ordinal number of that list item. The adjacent <li>s will increment normally starting with that value.
  • Also not relevant to forms, but the value attribute is a required attribute of <param>, setting the value of the parameter.