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

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

HTMLのvalue属性は、HTMLドキュメント内で要素の初期値（デフォルト値）を定義するための属性です。この属性は、button、input、meter、li、option、progress、paramといったHTML要素に対して使用できます。

value属性はフォームやUIコンポーネントにおいて重要な役割を果たします。例えば、input要素では入力欄にあらかじめ表示されるテキストを指定でき、meter要素やprogress要素では現在の進捗状況を数値で表現できます。

構文

value属性の基本的な構文は以下のとおりです。

<tagname value="text"></tagname>

value属性の使用例

ここでは、meter要素にvalue属性を指定して、アップロードの進捗状況を視覚的に表示するサンプルを見てみましょう。min属性に最小値「0」、max属性に最大値「100」を設定し、value属性に現在の値「60」を指定しています。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML value属性のデモ</h1>
<p>アップロード中</p>
<meter min="0" max="100" value="60"></meter>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、ゲージの約60％の位置まで塗りつぶされたメーターが表示されます。これにより、アップロードが全体の60％完了していることがひと目でわかります。

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

まとめ

value属性は、要素の初期値を設定するためのシンプルながら便利な属性です。特にフォーム部品やプログレス表示など、ユーザーに状態を伝えたい場面で活用できます。各要素ごとの挙動の違いも理解しておくと、より効果的にWebページを構築できるでしょう。

  1. HTMLのrowspan属性とは？テーブルセルの行結合の使い方を解説

    HTMLのrowspan属性は、表（テーブル）のセルが縦方向にまたぐ行数を指定するための属性です。この属性を使用することで、複数の行にまたがるセルを作成でき、より柔軟なテーブルレイアウトを実現できます。rowspan属性を適用できるのは、td要素またはth要素のみです。それ以外のHTML要素には使用できない点に注意しましょう。rowspan属性の構文rowspan属性の基本的な構文は以下のとおりです。<タグ名 rowspan=数値></タグ名>「数値」には、セルがまたぐ行数を整数で指定します。たとえば「rowspan=2」と指定すると、そのセルは2行分の高さを持つことに

  2. HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

    HTMLのtabindex属性は、HTMLドキュメント内の要素がTabキーでフォーカスされる順序（タブ移動の順番）を定義するための属性です。tabindexはグローバル属性に分類されるため、すべてのHTML要素に対して使用することができます。通常、Tabキーを押すと要素はHTMLの記述順にフォーカスされますが、tabindex属性を指定することで、この順序を自由にコントロールできます。値には整数を指定し、数値が小さいものから順にフォーカスされます。tabindex属性の値について正の数（1以上）：指定した数値の順序でタブ移動が行われます0：HTMLの記述順にフォーカスされます（デフォルトの挙動