レッスン
開始
勉強を始める
CodeGym /コース /Python SELF JA / HTMLのフォーム

HTMLのフォーム

Python SELF JA
レベル 29 , レッスン 3
使用可能

1. フォームについての基本知識

HTMLのフォームは、ユーザーとウェブページのインタラクションにとって重要なツールだよ。ユーザーからの情報（例えば、テキスト、リストからの選択、ファイルその他のデータ）を収集し、その後、サーバーに送信して処理ができる。HTMLでは、フォームは様々な要素を使って作成され、それぞれ特定のデータ入力タイプに対応しているんだ。フォームの主な要素は<form>であり、他の要素（例えば<input>, <textarea>, <button>, <select>など）が含まれる。

フォームの主要な要素

フォームの要素は、入力フィールド、ボタン、ドロップダウンリストなど、ユーザーがデータを入力するためのインターフェイスの要素を作成できるんだ。フォームで使われる主なタグ:

  • <form> — 全てのフォーム要素の主要なコンテナで、データがどこに、どのように送信されるかを定義する。
  • <input> — 様々なタイプ（テキスト、パスワード、ラジオボタン、チェックボックスなど）の入力フィールドを作成するための汎用要素。
  • <label> — 入力フィールドと関連づけられ、その目的を示すための要素。
  • <textarea> — 複数行テキストの入力フィールド。
  • <button> — フォームを送信したり、他のアクションを実行するためのボタン。
  • <select> と <option> — ドロップダウンリストで、ユーザーは1つまたは複数の選択肢を選ぶことができる。

簡単なフォームの例

HTML 
      
    <form action="/submit" method="post">
      <label for="name">名前:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">メールアドレス:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">送信</button>
    </form>
HTML 
          
<form action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">送信</button>
</form>
C++
  • action: <form>でフォームデータが送信されるURLを定義する。
  • method: データ送信のメソッドを指定する: postまたはget。

HTML <input>

タグ<input>はフォーム内で最も汎用的な要素だね。様々な入力タイプをサポートしており、それぞれ特定のデータタイプに対応している。

タグ<input>の構文:

Python 

<input type="タイプ" name="フィールド名" id="識別子" value="値">
Python 

<input type="タイプ" name="フィールド名" id="識別子" value="値">

<input>で使う属性:

  • type — 入力のタイプ（テキスト、パスワード、emailなど）。
  • name — サーバーがデータを識別するためのフィールド名。
  • id — 一意の識別子。<label>と結びつけるのに使う。
  • value — フィールドに最初から表示される値（テキストフィールドの初期値など）。

<input>の主なタイプ

  • テキストフィールド type="text" — 名前や姓など、短いテキストを入力するためのもの。
    HTML 
          
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" name="username">
    HTML 
          
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" name="username">
  • パスワード type="password" — パスワードを入力するためのもの。入力した文字は点やアスタリスクで表示される。
    HTML 
          
        <label for="password">パスワード:</label>
<input type="password" id="password" name="password">
    HTML 
          
        <label for="password">パスワード:</label>
<input type="password" id="password" name="password">
  • Email type="email" — メールアドレスを入力するためのもの。この項目は入力形式が正しいかを検証してくれる。
    HTML 
          
        <label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
    HTML 
          
        <label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
  • 数値 type="number" — 数値を入力するためのもの。数字しか入力できない。
    HTML 
          
        <label for="age">年齢:</label>
<input type="number" id="age" name="age" min="1" max="100">
    HTML 
          
        <label for="age">年齢:</label>
<input type="number" id="age" name="age" min="1" max="100">
  • 送信ボタン type="submit" — フォームのデータをサーバーへ送る。このボタンはふつうフォームの最後に置く。
    HTML 
          
        <input type="submit" value="送信">
    HTML 
          
        <input type="submit" value="送信">

<input>のその他の便利な属性

  • placeholder — 入力欄にヒントのテキストを表示する。ユーザーが入力を始めると消える。
    HTML 
          
        <input type="text" placeholder="名前を入力してください">
  • required — その項目を必須にする。埋めずに送信しようとすると、ブラウザが警告を出す。
    HTML 
              
            <input type="email" name="email" required>
  • minとmax — type="number"やtype="date"など、数値・日時系の項目に最小値と最大値を設定する。
    HTML 
          
        <input type="number" name="age" min="18" max="65">
  • maxlength — テキスト欄に入力できる文字数を制限する。
    HTML 
          
        <input type="text" name="username" maxlength="20">

3. フォームの例

ここまで見てきた要素と属性を、1つのフォームにまとめてみよう:

HTML 
      <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>登録フォーム</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" placeholder="名前を入力してください" required>

    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" placeholder="emailを入力してください" required>

    <label for="password">パスワード:</label>
    <input type="password" id="password" name="password" required>

    <label>性別:</label>
    <label><input type="radio" name="gender" value="male"> 男性</label>
    <label><input type="radio" name="gender" value="female"> 女性</label>

    <label for="subscribe">ニュースを購読する</label>
    <input type="checkbox" id="subscribe" name="subscribe">

    <button type="submit">登録する</button>
  </form>
</body>
</html>
HTML 
      <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>登録フォーム</title>
    </head>
    <body>
      <form action="/submit" method="post">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name" placeholder="名前を入力してください" required>

        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email" placeholder="emailを入力してください" required>

        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password" required>

        <label>性別:</label>
        <label><input type="radio" name="gender" value="male"> 男性</label>
        <label><input type="radio" name="gender" value="female"> 女性</label>

        <label for="subscribe">ニュースを購読する</label>
        <input type="checkbox" id="subscribe" name="subscribe">

        <button type="submit">登録する</button>
      </form>
    </body>
    </html>
1
タスク
Python SELF JA, レベル 29, レッスン 3
ロック未解除
簡単なフォームの作成
簡単なフォームの作成
オープン
2
タスク
Python SELF JA, レベル 29, レッスン 3
ロック未解除
フォームの拡張
フォームの拡張
オープン
3
タスク
Python SELF JA, レベル 29, レッスン 3
ロック未解除
ドロップダウンリストとtextareaを含むフォームの作成
ドロップダウンリストとtextareaを含むフォームの作成
オープン
4
タスク
Python SELF JA, レベル 29, レッスン 3
ロック未解除
完全な機能を持つ登録フォーム
完全な機能を持つ登録フォーム
オープン
コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION