Hands-on work N° 3 :

1. Launch Visual Studio Code and create a new file named Job-Application-Form.html.

2. Using HTML, build the structure for the form as depicted in the provided figure. Ensure that you select the most appropriate HTML elements based on the functionality and context described below:

   • Input Fields: Use elements like <input>, <select>, and <textarea> to collect user information effectively.

   • Grouping and Organization: Apply semantic tags such as <fieldset>, <section>, and <div> to logically group related fields, enhancing readability and maintainability.

   • Form Accessibility: Incorporate proper labeling using the <label> tag and ensure accessibility by applying attributes like required, placeholder, and pattern to the input fields.

3. Pay attention to the use of elements and attributes to optimize user experience and ensure data validation.

4.       Your HTML code must also include the following input validations:

a.       The First Name and Last Name fields accept only letters, digits and spaces, must be written in uppercase, contain at least 3 characters but no more than 20 characters. .

b.       The Email address must belong to the Algerian domain (.dz).

c.       The phone number must be an Algerian mobile number, including the international dialing code.

d.       The username must be at least 8 characters long and may include letters, numbers, and the following special characters: “.”, “_”, “%”, and “+” .

e.       The postal address must follow the format: N° 145-Avenue BJ (with "N°" and "Avenue" as fixed elements).

f.        The text entered in the <textarea>  element must not exceed 70 characters.