User experience has always been a factor to be consider while you design a website. Lot of fields such as Human Computer Interface (HCI) and Usability etc have been studied upon. While designing a user interface, special care should always been taken while placing the text fields and selecting fonts. While lot of web designers prefer to display forms in plain vanilla manner, lot of others prefer to give user as much help while filling the forms. Thus the html forms should always have description field with each input field. Also if we can highlight the field that user is filling, it can improve the user experience.
Thus How can we implement the feature where the Input fields which are currently focused are highlighted?
Let us use jQuery and create a simple feature on a HTML Form.
Step 1: The HTML Code
We will use following form as a sample HTML Form and apply the Focus effect using jQuery.