HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説

HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。

基本構文

value属性の基本的な書き方は以下のとおりです。

<option value="テキスト"></option>

value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。

使用例

ここでは、好きな科目を選択するセレクトボックスにvalue属性を設定したサンプルを紹介します。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>HTML value属性のデモ</h1>
<p>好きな科目を選んでください：</p>
<form method="post" action="">
<select name="subject">
<option value="Physics">物理</option>
<option value="Chemistry">化学</option>
<option value="Biology">生物</option>
</select>
<input type="submit" value="送信" class="btn">
</form>
</body>
</html>

実行結果

このコードを実行すると、「物理」「化学」「生物」という3つの選択肢を持つドロップダウンリストが表示されます。ユーザーがいずれかの科目を選んで送信ボタンをクリックすると、画面上の日本語ラベルではなく、value属性で指定された英語の値（Physics、Chemistry、Biology）がサーバーへ送信されます。

ポイントまとめ

  • value属性はフォーム送信時にサーバーへ渡す実際の値を定義します。
  • 表示用テキストと送信用データを分けられるため、多言語対応やシステム内部処理に便利です。
  • <select>要素にname属性を付けることで、送信時のパラメータ名を明示的に指定できます。
  1. HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説

    HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目

  2. HTMLのvalue属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのvalue属性は、HTMLドキュメント内で要素の初期値（デフォルト値）を定義するための属性です。この属性は、button、input、meter、li、option、progress、paramといったHTML要素に対して使用できます。value属性はフォームやUIコンポーネントにおいて重要な役割を果たします。例えば、input要素では入力欄にあらかじめ表示されるテキストを指定でき、meter要素やprogress要素では現在の進捗状況を数値で表現できます。構文value属性の基本的な構文は以下のとおりです。<tagname value="text">