【HTML初心者入門】<name>属性とは何?使い方も解説! | WEBCAMP NAVI
【7月枠も残りわずか】転職保証コース

【HTML初心者入門】<name>属性とは何?使い方も解説!

みなさんはHTMLの学習をしていませんか?

今回の記事では<name>タグの使い方や注意点について紹介していきます!

要素の名前を指定する

<name>属性 は、フォーム,フレーム,コントロール,オブジェクトなどの多数の要素で,「要素の名前」を指定します。

使用パターンについて

主に以下のようなパターンがあります。

 1. JavaScript

要素にアクセスする際, この name 属性 の値を用いて,対象要素を特定することができます。

2. input 要素

フォームのデータが送信されるときに,name 属性 の値が付加されており,対象とする要素のデータに簡単にアクセスできます。

また,input 要素 では, name=”_charset_” と name=”isindex” という指定は特別な意味を持ちます。

1. name=”_charset_”

フォームデータのエンコードの種類 を送信します。

2. name=”isindex”

フォームデータの送信の際特別な扱いがなされ, HTML5 では廃止になっ た isindex 要素の動作がエミュレートされます。

3. iframe 要素 と object 要素

name 属性 の値は, a 要素 の target属性 から参照してHTML文書の表示先を指定する 際に使用できます。

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

各要素での役割とは?

1. form 要素

フォームの名前 を指定します。同じ文書中のほかのフォームと重複する名前は指定できません。

2. iframe 要素

フレームの名前 を指定します。

この名前を a 要素 の target属性 で参照することにより,リンクから複数の HTML文書を切り替えて表示することが出来ます。

・多くのテンプレートを知りたい方は、「【初心者向け】おすすのhtmlのテンプレート7選!」の記事を参考にしてください。

3. input 要素

入力コントロールの名前 を指定します。

フォームのデータが送信されるときには,この名前とデータがセットになっており,サーバ側でどのコントロールのデータかを特定するために使われます。

4. map 要素

マップの名前 を指定します。

この name属性 の値はマップの画像を与える img 要素 の usemap属性 によって指定して,画像(img 要素)と マップ(map 要素) を結び付けます。

5. object 要素

object 要素 を使って別の HTML文書を埋め込むと,iframe 要素 と同様に HTML文書を表示させる領域が作成されます。name属性 で,この 領域の名前 を指定します。

また,この名前を a 要素 の target属性 で参照すれば,リンク先のコンテンツが object 要素 のコンテンツとして表示されるようになります。

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

サンプル

HTML
<!DOCTYPE html>
<html>
<head>
    <title>WEBページ演習</title>
</head>
<body>
    <form method="get" action="/search" 
    <role="search">
    <fieldset>
    <legend accesskey="s">サイト内検索 
    </legend>
    <input type="search" name="search" value="" placeholder="検索ワードを入力" />
    <input type="submit" name="submit" value="検索" />
    </fieldset>
    </form>
    </body>
</html>

まとめ

初心者の方向けにnameタグを紹介していきましたが、いかがでしたか?

nameタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね!

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率は98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 12019年4月時点