data_collection/collection.html at master · eshan17/data_collection · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!--
15-237 Homework 2 Part 2
Carnegie Mellon University

-->

<html>
	<head>
		<link rel='stylesheet' type='text/css' href='collection.css'>
	</head>

	<body>

		<div id="input-div">
			<h1>ALIEN DATA COLLECTION </h1>
			<form id="alien-form">
				<label> Name </label>
				<input name="alien-name" id="alien-name" type="text" required="required" placeholder="Name">

				<label> Age (yrs) </label>
				<input name="alien-age" id="alien-age" type="text" required="required" placeholder="Age (yrs)">

				<label> Height (cm) </label>
				<input name="alien-height" id="alien-height" type="text" required="required" placeholder="Height (cm)">

				<label> Weight (lb) </label>
				<input name="alien-weight" id="alien-weight"type="text" required="required" placeholder="Weight (lb)">

				<label> Type </label>
				<select name="alien-type" id="alien-type" type="select" required="required">
					<option value="Type A"> Type A</option>
					<option value="Type B"> Type B</option>
					<option value="Type C"> Type C</option>
				</select>

				<label> Color </label>
				<input name="alien-color" id="alien-color" type="text" required="required" placeholder="Color">

				<input type="submit" value="Save"/>
			</form>
		</div>

		<div id="table-div">
			<h1>DATA SUMMARY </h1>
			<table id="alien-table">
				<thead>
					<tr>
						<th> Name </th>
						<th> Age (yrs) </th>
						<th> Height (cm) </th>
						<th> Weight (lb) </th>
						<th> Type </th>
						<th> Color </th>
					</tr>
				</thead>

				<tbody>
				</tbody>
			</table>
		</div>

		<script src='scripts.js' type='text/javascript'> </script>
	</body>
</htm>