afro-coder/question1.html

## question1.html
<!--
    Program to accept Student ID (combination of alphabets an numbers),
    date of joining Collige, percentage in previous class (in digits)
    The data should be sent to the server.
-->
<html>
    <head>
    <title>HTML question 1</title>
    </head>
<body>
    <form>
        <!-- This will only take Alphabets A-Z and numbers 0-9 for example Allie024 is valid but Allie#012 is not
            How this works is the patter specified "[a-zA-Z0-9]+" will match A-Z or a-z or numbers 0-9
            the "[]" means individually and not as a group the "+ means one or more"
            https://stackoverflow.com/questions/62285091/how-to-only-allow-alphanumeric-on-textbox-using-pure-html
        -->
        <!-- The Required attribute will not let you submit until all the fields are filled -->

        <!-- Other Input types are given here https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types -->
    Student ID: <input type="text" id="studentID" name="studentID" pattern="[a-zA-Z0-9]+" title="Only numbers and Alphabets" required> <br/>
    <br/>
    <!-- Input Type date shows a date selector to select date-->
    Date of Joining:  <input type="date" id="date" name="date" title="Date" required > <br/>
    <br/>
    <!-- Input type number will only let you select numbers you can also set min and max below Minimum and Maximum is optional-->

    Percentage(In numbers):  <input type="number" id="onlynumber" name="onlynumber" title="Percentage(In Digits)" required min=0 max=100> </br>
    <br/>
    <!-- The Submit Button -->
    <input type="submit" name="submit" value="submit">
    </form>
</body>
    </html>

## question2.html
<!--
    Program to accept &mail ID of the Hotel, Date of foundation Number of tables in hotel The data should be sent to the server.
-->
<html>
    <head>
    <title>HTML question 2</title>
    </head>
<body>
    <form>
        <!-- The Required attribute will not let you submit until the fields are filled -->

        <!-- Other Input types are given here https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types -->
    Email ID: <input type="email" id="emailID" name="emailID" title="Email" required> <br/>
    <br/>
    <!-- Input Type date shows a date selector to select date-->
    Date of Foundation:  <input type="date" id="date" name="date" title="Date" required > <br/>
    <br/>
    <!-- Input type number will only let you select numbers you can also set min and max below Minimum and Maximum is optional-->

    Number of tables:  <input type="number" id="onlynumber" name="onlynumber" title="Number of Tables" required> </br>
    <br/>
    <!-- The Submit Button -->
    <input type="submit" name="submit" value="submit">
    </form>
</body>
    </html>

## question3.html
<!--
    Program to accept student name Date of birth & attendance percentage in number form. The data should be sent to the serwer
-->
<html>
    <head>
    <title>HTML question 3</title>
    </head>
<body>
    <form>
        <!-- The Required attribute will not let you submit until the fields are filled -->

        <!-- Other Input types are given here https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types -->
        <!-- Accept only Names-->
    Student First Name: <input type="text" id="firstname" pattern="[a-zA-Z]+" name="FirstName" title="First Name" required> <br/>
    <br/>
    Student Last Name: <input type="text" id="lastname" pattern="[a-zA-Z]+" name="LastName" title="Last Name" required> <br/>
    <br/>
    <!-- Input Type date shows a date selector to select date-->
    Date of Birth:  <input type="date" id="date" name="date" title="Date" required > <br/>
    <br/>
    <!-- Input type number will only let you select numbers you can also set min and max below Minimum and Maximum is optional-->

    Attendance Percentage(In numbers):  <input type="number" id="onlynumber" name="onlynumber" title="Percentage(In Digits)" required min=0 max=100> </br>
    <br/>
    <!-- The Submit Button -->
    <input type="submit" name="submit" value="submit">
    </form>
</body>
    </html>

## question4.html
<!--

program to accept Name of College, Total number of students in the college, total number of halls (range till 100 should be sent to the server.
-->
<html>
    <head>
    <title>HTML question 4</title>
    </head>
<body>
    <form>
        <!-- The Required attribute will not let you submit until the fields are filled -->

        <!-- Other Input types are given here https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types -->
        <!-- Accept only Names-->
    College Name: <input type="text" id="firstname" pattern="[a-zA-Z]+" name="FirstName" title="Name" required> <br/>
    <br/>
    <!-- Input Type date shows a date selector to select date-->
    Total number of Students:  <input type="number" id="num" name="num" title="num" required > <br/>
    <br/>
    <!-- Input type number will only let you select numbers you can also set min and max below Minimum and Maximum is optional-->

    Total Number of Halls:  <input type="number" id="hall" name="hall" title="hall" required min=0 max=100> </br>
    <output class="hall-output" for="hall"></output>
    <br/>
    <!-- The Submit Button -->
    <input type="submit" name="submit" value="submit">
    </form>
</body>
    </html>
	<!--
	Program to accept Student ID (combination of alphabets an numbers),
	date of joining Collige, percentage in previous class (in digits)
	The data should be sent to the server.
	-->
	<html>
	<head>
	<title>HTML question 1</title>
	</head>
	<body>
	<form>
	<!-- This will only take Alphabets A-Z and numbers 0-9 for example Allie024 is valid but Allie#012 is not
	How this works is the patter specified "[a-zA-Z0-9]+" will match A-Z or a-z or numbers 0-9
	the "[]" means individually and not as a group the "+ means one or more"
	https://stackoverflow.com/questions/62285091/how-to-only-allow-alphanumeric-on-textbox-using-pure-html
	-->
	<!-- The Required attribute will not let you submit until all the fields are filled -->

	<!-- Other Input types are given here https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types -->
	Student ID: <input type="text" id="studentID" name="studentID" pattern="[a-zA-Z0-9]+" title="Only numbers and Alphabets" required> <br/>
	<br/>
	<!-- Input Type date shows a date selector to select date-->
	Date of Joining: <input type="date" id="date" name="date" title="Date" required > <br/>
	<br/>
	<!-- Input type number will only let you select numbers you can also set min and max below Minimum and Maximum is optional-->

	Percentage(In numbers): <input type="number" id="onlynumber" name="onlynumber" title="Percentage(In Digits)" required min=0 max=100> </br>
	<br/>
	<!-- The Submit Button -->
	<input type="submit" name="submit" value="submit">
	</form>
	</body>
	</html>
	<!--
	Program to accept &mail ID of the Hotel, Date of foundation Number of tables in hotel The data should be sent to the server.
	-->
	<html>
	<head>
	<title>HTML question 2</title>
	</head>
	<body>
	<form>
	<!-- The Required attribute will not let you submit until the fields are filled -->

	<!-- Other Input types are given here https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types -->
	Email ID: <input type="email" id="emailID" name="emailID" title="Email" required> <br/>
	<br/>
	<!-- Input Type date shows a date selector to select date-->
	Date of Foundation: <input type="date" id="date" name="date" title="Date" required > <br/>
	<br/>
	<!-- Input type number will only let you select numbers you can also set min and max below Minimum and Maximum is optional-->

	Number of tables: <input type="number" id="onlynumber" name="onlynumber" title="Number of Tables" required> </br>
	<br/>
	<!-- The Submit Button -->
	<input type="submit" name="submit" value="submit">
	</form>
	</body>
	</html>
	<!--
	Program to accept student name Date of birth & attendance percentage in number form. The data should be sent to the serwer
	-->
	<html>
	<head>
	<title>HTML question 3</title>
	</head>
	<body>
	<form>
	<!-- The Required attribute will not let you submit until the fields are filled -->

	<!-- Other Input types are given here https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types -->
	<!-- Accept only Names-->
	Student First Name: <input type="text" id="firstname" pattern="[a-zA-Z]+" name="FirstName" title="First Name" required> <br/>
	<br/>
	Student Last Name: <input type="text" id="lastname" pattern="[a-zA-Z]+" name="LastName" title="Last Name" required> <br/>
	<br/>
	<!-- Input Type date shows a date selector to select date-->
	Date of Birth: <input type="date" id="date" name="date" title="Date" required > <br/>
	<br/>
	<!-- Input type number will only let you select numbers you can also set min and max below Minimum and Maximum is optional-->

	Attendance Percentage(In numbers): <input type="number" id="onlynumber" name="onlynumber" title="Percentage(In Digits)" required min=0 max=100> </br>
	<br/>
	<!-- The Submit Button -->
	<input type="submit" name="submit" value="submit">
	</form>
	</body>
	</html>
	<!--

	program to accept Name of College, Total number of students in the college, total number of halls (range till 100 should be sent to the server.
	-->
	<html>
	<head>
	<title>HTML question 4</title>
	</head>
	<body>
	<form>
	<!-- The Required attribute will not let you submit until the fields are filled -->

	<!-- Other Input types are given here https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types -->
	<!-- Accept only Names-->
	College Name: <input type="text" id="firstname" pattern="[a-zA-Z]+" name="FirstName" title="Name" required> <br/>
	<br/>
	<!-- Input Type date shows a date selector to select date-->
	Total number of Students: <input type="number" id="num" name="num" title="num" required > <br/>
	<br/>
	<!-- Input type number will only let you select numbers you can also set min and max below Minimum and Maximum is optional-->

	Total Number of Halls: <input type="number" id="hall" name="hall" title="hall" required min=0 max=100> </br>
	<output class="hall-output" for="hall"></output>
	<br/>
	<!-- The Submit Button -->
	<input type="submit" name="submit" value="submit">
	</form>
	</body>
	</html>