HTMLでname属性を使ってフォームのフィールドに名前をつける方法

Tweet

Pocket

はじめに

HTMLのname属性を使って要素に名前をつける方法について、プログラミング初心者の方に向けて説明いたします。

この記事は、オンラインプログラミング学習講座「Webエンジニア入門総合コース」サポート記事です。

name属性とは

次のHTMLの要素に対して、name属性をつかって要素の名前をつけることができます。

• <button></button>

• <form>

• <fieldset>

• <iframe>

• <input />

• <keygen>

• <object>

• <output>

• <select>

• <textarea>

• <map>

• <meta>

• <param>

1番利用頻度が多いのはフォームName属性は、送信されたフォームでサーバがフィールドを識別するために1番よく使われます。
例ログインフォーム。「ユーザーネーム」入力欄、「パスワード」入力欄、「ログイン」ボタンがあります。

<form action="#" method="post">
  <input type="text" name="username" placeholder="ユーザーネーム">
  <input type="password" name="password" placeholder="パスワード">
  <input type="submit" value="ログイン">
</form>

ブラウザからフォームのデータがサーバへ送信された時、サーバサイドのプログラムは、- name属性がusernameだから、ユーザーネームとして処理しよう- name属性がpasswordだから、パスワードとして処理しようということができるようになります。

おわりに

この記事では、HTMLのname属性について学習しました。
「Webエンジニア入門総合コース」では、データベースの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって学習できます。

Web開発に必要なプログラミングスキルを1つのコースで沢山学べてお得です。264レクチャー・18時間の大型コースとなっています。

内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！

Bestseller ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！中村祐太 （Yuta Nakamura）, Proglus（プログラス） プログラミング教室カフェのウェブサイト制作やフォトギャラリーの制作、Ruby on Rails を使ったタスク管理アプリ開発、 MySQL、Bootstrap5、AWS Cloud9、GitなどWeb開発に必要な様々なスキルを1つのコースで沢山学ぼう！¥24,000¥19,200 4.3 (4920 ratings)373 lectures, 24 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

Tweet

Pocket