HTMLでvalue属性を使って入力初期値を指定する方法を現役エンジニアが解説【初心者向け】
初心者向けにvalue属性を使ってHTML内の入力初期値を指定する方法について解説しています。value属性はフォームから入力されたデータを扱う際に必要となるものです。代表的な使い方と初期値の設定の例を確認しましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
value属性を使ってHTML内の入力初期値を指定する方法について解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

今回は、HTMLに関する内容だね!

どういう内容でしょうか?

value属性を使ってHTML内の入力初期値を指定する方法について詳しく説明していくね!

お願いします!
value属性とは
value属性は、送信する値やリストの項目番号を設定できる属性です。例えば、公開しているWebサイトに対して、ユーザーが入力した値をサーバーのアプリケーションに送信する際に使用されます。
おもにinputタグのtype属性に記述が必要になるため、付随する属性としてvalue属性を記述します。
value属性が使えるタグ
- inputタグ
- buttonタグ
- optionタグ
- olタグ内部のliタグ
- progressタグ
- meterタグ
- dataタグ
inputタグはvalue属性を必要とする代表格です。加えて、value属性を定義できるタグには、上記の箇条書き通りに複数の種類があります。
次の項目では、代表的な例を紹介していきます。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
value属性を使って初期値を指定しよう
以下、サンプルコードです。
HTML
<form> <input type="checkbox" name="check" value="check_1" checked="checked"> <input type="checkbox" name="check" value="check_2"> <input type="number" name="numberbox" value="1"> </form>
実行結果
実際にWebアプリケーションと連動させて実用するためには、formタグに属性の設定や送信の機能も実装が必要になります。上記のサンプルコードに関しては、value属性の初期値の定め方の例として参考にしてください。
なお、下記のように初期値を空として定めることも可能です。
HTML
<form> <input type="number" name="numberbox" value="">
</form>
実行結果
HTML
<form> <input type="submit" value="send"> <button type="button" value="send">send to</button> </form>
inputタグのtype属性の値にsubmitが指定されている場合は、そのタグのvalue属性の値がラベルとして表示されます。
実行結果
実用性はないものの、olタグのliタグだけ、value属性の値を番号として連携することが可能です。
HTML
<ol> <li value="0">リスト第0項</li> <li value="1">リスト第1項</li> <li value="2">リスト第2項</li> <li value="3">リスト第3項</li> <li value="4">リスト第4項</li> <li value="5">リスト第5項</li> <li value="6">リスト第6項</li> <li value="7">リスト第7項</li> <li value="8">リスト第8項</li> <li value="9">リスト第9項</li> </ol>
実行結果
監修してくれたメンター
井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |

value属性を使ってHTML内の入力初期値を指定する方法がよくわかりました!

ゆかりちゃんも分からないことがあったら質問してね!

分かりました。ありがとうございます!
TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。