close

HTMLの概要 Form: 構造、入力タイプ、および例

HTML は form 、ユーザーが Web サイトと対話し、サーバーにデータを送信できるようにする Web 開発の重要な部分です。 ユーザー情報の収集、ユーザー入力の処理、Web サイト上でのユーザーアクションの有効化など Form 、幅広い目的に使用されます。 form この記事では、HTML で一般的に使用される属性とさまざまなタイプの入力フィールド、選択要素、テキストエリア、ボタンについて説明します form。

入力フィールド

  • <input type="text">: ユーザーが英数字を入力できるテキスト入力フィールドを作成します。
  • <input type="password"> ：入力した文字をマスクしたパスワード入力欄を表示します。
  • <input type="email">: 有効な電子メール アドレスを必要とする入力フィールドの電子メール検証を提供します。
  • <input type="number"> ：入力を数値のみに制限します。
  • <input type="checkbox">: ユーザーが選択または選択解除できるチェックボックスを表します。
  • <input type="radio">: ユーザーがオプションのグループから 1 つのオプションを選択できるようにするラジオ ボタンを表します。
  • <input type="file">: ユーザーがファイルを選択してアップロードできるようにします。
  • <input type="submit"> ：クリックすると送信するボタンが表示されます form。
  • <input type="reset"> form： を初期状態に 戻すボタンが表示されます。
  • <input type="date">: 日付を選択するための日付ピッカーを提供します。
  • <input type="time">: ユーザーが時間値を入力できるようにします。

要素の選択

  • <select>: 選択可能なオプションを含むドロップダウン メニューを作成します。
  • <option>: タグ内に配置されたドロップダウン メニュー内のオプションを定義します <select>。
  • <optgroup>: ドロップダウン メニュー内で関連するオプションをグループ化します。
  • <select multiple>: Ctrl キー(Mac では Command キー) を押しながらクリックすることで、ユーザーが複数のオプションを同時に選択できるようになります。

テキストエリア

<textarea>: ユーザーが長いテキスト ブロックを入力および編集できる複数行のテキスト入力フィールドを作成します。 rows サイズを変更したり、や などの属性を使用して構成したりして、 cols その寸法を定義できます。

ボタン

<button>: 内のさまざまなアクションをトリガーできるボタンを表します form。 form これは、 form JavaScript 関数ごとに を送信したり、別のページに移動したりする ために使用できます。

使用例:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

この例では、フィールド、 、ボタン などのさまざまな form 要素 の使用法を示します 。 特定の要件に基づいて要素と属性を 自由にカスタマイズしてください。 input textarea checkbox select dropdown submit form