Loading...
属性値の種類

属性値の種類

公開
2018.05.03
更新
2018.10.29
  • 講座

  • HTML

本講座では属性値の種類について学んでいきます。

HTMLの属性値は3種類

1つ、inputタグを例に見てみましょう。

<input type="checkbox" value="値" checked>選択項目

ここには3つの属性が追加されています。

この3つはそれぞれ以下の異なった特徴を持っています。

  • type="checkbox" - 決まった値の中から指定できる
  • value="値" - 自由な値を指定できる
  • checked - 値を省略できる

HTMLの属性値はこの3つのうちのいずれかになります。

私たちが作っているindex.html内の属性もこの通りになっています。

<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのHTML</title>
  <link rel="icon" href="./favicon.ico">
  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  .outsideLink {
    color: orange;
  }
  </style>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
  <h2>ご意見フォーム</h2>
  <form action="./index.html" method="post">
    <div>
      お名前:<input type="text" name="name">
    </div>
    <div>
      ご意見:
      <textarea name="opinion"></textarea>
    </div>
    <div>
      回答:
      <input type="radio" name="lottery" value="need">希望する
      <input type="radio" name="lottery" value="notNeed">希望しない
    </div>
    <div>
      メールアドレス(回答を希望する方のみ):<input type="text" name="email">
    </div>
    <div>
      <button type="submit">送信する</button>
    </div>
  </form>
</body>
</html>

詳しく見ていきましょう。

決まった値の中から指定できる

index.htmlの中で値が決まっている属性は以下のものです。

  • lang
  • rel
  • target
  • method
  • type

これらの属性ですが、追加しない場合もあることに気が付くでしょうか?

lang属性はGieer講座初期の段階では追加していませんでした。
target属性は指定されているaタグと、指定されていないaタグがあります。

決まった値の中から指定できる属性値は、その中の1つが初期値として設定される場合があります。

属性 初期値
target _self
method get
type text

属性を追加しない場合でも、この初期値が設定されているものとして扱われます。
aタグを使用したリンクが自画面で遷移するのは、この初期値が働いているためです。

自由な値を指定できる

index.htmlの中で自由な値を指定できる属性は以下のものです。

  • href
  • action
  • class
  • name
  • value

hrefaction属性はパスを指定するという意味では限定的ですが、値自体は自由に設定できます。

class属性はHTML要素をグループ分けするため属性で、規則や慣例はあるものの基本的に自由な値を指定できます。

namevalue属性は日本語も含めて自由な値を設定できます。

値を省略できる

index.htmlの中ではまだ使用していませんが、属性値を省略できるものとしては以下のようなものがあります。

  • checked
  • required
  • disabled

これらの属性は値を必要とせず、属性名のみの追加で機能します。

実際に追加して動作を確認してみましょう。

動作確認

入力フォームを作ってみよう | 後編で、私たちはご意見フォームを作りました。

ご意見フォーム表示例

まずはこの中の回答希望のチェック項目

<div>
  回答:
  <input type="radio" name="lottery" value="need">希望する
  <input type="radio" name="lottery" value="notNeed">希望しない
</div>

「希望しない」のinputタグにchecked属性を追加してみます。

<div>
  回答:
  <input type="radio" name="lottery" value="need">希望する
  <input type="radio" name="lottery" value="notNeed" checked>希望しない
</div>

checked属性追加

初期状態で「希望しない」が選択された状態になりましたね。

このように、checked属性は選択型の入力項目要素に追加をすることで、初期状態でチェックを付けることができます。

続いてお名前・ご意見を入力する項目

<div>
  お名前:<input type="text" name="name">
</div>
<div>
  ご意見:
  <textarea name="opinion"></textarea>
</div>

inputタグとtextareaタグにrequired属性を追加してみます。

<div>
  お名前:<input type="text" name="name" required>
</div>
<div>
  ご意見:
  <textarea name="opinion" required></textarea>
</div>

required属性追加

見た目上は特に変化はありませんね。
では、ご意見を入力せずに送信をしてみます。

required属性追加

required属性追加

送信はできず、ご意見の入力を催促するメッセージが表示されました。 ※
このように、required属性は入力・選択を必須にすることができます。

disabled属性は入力項目要素を無効(入力不可・選択不可)にします。
今回のフォームでは追加しませんが、各入力項目要素に追加して動作を確認してみてください。


※ 表示のされ方やメッセージの内容はブラウザ毎に異なります

まとめ

本講座では

  • 属性値の種類

について学びました。

属性値と言っても、値が決まっているもの、規則があるもの、省略できるものと様々でしたね。
その分、HTML属性を使いこなすことで様々なことができるようになります。
便利だと感じたものを1つずつ、確実に身に付けていきましょう!

最終コード

  • index.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのHTML</title>
  <link rel="icon" href="./favicon.ico">
  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  .outsideLink {
    color: orange;
  }
  </style>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
  <h2>ご意見フォーム</h2>
  <form action="./index.html" method="post">
    <div>
      お名前:<input type="text" name="name" required>
    </div>
    <div>
      ご意見:
      <textarea name="opinion" required></textarea>
    </div>
    <div>
      回答:
      <input type="radio" name="lottery" value="need">希望する
      <input type="radio" name="lottery" value="notNeed" checked>希望しない
    </div>
    <div>
      メールアドレス(回答を希望する方のみ):<input type="text" name="email">
    </div>
    <div>
      <button type="submit">送信する</button>
    </div>
  </form>
</body>
</html>
  • link.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのリンク</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="./index.html">はじめてのHTML</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>
  • task.html
<!doctype html>
<html lang="ja">
<head>
  <title>HTML入門課題</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>HTML入門課題</h1>
  <div>このファイルはHTML入門課題で作成したものです。</div>
  <h2>ファイルリスト</h2>
  <ul>
    <li>
      <a href="./index.html">はじめてのHTML</a>
    </li>
    <li>
      <a href="./link.html">はじめてのリンク</a>
    </li>
  </ul>
</body>
</html>

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!