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

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

目次

HTML

$ cp hina.html index.html

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

$ 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ファイルを作成します。

$ cp hina.html style.css

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

$ vim style.css

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次