初心者の為のHTML② ~理屈よりやってみよう~

前回、HTMLのWEBサイトをここまで作りました。

<!DOCTYPE html>
<html>
<head>
<meta charset="shift-jis" />
<title>初心者の為のHTML①</title>

</head>

<body>

ここに書いた内容がWEBサイトに表示されます。

</body>

</html>


これではただ文字が入っているだけの味気ないページなので、今度は入力項目を入れてみましょう。

これも説明すると理屈っぽくなるのでとりあえずやってみます。

 

page1.htmlをメモ帳等のテキストエディタで開いてください。

赤字部分を付けたして上書き保存します。

<!DOCTYPE html>
<html>
<head>
<meta charset="shift-jis" />
<title>初心者の為のHTML①</title>

</head>

<body>

ここに書いた内容がWEBサイトに表示されます。

<br>
名前
<input type="text" />

<input type="submit" value="更新" />

</body>

</html>

 

テキストエディタを×で閉じて、今度はpage1.htmlをEdge等のブラウザで開きます。

すると、入力欄とボタンが表示されます。

 

このように、WEBサイトでよく見かける入力欄等、ユーザが操作する項目を作るときは<input>を使います。そして、typeでどのような形状のものを置くか決める訳です。

type="text"なら入力欄。

type="submit"ならボタンです。

色々な種類があるのですが、今日はここまでにしておきます。