about summary refs log tree commit diff
path: root/usth/ICT3.2/midterm/2.html
diff options
context:
space:
mode:
Diffstat (limited to 'usth/ICT3.2/midterm/2.html')
-rw-r--r--usth/ICT3.2/midterm/2.html82
1 files changed, 82 insertions, 0 deletions
diff --git a/usth/ICT3.2/midterm/2.html b/usth/ICT3.2/midterm/2.html
new file mode 100644
index 0000000..106147b
--- /dev/null
+++ b/usth/ICT3.2/midterm/2.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<style>
+h1 { text-align: center }
+form {
+    display: table;
+    margin: 0 auto;
+}
+p { display: table-row }
+.cell {
+    margin: 0.2em 0;
+}
+</style>
+
+<script>
+function check() {
+    const AGE = document.getElementById('age').value;
+    // Number check is already handled by the number input.
+    if (AGE < 0)
+        alert('Age must be nonnegative.');
+
+    const EMAIL = document.getElementById('email').value;
+    if (EMAIL.match(/\w+@\w+\.\w+/) === null)
+        alert('Invalid email!');
+
+    const USER = document.getElementById('user').value;
+    if (USER === '')
+        alert('Your username is blank!  Please enter a nonempty username.');
+
+    const PW = document.getElementById('pw').value;
+    const PW2 = document.getElementById('pw2').value;
+    if (PW != PW2)
+        alert('Your password and confirmation password do not match!');
+}
+</script>
+
+<html>
+<body>
+  <h1>Sign Up</h1>
+  <form>
+    <p>
+      <label class=cell for=name>Full name:&emsp;</label>
+      <input class=cell type=text id=name>
+    </p>
+    <p>
+      <label class=cell for=gender>Gender:&emsp;</label>
+      <select name=gender id=gender>
+        <option value=''>-Select one-</option>
+        <option value=male>Male</option>
+        <option value=female>Female</option>
+        <option value=other>Other</option>
+      </select>
+    </p>
+    <p>
+      <label class=cell for=age>Age:&emsp;</label>
+      <input class=cell type=number id=age>
+    </p>
+    <p>
+      <label class=cell for=email>Email:&emsp;</label>
+      <input class=cell type=email id=email>
+    </p>
+    <p>
+      <label class=cell for=user>Username:&emsp;</label>
+      <input class=cell type=text id=user>
+    </p>
+    <p>
+      <label class=cell for=pw>Password:&emsp;</label>
+      <input class=cell type=password id=pw>
+    </p>
+    <p>
+      <label class=cell for=pw2>Re-type Password:&emsp;</label>
+      <input class=cell type=password id=pw2>
+    </p>
+    <p>
+      <span class=cell></span>
+      <span class=cell>
+        <input type=reset value=Clear>
+        <input type=button onclick='check()' value=Submit>
+      </span>
+    </p>
+  </form>
+</body>
+</html>