Implementing content attributes

Making controls read-only

The readonly attribute present information to users in elements such as text boxes but don’t want them to be able to alter this data.

The following code demonstrates the readonly property:

<body>
    <form>
        <label for="code" >Secret Code: </label>
        <input type="text" readonly value="00BMO00BM" />
    </form>
</body>

Providing a spelling checker

The spellcheck attribute helps provide feedback to users that a word they’ve entered is misspelled.

The following code demonstrates the spellcheck property:

<body>
    <form>
        <label for="messageArea" >Your Message: </label>
        <textarea id="messageArea" rows="5" cols="20" spellcheck="true"></textarea>
    </form>
</body>

Specifying a pattern

The pattern attribute allows the use of a regular expression to define the pattern (.com or .net websites) that should be accepted.

The title attribute specifies the error message to users in the tooltip when validation fails.

The following code shows the pattern attribute:

<body>
    <form>
        <label for="web" >Your Website: </label>
        <input type="text" title="Only .com and .net are permitted."
               pattern="^[a-zA-Z0-9\-\.]+\.(com|net)$" />
    </form>
</body>

Using the placeholder attribute

The placeholder attribute enables you to prompt users with what’s expected in a certain text box.

The placeholder text doesn’t interfere with users when they start typing their information into the text box.

The following code demonstrates the placeholder attribute:

<body>
    <form>
        <label for="emailType" >Your Email: </label>
        <input type="email" placeholder="[email protected]" />
    </form>
</body>

Making controls required

The required attribute ensures that a user fills in a specified field.

If the users try to submit the form without specifying the field with the required attribute, they get an error message.

The following code demonstrates the required attribute:

<body>
    <form>
        <label for="emailType" >Your Email: </label>
        <input type="email" placeholder="[email protected]" required />
    </form>
</body>

Ads Right