Front-End-Stream/formChallenge.html at master · Kurtis987/Front-End-Stream · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
   <head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta charset="UTF-8">
      <title>Form</title>
      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

      <!--
         Form with HTML5 tags and basic CSS
      -->
      <style type="text/css">

      body{
         font-family: 'Roboto', sans-serif;
	 padding-top: 20px;
      }
         #container{
            width: 550px;
            margin: auto;
         }

         legend{
	    	float: left;	/*floated for compatibility with IE
	    	while border is drawn and border-radius is present*/
            font-size: 30px;
            background-color: #fff;
            border-radius: 5px;
            border: 1px solid #999;
            padding: 4px 15px;
	    	margin-top: -43.5px; /*move legend back to natural position */
	    	margin-bottom: 20px;
         }
         #clear { /* items following legend should start on new line */
	    	clear: both;
	 	}
         label.field{
            display: block;
            text-align: right;
            width: 100px;
            float: left;

         }

         input{
            width: 200px;
            border-radius: 5px;
            padding: 6px 8px;
         }
         .field{
            padding: 6px 8px;
         }

         #currency{
             width: 220px;
             border-radius: 5px;
             padding: 6px 8px;
         }

         fieldset{
            width: 450px;
            border: 1px solid #999;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            clear: both;
            padding: 20px;
            margin: 0px auto 10px auto;
            background-color:rgba(129, 187, 201,.2);

         }
	#submit {
		display: block;
		margin: 0 auto;

	}
      </style>
   </head>
   <body>
      <div id="container">
	<form>
		<fieldset>
			<legend>Registration</legend>
			<div id="clear"> <!-- group 1st two items so we can force them to a new line -->
				<label class="field" for="firstName">*First Name: </label>
				<input name="firstName" id="firstName" type="text" required placeholder="Enter your first name"><br>
			</div>
			<label class="field" for"age">Age: </label>
			<input type="number" name="age" id="age" placeholder="Enter age here:" min="18" max="100"><br>
			<label class="field" for="password">Password: </label>
			<input name="password" id="password" type="password" placeholder="8 Characters minimum" pattern=".{8,}"><br>
			<label class="field" for="email">*Email: </label>
			<input name="email" id="email" type="email" required autofocus placeholder="Enter your email here"><br>
			<label class="field" for="passport">Passport: </label>
			<input type="text" name="passport" id="passport" placeholder="Enter your passport number here" pattern="[0-9A-Za-z]{6,9}" title="6-9 Alphanumeric characters">
			<label class="field">Telephone: </label>
			<input type="text" name="telephone" id="telephone" placeholder="Enter you phone number here" pattern="[0-9]{10}" title="10 digits"><br>
			<label class="field" for="zipcode">Zip Code: </label>
			<input type="text" name="zipcode" id="zipcode" placeholder="Enter your zip code here" pattern="[0-9]{5}" title="5 digits"><br>
			<label class="field" for="creditCard">Credit card</label>
			<input type="text" name="creditCard" id="creditCard" placeholder="Enter Credit card number here" pattern="[0-9]{12,19}" title="12-19 digits">
			<label class="field" for="website">Website: </label>
			<input name="url" id="url" type="url" placeholder="Enter your website here"><br>
		</fieldset>
		<input id="submit" type="submit" value="Submit">
	</form>
    </div>
   </body>

</html>