ポリプロピレン

PHPを1からお勉強するブログ

Chapter3-3 アンケート入力ページをつくろう!実践

前回と同じようにhina.htmlを元にindex.htmlを作ります。本とは違いますが、ここからCSSを使います。

HTML

$ sudo cp hina.html index.html

作ったファイルをVimで開きます。

$ sudo vim index.html

iで編集モードにしたらコードを書いていきます。

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
	<title>PHP基礎</title>
</head>
<body>
	<form method="post" action="check.php">
		<label>ニックネームを入力してください。</label>
		<input type="text" id="nickname" name="nickname">
		<input type="submit" value="送信">
	</form>
</body>
</html>

ここでrequired属性を使えば入力チェック機能を実装できますが、この後PHPで作るのであえてつけていません。

esc→:wして、フォームができていれば成功です。このままでは表示が崩れていますのでCSSを使って整えます。

CSS

同じようにCSSファイルを作成します。

$ sudo cp hina.html style.css

作ったファイルをVimで開きます。

$ sudo vim style.css

iで編集モードにしたらコードを書いていきます。

今回は以下のページのコードを使わせていただきました。

www.html5rocks.com

esc→:wして、フォームができていれば成功です。