0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HTMLのformタグについて(研修備忘録)

Posted at
Page 1 of 2

データを送信する際に用いられるformはその送信方法や形式を指定できる。

1.actionとmethod

action

action属性はフォームの送信先を指定するために用い、<form action=○○>の形で書く。指定がない場合は現在のページURLが送信先となる。

method

method属性はデータの送信方法を指定するために用いる。 今回の研修で使ったものはgetとpostで、<form method=○○>の形で書く。 検索などにかけるとgetはURLにデータを付けて送信するもので、情報を取得したり検索したいときの用い、postはデータを本文に含めて送信する、入力された情報を保存したいときに使うものであると出てくる。今回研修では会員登録ページを作成したのでログイン、登録、編集などpostを使うものが多かった。

2.フォーム要素

input

ユーザー入力欄の作成時に用いる。 input type=○○でテキスト、ボタン、チェックボックスなど入力形式を指定しユーザーの利便性を高めよりユニークなものを作成することもできる。

今回使ったもの
text:1行のテキスト入力欄。名前や住所などの入力に使用。
password:入力内容が伏せ字(●など)で表示される欄。パスワード入力に使用。
email:メールアドレスの入力欄。形式チェックが自動で行われる。
checkbox:複数選択可能なチェックボックス。
radio:単一選択のラジオボタン。複数の選択肢から1つだけ選ばせたいときに使用。
file:ファイルをアップロードするためのボタン。
submit:フォームを送信するボタン。
reset:フォームの入力内容をリセットするボタン。

label

入力フォームのラベル付け。フォームに何を入力するべきか説明するもの。のfor属性に、対応するフォーム部品のidを指定すると、ラベルをクリックすると対応する入力欄が自動的にフォーカスされるようになる。

button

ユーザーがフォームを操作するためのボタンを設定する。には主に3つのタイプがある。 1つ目はtype="submit"で、これはフォームの内容をサーバーに送信するためのボタン。またフォーム内にを配置する際、type属性を省略すると自動的にsubmitとして扱われる。 2つ目はtype="reset"で、フォームに入力された内容をすべて初期状態に戻すためのボタン。ユーザーが入力を修正するときに使う。 3つ目はtype="button"で、これはフォームの送信やリセットなどの動作を持たず、JavaScriptなどで任意の処理を実行するために使われる。例えば、クリック時にアラートを表示したり、別の処理を呼び出したりすることが可能。

3.その他研修で用いたもの

select要素:ユーザーに複数の選択肢の中から1つ(または複数)を選ばせるためのフォーム部品。ドロップダウンメニューとして表示されることが一般的で、選択肢は要素を使って定義する。

option要素:の中に配置される個々の選択肢を表す。各にはvalue属性を指定することで、選択されたときに送信される値を設定できる。表示されるテキストは、タグの中に記述する。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?