Notice:
The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

:required

Jump to: navigation, search

:required

This article is Not Ready.


Needs Summary: This article does not have a summary. Summaries give a brief overview of the topic and are automatically included on some listing pages that link to this article.

Examples

The following example puts a green border on a field when it is valid and a red border with bold text when it isn't. The email field is required, but the others aren't. The URL field is pre-filled with a bad URL, so it isn't valid when the page opens. In addition, the two optional fields are styled with light gray backgrounds, and the required field with an eye-catching yellow background.

<!DOCTYPE html >
<html>
<head>
  <title>:valid/:invalid Pseudo-class Example</title>
  <style type="text/css">

  #PC1 input:valid { 
    border:solid lime;
    font-weight:normal;
  }
  #PC1 input:invalid { 
    border:solid red;
    font-weight:bold;
  }
  #PC1 input:required {
    background-color:Yellow;
  }
  #PC1 input:optional {
    background-color:LightGray;
  }       
  </style>
</head>
<body>
  <form id="PC1">
    <p><label>Enter some text: <input type="text"/></label></p>
    <p><label>*Enter a valid email address: <input type="email" required /></label></p>
    <p><label>Enter a valid URL: <input type="url" value="not a url"/></label></p>       
    <p>* required field</p>
  </form>
</body>
</html>

Notes

Remarks

A required field is a field that cannot be submitted without a value. A required field has the required attribute set in its input element. The required attribute can be set on text, URL, email, select, checkbox, or radio button controls, and on select and textarea elements. It is a Boolean attribute, and need be specified only on an element. When users hover the mouse over a required field, they'll see a tooltip stating that it is a required field. (If you've set the title attribute, that will be shown instead.)

Syntax

selector

required

Parameters

selector
A CSS simple selector.

See also

Related articles

Pseudo-Classes













  • :required




Selectors























  • :required






Related pages (MSDN)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]