【これだけは押さえたい！】HTMLのvalue属性をやさしく解説します
山崎講師こんにちは。ゆうせいです。
今回は、HTMLのフォームで超重要な「value属性」について、新人エンジニアの方にもわかりやすく丁寧に解説していきます。
「valueってなんとなく使ってるけど、実際どういう意味があるの？」
「入力された値とは違うの？」
そんなモヤモヤを、この記事ですっきりさせましょう！
value属性とは何か？
一言で言えば「フォーム要素の値」
value属性とは、フォーム要素に関連付けられる“値（バリュー）”を表すものです。
その値は「初期表示される値」だったり、「ユーザーが送信する内容」だったりします。
例を見てみましょう。
<input type="text" name="nickname" value="やまだ">
このコードでは、テキストボックスの初期状態に「やまだ」と表示されます。
そして、そのまま送信すると、サーバーに送られる内容は次のとおりです：
nickname = やまだ
value属性が使えるHTML要素
主に使われるタグと動作
| 要素タグ | 説明 |
|---|---|
<input type="text"> | テキストボックスの初期値 |
<input type="radio"> | ラジオボタンの「どれを選んだか」 |
<input type="checkbox"> | チェックボックスの送信値 |
<option> | セレクトボックスの選択値 |
<button>（type="submit"） | 送信ボタンを押したときの送信値 |
いろいろな場所で使える万能な属性なんですね！
フォーム送信時のvalueの役割
入力値と送信値の関係
ユーザーがフォームに入力した内容は、name属性とvalue属性で次のように組になって送られます：
<input type="text" name="email" value="sample@example.com">
フォームを送信すると：
email = sample@example.com
という形でサーバーにデータが送信されます。
Q：ユーザーが値を書き換えたら？
もちろん、その変更後の値が送られます。
各inputタイプにおけるvalueの使い方
テキスト系（text, emailなど）
<input type="text" name="user" value="初期値">
→ フォームの最初に「初期値」が入力された状態になります。
ラジオボタンやチェックボックス
<input type="radio" name="color" value="red"> 赤
<input type="radio" name="color" value="blue"> 青
ユーザーが「青」を選んだら、サーバーにはこう送られます：
color = blue
<input type="checkbox" name="agree" value="yes">
チェックを入れて送ると：
agree = yes
【注意】
valueを省略したチェックボックスの場合、送信される値は「on」になります。
<input type="checkbox" name="agree">
→ agree = on が送られる。
セレクトボックス（selectタグ）
<select name="city">
<option value="tokyo">東京</option>
<option value="osaka">大阪</option>
</select>
大阪を選んで送信すれば：
city = osaka
このように、表示されている文字（東京／大阪）とは別に、送信される値はvalueで決まるという点がポイントです！
value属性のメリットと落とし穴
メリット
| 内容 | 説明 |
|---|---|
| 初期状態を指定できる | 入力欄を空にせずヒントとして使える |
| サーバーに正確な値を送れる | UIとは別に裏側の意味を定義できる |
| ボタンや選択肢の判別ができる | valueで何を選んだか識別できる |
よくある落とし穴
| 内容 | 解説 |
|---|---|
valueを書き忘れる | ラジオボタンやチェックボックスで何を選んだか分からなくなる |
| ユーザー入力と混同する | valueはあくまで「初期値」、ユーザーが書き換えたらその内容が送信される |
| 表示テキストとvalueを混同する | セレクトボックスでは<option>内の文字ではなく、valueが送られる |
JavaScriptとの連携
値の取得と設定
【取得】
const val = document.querySelector('input[name="email"]').value;
→ テキストボックスの現在の値を取得できます。
【設定】
document.querySelector('input[name="email"]').value = "変更後の値";
→ ユーザー入力の値を上書きできます。
よくある質問（FAQ）
Q1. placeholderとどう違うの？
とてもよく混同されますが、違いははっきりしています。
| 属性 | 役割 |
|---|---|
value | 実際に送信される値、初期入力値 |
placeholder | ヒント表示、送信はされない |
<input type="text" value="山田" placeholder="名前を入力してください">
→ 表示は「山田」、プレースホルダーは無視されます。
今後の学習のヒント
value属性を正しく理解すれば、フォーム開発の自由度がグッと高まります。
次に学ぶべきテーマとしては：
name属性との組み合わせ（キーと値）- JavaScriptとフォームの連携（リアルタイムでの更新やバリデーション）
defaultValueとの違い- 動的フォームの構築（選択肢をJavaScriptで変更）
「ユーザーが入力した値を、どうやって裏側で取り扱うか？」という視点で学んでいくと、実務でも確実に役立ちます！
ほかにも気になるHTML属性があれば、遠慮なく聞いてくださいね！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
