JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLフォームでユーザー入力を取得する方法をわかりやすく解説

HTMLフォームを使用すると、Webページ上でユーザーから情報を簡単に受け取ることができます。入力を受け付けるには<form>タグを使い、その中に各種フォーム要素を配置します。テキスト入力、ラジオボタン、チェックボックス、送信ボタンなど、目的に応じたさまざまなフォーム要素が用意されています。

<input>タグとtype属性の基本

ユーザー入力を受け取る際の中心となるのが<input>タグです。type属性の値を変えることで、テキストボックス・チェックボックス・ラジオボタンなど、異なる種類の入力コントロールを作り分けられます。このtype属性は、テキスト入力やチェックボックスなど、多くのフォーム要素で共通して使われる重要な属性です。

HTMLフォームのコード例

次のコードは、HTMLフォームでユーザー入力を受け取るシンプルな例です。学生の「名前」「科目」「順位」を入力するフォームを作成しています。エディタに貼り付けてブラウザで開けば、すぐに動作を確認できます。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Forms</title>
  </head>
  <body>
    <p>以下の項目を入力してください：</p>
    <form>
      学生名：<br> <input type="text" name="name">
      <br>
      科目：<br> <input type="text" name="subject">
      <br>
      順位：<br> <input type="text" name="rank">
    </form>
  </body>
</html>

サンプルコードで使われている主な属性

上記のコードでは、<input>タグに対して次の2つの属性を指定しています。

  • type属性
    入力コントロールの種類を指定します。テキスト入力の場合は「text」を設定します。ほかにも「checkbox」（チェックボックス）、「radio」（ラジオボタン）、「submit」（送信ボタン）などを指定できます。
  • name属性
    コントロールに名前を付けるための属性です。フォーム送信時に入力値と一緒にサーバーへ送られ、どの項目のデータかを識別するために使われます。

より使いやすいフォームにするポイント

実務でフォームを作る場合は、<label>タグで入力欄とラベルを関連付けるとクリックしやすくなり、アクセシビリティも向上します。また、placeholder属性で入力例を表示したり、required属性で必須入力のチェックを行ったりすることで、ユーザーの入力ミスを減らせます。まずは基本的な<form>タグと<input>タグの組み合わせに慣れ、少しずつ機能を追加していくのがおすすめです。

  1. HTMLフォームでメールを送信する方法｜mailto属性の使い方をわかりやすく解説

    HTMLフォームを使ってメールを送信したい場合、<form>タグのaction属性にメールアドレスを指定します。その際、メールアドレスの先頭にmailto:を付けて、mailto:emailid@example.comのように記述します。この方法では、フォームの送信ボタンがクリックされると、訪問者の端末に設定されているメーラー（OutlookやThunderbirdなど）が自動的に起動し、入力内容がメール本文として渡されます。HTMLフォームでメールを送信するコード例以下は、HTMLフォームからメールを送信するための基本的なサンプルコードです。実際にブラウザで動作を確認してみてくだ

  2. 【HTML】textareaタグで複数行のテキスト入力エリアを作成する方法

    HTMLで複数行のテキスト入力欄を作成するには、<textarea>タグを使用します。cols属性とrows属性を指定することで、テキストエリアのサイズを自由に調整できます。このタグは主に<form>タグの中で使われ、お問い合わせフォームのコメント欄など、ユーザーが複数行にわたる文章を入力できるようにしたい場合に活用されます。 それでは、<textarea>タグで利用できる主な属性を一覧で確認していきましょう。 属性値説明 autofocusautofocusページ読み込み時に、テキストエリアへ自動的にフォーカスを当てることを指定します。 cols