{"id":137231,"date":"2024-10-15T11:22:19","date_gmt":"2024-10-15T05:52:19","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137231"},"modified":"2024-10-17T12:10:45","modified_gmt":"2024-10-17T06:40:45","slug":"exploring-attributes-like-required-and-autofocus-forms","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/exploring-attributes-like-required-and-autofocus-forms\/","title":{"rendered":"Exploring attributes like ‘required’ and ‘autofocus’ | Forms"},"content":{"rendered":"\n

HTML5<\/strong> introduces several new attributes that enhance form usability and validation. Two of these attributes, required and autofocus, are particularly useful in responsive web design.<\/p>\n\n\n\n

required Attribute<\/p>\n\n\n\n

The required attribute specifies that an input field must be filled in before the form can be submitted. This helps to ensure that essential information is collected from the user.<\/p>\n\n\n\n

Example:<\/strong><\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<form><\/p>\n\n\n\n

    <label for=”name”>Name:<\/label><\/p>\n\n\n\n

    <input type=”text” id=”name” name=”name” required><\/p>\n\n\n\n

    <br><\/p>\n\n\n\n

    <label for=”email”>Email:<\/label><\/p>\n\n\n\n

    <input type=”email” <\/p>\n\n\n\n

id=”email” name=”email” required><\/p>\n\n\n\n

    <br><\/p>\n\n\n\n

    <button type=”submit”>Submit<\/button> <\/p>\n\n\n\n

<\/form><\/p>\n\n\n\n

In this example, both the name and email fields are marked as required. If either field is left blank, the user will be prevented from submitting the form.<\/p>\n\n\n\n

autofocus Attribute<\/p>\n\n\n\n

The autofocus attribute automatically sets focus on a specific input field when the page loads. This can improve the user experience by guiding them directly to the most important field.<\/p>\n\n\n\n

Example:<\/strong><\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<form><\/p>\n\n\n\n

    <label for=”name”>Name:<\/label><\/p>\n\n\n\n

    <input type=”text” id=”name” name=”name” autofocus><\/p>\n\n\n\n

    <br><\/p>\n\n\n\n

    <label for=”email”>Email:<\/label><\/p>\n\n\n\n

    <input type=”email” id=”email” name=”email”><\/p>\n\n\n\n

    <br><\/p>\n\n\n\n

    <button type=”submit”>Submit<\/button><\/p>\n\n\n\n

<\/form> <\/p>\n\n\n\n

In this example, the name field will have focus when the page loads, prompting the user to enter their name first.<\/p>\n\n\n\n

Responsive Design Considerations:<\/strong><\/p>\n\n\n\n