formタグの使い方

コーディング初心者のための基本的なformタグの使い方ガイド

formタグとは?

<form>タグは、ウェブページで情報を送信するための特別なタグです。

例えば、お問い合わせフォームやアンケートを作るときに使えます。情報を入力して「送信」ボタンを押すと、入力した内容が送られるようになります。



formタグは HTML の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。

参考:mdn web docs

フォームを作ろう!

下のコードは、「お問い合わせフォーム」を作るためのものです。<form>タグの中に、入力フィールドや「送信」ボタンを追加していきます。

<!DOCTYPE html>
<html>
<head>
    <title>お問い合わせフォーム</title>
</head>
<body>
    <form>
        <!-- ここにフォームの要素を追加する -->
    </form>
</body>
</html>

このコードは、ウェブページ全体を囲んでいる<html>タグの中に、<form>タグを使ってフォームを作成する方法を示しています。

では、実際にフォームの要素を追加してみましょう!

入力フィールドを追加しよう!

ここでは、「名前」と書かれた部分がラベルで、名前を入力するテキストボックスがありす。

<input>タグのtype="text"は、テキストを入力するためのボックスを作ることを意味しています。

<label for="name">名前:</label>
<input type="text" id="name" name="name">

送信ボタンを追加しよう!

フォームに入力した内容を送信するための「送信」ボタンも追加してみましょう!

<input type="submit" value="送信する">

ここでは、「送信する」と書かれたボタンを作っています。ボタンをクリックすると、入力した内容が送信されます。

その他のinputタグの使い方については下記の記事で詳しく解説しています!

フォームでよく使うその他のタグ

お問い合わせ内容を入力しよう!

長いメッセージを入力するためには、<textarea>タグを使います。

formタグのまとめ

<form>タグの中に<input>タグを使ってフォームの要素を追加することで、名前やメールアドレスを入力することができるフォームを作ることができます。

これらのタグを組み合わせることで、簡単なフォームが作成できます。もし何か入力内容に誤りがあった場合、エラーメッセージが表示されることもあります。フォームはウェブサイトで大切な役割を果たすので、正しく使って楽しくコーディングしましょう!

タイトルとURLをコピーしました