76 lines
3.3 KiB
HTML
76 lines
3.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>Tax form</title>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
<script src="./script.js" defer></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<h1>Hero tax</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<form action="http://folk.ntnu.no/michaedm/norwegian-tax-administration/receive.php" method="post">
|
||
|
|
<label for="nameInput">Real name</label>
|
||
|
|
<input type="text" name="name" id="nameInput" pattern="[A-Za-z]+" title="Please use only alphanumeric characters" autofocus required>
|
||
|
|
|
||
|
|
<!-- Another option for genders would've been radio buttons -->
|
||
|
|
|
||
|
|
<label for="genderInput">Gender</label>
|
||
|
|
<select name="gender" id="genderInput" required>
|
||
|
|
<option value="">None</option>
|
||
|
|
<option value="male">Male</option>
|
||
|
|
<option value="female">Female</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<label for="emailInput">E-mail</label>
|
||
|
|
<input type="email" name="email" id="emailInput" required>
|
||
|
|
|
||
|
|
<!-- This might not return the value in the DD.MM.YYYY format, but it's usually considered to be the safest and most correct method for date inputs. Also, even though the html validator doesn't like it, the regexp is only used as a fallback field if the browser has no native date picker (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Handling_browser_support). If you need conversion for something like a database, this would usually be done in javascript -->
|
||
|
|
|
||
|
|
<label for="birthdayInput">Birthdate</label>
|
||
|
|
<input type="date" name="birthday" id="birthdayInput" max="1987-12-31" pattern="\d{2}\.\d{2}\.\d{4}" required>
|
||
|
|
|
||
|
|
<label for="heroInput">Hero name</label>
|
||
|
|
<input type="text" name="hero" id="heroInput" required>
|
||
|
|
|
||
|
|
<div class="inline">
|
||
|
|
<label for="wearsSpandexInput">Do you wear spandex?</label>
|
||
|
|
<input type="checkbox" name="spandex" id="wearsSpandexInput" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="sliders">
|
||
|
|
|
||
|
|
<!-- I made these inputs as sliders because I felt it made more sense considering the "floatish" nature of these properties. If we had been allowed to use javascript for this task, I probably also would've added some kind of a number that would show the slider value. If it's really important that these values could be specified as an exact value, you would only need to change the type from "range" to "number" (and maybe add a required-attribute). Min, max and step will work in the same way. -->
|
||
|
|
|
||
|
|
<label for="strengthInput">Strength</label>
|
||
|
|
<input type="range" name="strength" id="strengthInput" min="1" max="10" step="1">
|
||
|
|
<label for="speedInput">Speed</label>
|
||
|
|
<input type="range" name="speed" id="speedInput" min="1" max="10" step="1">
|
||
|
|
|
||
|
|
<label for="intelligenceInput">Intelligence</label>
|
||
|
|
<input type="range" name="intelligence" id="intelligenceInput" min="1" max="10" step="1">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="taxFields">
|
||
|
|
<label for="incomeInput">Income</label>
|
||
|
|
<input type="number" name="income" id="incomeInput" min="0" step="1" required>
|
||
|
|
|
||
|
|
<label for="wealthInput">Wealth</label>
|
||
|
|
<input type="number" name="wealth" id="wealthInput" min="0" step="1" required>
|
||
|
|
|
||
|
|
<label for="taxInput">Tax</label>
|
||
|
|
<input type="number" name="tax" id="taxInput" readonly>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input type="submit" value="Submit" id="submitButton">
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|