php-question/Question09-MultipleFiles/index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>PHP 練習問題スタートページ</title>
	<link href="../common/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
	<div class="container">
		<div class="page-header">
			<h1>独習PHP第6・8章練習問題 <small>外部ファイル読み込みとリクエスト情報</small></h1>
		</div>

		<div class="panel-group" id="accordion">
			<!-- Ex01 -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a href="Ex01.php" target="_blank">
							<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
							Ex01: 外部ファイル読み込み
						</a>
						<small>初級</small>
					</h4>
				</div>
			</div>

			<!-- Ex02 -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a href="Ex02.php" target="_blank">
							<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
							Ex02: エスケープ処理
						</a>
						<small>初級</small>
					</h4>
				</div>
			</div>

			<!-- Ex03 -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" href="#collapseEx03">
							<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
							Ex03: 複数値のリクエスト処理
						</a>
						<small>初級</small>
					</h4>
				</div>
				<div id="collapseEx03" class="panel-collapse collapse">
					<div class="panel-body">
						<form method="post" action="Ex03.php" target="_blank" class="form-inline">
							<div class="form-group">
								<label for="vote">図形</label>
								<select name="vote[]" multiple class="form-control">
									<option value="1">四角形</option>
									<option value="2">三角形</option>
								</select>
							</div>
							<div class="form-group">
								<label for="height">縦</label>
								<input type="number" name="height" class="form-control" placeholder="数値を入力">
							</div>
							<div class="form-group">
								<label for="width">横</label>
								<input type="number" name="width" class="form-control" placeholder="数値を入力">
							</div>
							<button type="submit" class="btn btn-primary">計算する</button>
						</form>
					</div>
				</div>
			</div>

			<!-- Ex04 -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" href="#collapseEx04">
							<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
							Ex04: 認証チェック（上級）
						</a>
						<small>上級</small>
					</h4>
				</div>
				<div id="collapseEx04" class="panel-collapse collapse">
					<div class="panel-body">
						<form method="post" action="Ex04.php" target="_blank" class="form-inline">
							<div class="form-group">
								<label for="username">ユーザー名</label>
								<input type="text" name="username" class="form-control" placeholder="ユーザー名を入力">
							</div>
							<div class="form-group">
								<label for="password">パスワード</label>
								<input type="password" name="password" class="form-control" placeholder="パスワードを入力">
							</div>
							<button type="submit" class="btn btn-primary">ログイン</button>
						</form>
					</div>
				</div>
			</div>

			<!-- Ex05 -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" href="#collapseEx05">
							<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
							Ex05: セッションを使う + 画像アップロード
						</a>
						<small>上級</small>
					</h4>
				</div>
				<div id="collapseEx05" class="panel-collapse collapse">
					<div class="panel-body">
						<form method="post" action="Ex05.php" target="_blank" class="form-inline"
							enctype="multipart/form-data">
							<div class="form-group">
								<label for="image">画像ファイル</label>
								<input type="file" name="image" class="form-control">
							</div>
							<button type="submit" class="btn btn-primary">アップロード</button>
						</form>
					</div>
				</div>
			</div>

		</div>
	</div>

	<!-- jQuery -->
	<script src="../common/js/jquery-3.2.1.min.js"></script>

	<!-- Bootstrap Core JavaScript -->
	<script src="../common/js/bootstrap.min"></script>
</body>

</html>