HTMLでvalue属性を使って入力初期値を指定する方法を現役エンジニアが解説【初心者向け】

value属性を使ってHTML内の入力初期値を指定する方法について解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座の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など多岐にわたる。

 

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。