Question

Build a html form (making use of CSS and Javascript) with the following elements. The form must have validations and within a table format.

• Name: a text box where the content must start with 1 upper case characters and no special character (i.e. !, @, #, $, %, &, *). Number is not allowed. The text box must not be empty.
• Module code: a text box where the content must start with 3 lower case alphabets and follows by 4 digits where the first digit cannot be zero. This textbox can be empty.
• Current date: a non-editable textbox and should be in the format as shown (e.g. 12 October 2020 Monday 05:35 PM)
• Number of weeks till end of the year: a label showing the total number of weeks from now till 31st Dec 2020. (e.g. 17 days is 2 weeks and 3 days)
• Source language: a selection list with English, Chinese, Malay, Indonesian, Japanese and Korean. Use English as the default.
• Target language: a radio button with English, Chinese, Malay, Indonesian, Japanese and Korean. Make Japanese as the default.
• Source language content: a text area with 3 rows and 20 columns. The default text is “Hello testing”. The text area cannot be empty.
• Find text: a text box for the user to key in text he/she wants to find.
• Replacement text: a text box for the user to key in the replacement text. If the find text is empty, this element should be disable (i.e. user cannot key in anything here).
• Find and replace button: when click, it will find the occurrence of the “find text” in the source language text area and replace it with the “replacement text”. If either find text or replacement text is empty, this button is disable. After the replacement, a message showing the number of replacements must be displayed besides the button.
• Submit button: the button is called “Google Translate”. When it is clicked, it should invoke the google translate https://translate.google.com to perform the translation.
• Reset button: this will reset the content of all the elements.

All validation error messages must be italic and in red colour and besides the html element. You are free to rearrange all the html elements into logic group and sequence.

Answer 1

<form action="/action_page.php">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
Password Example
An <input> element with type="password" that must contain 6 or more characters:

<form action="/action_page.php">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
<input type="submit">
</form>
Password Example
An <input> element with type="password" that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:

<form action="/action_page.php">
Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>