PHP Academy · レッスン

HTMLフォームを作成する

Q: 「HTMLフォームを作成する」で何を学びますか？

ユーザー入力を受け取るフォームを作成します ブラウザで直接実行するハンズオンコードでPHP Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

ユーザー入力を受け取るフォームを作成します

「HTMLフォームを作成する」はCoddyKit上の無料PHP Academyレッスンです。これはレッスン1/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはPHP Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 PHP Academyコースには全3レッスンが含まれています。

HTMLフォームの構築

HTMLフォームを作成する

次のレッスンへようこそ。このレッスンでは、HTMLを使ってフォームを作成する方法を学びます。フォームはユーザー入力を収集するために不可欠で、収集した入力は後からPHPで処理できます。さっそく始めましょう。

HTMLフォームとは

HTMLフォームは、ユーザー入力を収集するために使用します。ユーザーはフォームに入力したり、選択肢を選んだりして、処理のためにデータをサーバーへ送信できます。

例：ユーザーがユーザー名とパスワードを入力するログインフォーム。

重要なポイント：フォームは、ユーザーとPHPスクリプトをつなぐ橋渡しの役割を果たします。

シンプルなフォームの作成

基本的なHTMLフォームは、次のように作成します。

説明：

action: フォームデータを処理するPHPファイルを指定します。
method: データの送信方法（GETまたはPOST）を指定します。
required: 送信前にフィールドへの入力を必須にします。

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

フォーム要素

フォームには、さまざまな種類のデータを収集するために、複数の入力タイプを含めることができます。

text: 1行のテキスト入力に使用します。
email: メールアドレスに使用します。
password: パスワードの入力に使用します。
checkbox: 複数選択に使用します。
radio: 1つだけ選択する場合に使用します。
submit: フォームの送信に使用します。

例：

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

ラジオボタンの使用

ラジオボタンを使うと、グループ内から1つの選択肢を選べます。例：

ヒント：同じグループのすべてのラジオボタンに、同じname属性を使用してください。

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

チェックボックスの使用

チェックボックスを使うと、複数の選択肢を選べます。例：

ヒント：複数の値を収集するには、配列構文（hobbies[]）を使用してください。

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

ドロップダウンメニュー

ドロップダウンメニューを使うと、一覧から1つの選択肢を選べます。例：

ヒント：デフォルトの選択肢を設定するには、selectedを使用してください。

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

フォームのアクセシビリティ

すべてのユーザーがフォームを利用できるようにしてください。

for属性を使って入力欄に関連付けたlabelタグを使用します。
fieldsetとlegendを使って関連する入力欄をグループ化します。
モバイルデバイスでフォームの使いやすさをテストします。

ヒント：アクセシブルなフォームは、すべてのユーザーの体験を向上させます。

よくできました

おめでとうございます。テキストフィールド、ラジオボタン、チェックボックス、ドロップダウンメニューなど、さまざまな入力タイプを使ったHTMLフォームの作成方法を学びました。フォームは、Web開発におけるユーザー入力の基盤です。次のレッスンでは、PHPを使ってフォームデータを処理する方法を学びます。引き続きコーディングしましょう。

よくある質問

「HTMLフォームを作成する」レッスンは無料ですか？

はい。「HTMLフォームを作成する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、PHP Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 PHP Academyコースには全3レッスンが含まれています。

「HTMLフォームを作成する」で何を学びますか？

ユーザー入力を受け取るフォームを作成しますブラウザで直接実行するハンズオンコードでPHP Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

PHP Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのPHP Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/3です。

「HTMLフォームを作成する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このPHP Academyレッスンでコードを書いて実行できますか？

はい。すべてのPHP Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← PHP Academyに戻る