-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathLab04.html
144 lines (140 loc) · 6.73 KB
/
Lab04.html
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lab 04</title>
<!--<link rel="stylesheet" href="./css/reset.css" />-->
<!--<link rel="stylesheet" href="./css/Lab04.css" />-->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="container">
<div class="row align-items-center">
<div class="col-md-4">
<h1 class="text-center">Share Your Travels</h1>
<p class="text-center"><em>Let us know where you've been</em></p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4 text-center"><a class="navbar-brand text-secondary" href="Lab02.html">Gallery</a></div>
<div class="col-md-4 text-center"><a class="navbar-brand text-secondary"href="#">Feeling Lucky</a></div>
<div class="col-md-4 text-center"><a class="navbar-brand text-secondary"href="#">User</a></div>
</div>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="card">
<div class="card-body">
<legend>Photo Details</legend>
<form class="form-group">
<fieldset>
<label>Title</label>
<input type="text" placeholder="Give your photo descriptive name" name="title" class="form-control"><br>
<label>Description</label>
<textarea class="form-control" placeholder="Adding a rich description will help with search results"></textarea>
<br>
<label>Continent</label>
<select name="Choose continent " class="form-control ">
<option value="1">Choose continent</option>
<option value="2">下拉1</option>
<option value="3">下拉2</option>
</select>
<br>
<label>Country</label>
<select name="Choose country" class="form-control">
<option value="1">Choose country</option>
<option value="2">下拉1</option>
<option value="3">下拉2</option>
</select>
<br>
<label>City</label>
<input type="text" name="city" class="form-control">
<br>
<label>Copyright?</label>
<form>
<div class="radio">
<label><input type="radio" name="optradio">All rights reserved</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" checked>Creative Commons</label>
</div>
</form>
<br>
<label>Creative Commons Types</label>
<form>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Attribution
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Noncommercial
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">No Derivative Works
</label>
</div>
</form>
<br>
<form>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">I accept the software license
</label>
</div>
</form>
<br>
<!--<div class="form-group">-->
<!--<ul class="list-inline">-->
<!--<li class="list-inline-item"><label>Rate this photo:</label>-->
<!--<input type="number" class="form-control">-->
<!--</li>-->
<!--<li class="list-inline-item float-right"><label>Color Collection:</label>-->
<!--<input type="text" class="form-control" size="85">-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<div class="row">
<div class="col-md-3">
<label>Rate this photo:</label>
<input type="number" class="form-control"><br>
</div>
<div class="col-md-1"></div>
<div class="col-md-8">
<label> Color Collection:</label>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<label>Date Taken:</label>
<input type="number" class="form-control"><br>
</div>
<div class="col-md-1"></div>
<div class="col-md-5">
<label>Time Taken:</label>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="btn-group">
<button type="submit" class="btn btn-secondary">Submit</button>
<button type="reset" class="btn btn-secondary">Clear</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>