Chap21-1 フォームの仕組みとタグ

お問い合わせページやログイン画面などで見られるフォームについて学習します。
UIやUXとも関係が深いHTMLタグについて、仕組みやタグの種類を理解することが目的です。

Contents

フォームの仕組み

葉書を書くことも少なくなってきたと思いますが、フォームは葉書を書いて送るのと非常に似ています。

<form action="宛先" method="post">
 
  <input type="submit" name="送信">
</form>

これで葉書とオモテ側は完成です。
あとはウラ側の内容ですが、2行目に画面に表示する内容と、ハガキに書く内容を同時に記述するので難しくなります。

<label>
  メールアドレス <input type="email" name="メールアドレス">
</label>

<label>で囲まれた部分が画面に表示されます。
<input>はテキストフィールドと呼ばれるテキスト入力用のパーツが表示され、入力された内容とname属性の値がハガキのウラ側に書かれます。

<input>はフォームで使われる、UIパーツと言えるでしょう。
ユーザーが、直接操作する部分になります。

種類はたくさんありますが、よく使うものから順に覚えていくといいでしょう。

は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。端末とユーザーエージェン…

developer.mozilla.org

See the Pen 21-1 by Rayout-gw (@Rayout-gw) on CodePen.

最初はname属性とvalue属性で悩みますが、nameが質問・valueが回答と考えると、わかりやすくなるでしょう。