コーディング初心者のための基本的なformタグの使い方ガイド
formタグとは?
<form>
タグは、ウェブページで情報を送信するための特別なタグです。
例えば、お問い合わせフォームやアンケートを作るときに使えます。情報を入力して「送信」ボタンを押すと、入力した内容が送られるようになります。
参考:mdn web docs
formタグは HTML の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。
フォームを作ろう!
下のコードは、「お問い合わせフォーム」を作るためのものです。<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>
タグを使ってフォームの要素を追加することで、名前やメールアドレスを入力することができるフォームを作ることができます。
これらのタグを組み合わせることで、簡単なフォームが作成できます。もし何か入力内容に誤りがあった場合、エラーメッセージが表示されることもあります。フォームはウェブサイトで大切な役割を果たすので、正しく使って楽しくコーディングしましょう!