TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでinputタグのvalue属性に初期値を設定する方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLでinputタグのvalue属性に初期値を設定する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLでinputタグのvalue属性に初期値を設定する方法について解説しています。inputは文字入力フォームやボタンといった各種入力項目を作成するタグです。value属性による初期値の表示方法について、書き方と画面上での表示を確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLでinputタグのvalue属性に初期値を設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

inputタグのvalue属性に初期値を設定する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

inputタグとは

inputタグとはHTMLの入力部品を表示させるためのタグです。inputタグのtype属性にtextを指定することで、テキストボックスを表示させることができます。以下のコードでテキストボックスが表示できます。

<input type="text">

 

value属性について

HTMLのタグは、いくつかの属性を指定することで、表示形式を変えたり、コントロールすることができます。inputタグは、タグ内にvalue=”xxx”という追加属性を指定することができます。

 

[PR] Webデザインで副業する方法とは

初期値とは

ブラウザに画面を表示した時に、既に入力済みの値のことを初期値と呼びます。

 

value属性に初期値を設定してみよう

テキストボックスには、初期値をあらかじめ表示させることができます。inputタグにvalue属性を追加して表示させたい内容を指定してみましょう。

以下のように指定します。

<input type="text" value="こんにちは">

ブラウザ画面で確認すると、あらかじめ「こんにちは」と入力されたテキストボックスが表示できます。

実際のWebサイトでは、ユーザー情報の更新フォームなどで登録済みの入力値（名前など）が初期表示されますが、仕組みはこのようになっています。

 

まとめ

inputタグにvalue属性で値を指定することでテキストボックスに初期値を表示させることができます。

 

監修してくれたメンター

寺谷文宏

WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAchademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

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

大石ゆかり

分かりました。ありがとうございます！

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

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

記事を検索

関連するキーワード

関連する記事

HTMLのtextarea要素の使い方を現役デザイナーが解説【初心者向け】

HTMLのtextarea要素の使い方について解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が...
HTML

サイトfavicon.htmlkit.comでFaviconを作成する方法を現役デザイナーが解説【初心者向け】

サイトfavicon.htmlkit.comでFaviconを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初...
HTML

今さら聞けない！HTMLとは【初心者向け】

この記事は、Webページの仕組みである「HTML」とは何かを説明します。 名前は聞いたことがあるけど、HTMLって何なんだろう Web制作って、...
HTML

HTMLのリンクで別ウィンドウを開く方法を現役エンジニアが解説【初心者向け】

HTMLのリンクで別ウィンドウを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そも...
HTML

すぐに使いたい！レスポンシブWebデザイン対応のHTMLテンプレート30選

スマートフォンやタブレットの普及に伴って、Webサイトを多デバイスに対応することが増えてきました。   その1つの解決策として、「レスポン...
CSS

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

value属性を使ってHTML内の入力初期値を指定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

あわせてよく読まれている記事

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

value属性を使ってHTML内の入力初期値を指定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   目次inputタグとはvalue属性について初期値とはvalue属性に初期値を設定してみようまとめ監修してくれたメンター   そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 value属性を使ってHTML内の入力初期値を指定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   value属性とは value（バリュー）属性は、主にinputタグなどの入力フィールドの初期値を設定できます。 ユーザーによる入力があった場合は、value属性に設定されていた初期値が入力された内容に変更され、サーバへ送信されます。 初期値はあらかじめ表示させておく入力例と混同されやすいのですが、入力例の場合はvalue属性ではなくplaceholder属性を利用しましょう。   value属性が使えるタグ input button option ol内部のli progress meter data inputタグでは、入力フォームからサーバへ送信する初期値を指定できます。 buttonタグやoptionタグでは、実際に送信する値を表示させる内容とは違う値にしたい場合に、value属性で指定できます。 olタグ内のli（番号付きリスト）では、各リストの番号を設定できます。   次項では、value属性で初期値を指定する代表的な方法を紹介していきます。   [PR] Webデザインで副業する方法とはvalue属性で初期値を指定する方法 主にinputタグのvalue属性において、初期値を指定する方法を紹介します。 基本的なテキスト入力欄の例 See the Pen Untitled by nomallica (@nomallica) on CodePen. ※実際にWebアプリケーションと連動させて実用するためには、formタグへのactionやmethod属性の設定、その他送信機能の実装も必要になります。   なお、下記のように初期値を空に指定することも可能です。 初期値を空に指定した例 See the Pen 初期値を空の状態の例 by nomallica (@nomallica) on CodePen.   以下は、olタグのli（番号付きリスト）の各リスト番号を任意の数字に設定した例です。 リスト番号をvalue属性で設定した例 See the Pen リスト番号をvalue属性で設定した例 by nomallica (@nomallica) on CodePen.   まとめ 今回はHTMLでvalue属性を使って初期値を指定する方法について解説しました。 入力フォームからサーバのアプリケーションなどにデータが送信される際には、表示されている内容ではなくvalue属性に設定されている値が送信されます。 入力が必須でない項目など、初期値をあらかじめ設定しておくことで入力する側の負担軽減にもつながりますので、ぜひ覚えておきましょう。   大石ゆかり value属性を使ってHTML内の入力初期値を指定する方法がよくわかりました！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ラジオボタンとチェックボックスを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力フォームの選択ボタン 入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。 <input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法 をご覧ください。 ラジオボタン、チェックボックスは以下のタグで表示することが可能です。 ・ラジオボタン  <input type=”radio”> 選択肢のなかから、ひとつだけを選択するボタン （※同一name属性内で、一項目しか選択できない） ・チェックボックス  <input type=”checkbox”> 選択肢のなかから、複数選択ができるボタン （※同一name属性はひとまとまりのデータとして扱われる） ・value属性 選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。 ・name属性 要素（ここでは<input type=”●●”>）に名前をつけて、なんの要素（選択ボタン）であるかを指定します。   大石ゆかり typeを使うと他にもいろいろ設定できるんですかー？ 田島悠介 他にも送信ボタンであったり、文字を入力できるフォームも簡単に作れるんだよ！ 大石ゆかり へぇ〜じゃあアンケートページとかでよく使われてそうですね！   それでは具体的な実装方法をみていきましょう。   ラジオボタン ラジオボタンという名前は、昔の自動車に搭載されていたカーラジオが、ひとつの局のボタンを押すと、他の局のボタンが選択できない仕様だったことから来ているそうです。 ラジオボタンは選択肢のなかから、ひとつだけを選択する入力ツールになります。   <input type=”radio”>にname属性を”gender”、valueを”male”と”female”に設定して性別選択ボタンをつくりましょう。タグの終わりには、実際にブラウザで表示される項目名(男性・女性)を書きます。選択肢の値(value)が”male”と”female”の、”gender”という名前(name)がついたラジオボタン（<input type=”radio”>）です。 <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性   これでどちらか一方を選択できるボタンができました。   上記のHTMLをコピー&ペーストして、もうひとつラジオボタンをつくってみましょう。ここでは、Webページの訪問者からサイトを知った経緯を知りたいと仮定して、選択肢の値(value)にサイトを知るきっかけとなった項目を設定し、”trigger”という名前のついたラジオボタンをつくります。 <input type="radio" name="trigger" value="facebook">facebook <input type="radio" name="trigger" value="twitter">twitter <input type="radio" name="trigger" value="hatebu">はてなマーク <input type="radio" name="trigger" value="syoukai">知人からの紹介   今度は、”gender”と”trigger”の2つの選択ツールができました。 このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。 複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう。   [PR] Webデザインで副業する方法とはdisabled属性 disabled属性は、フォーム部品を無効化することができます。 この属性で指定することで、フォーム部品の選択や書き換えを行うことができます。 用途の目的としては、同じフォーム流用するが、ユーザーの選択肢によってdisabeld属性を使用し一部の選択肢の書き換えを禁止する時に使用します。 disabled属性の実例 <!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <!-- 性別選択 --> <input type="radio" name="gender" value="male" disabled/>男性 <input type="radio" name="gender" value="male"/>女性
HTML

HTMLのinput要素でパスワードの入力欄を作成する方法を現役エンジニアが解説【初心者向け】

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次inputタグとはvalue属性について初期値とはvalue属性に初期値を設定してみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 input要素でパスワードの入力欄を作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   inputタグで使えるパスワード属性について inputタグのtype属性の値に「password」を指定することで、パスワード専用の入力欄になります。 以下のように記述することで、パスワード入力時には文字がドット（●）のような記号に置き換えられ、入力内容が容易に読み取られなくなります。 <input type="password">   以下のResult画面にある入力欄に、実際に入力して確認してみましょう。 See the Pen Untitled by nomallica (@nomallica) on CodePen.   また、パスワード属性を指定したinputタグには以下の属性も指定することができ、入力時の制限や補助的な表示を加えることが可能となっています。 属性 説明 autocomplete ブラウザ等による自動入力を許可するかどうかを設定できる。 pattern 形式に沿った文字が入力されるように、正規表現を使って制限できる。 placeholder 入力時のヒントを表示できる。 required 入力が必須の項目にする。 readonly 入力不可で読み取りのみに制限できる。値の送信は可能。   以降では、それぞれの属性について詳しく見ていきましょう。   パスワード属性を指定したinputタグに追加できる属性 autocomplete属性 以下のようにautocomplete属性を追加することで、入力の際にオートコンプリートを機能させるかどうかを制御できます。 <input type="password" autocomplete="current-password"> オートコンプリートとは、ブラウザやパスワード管理ツール等が、自動的にパスワード入力欄を埋めるしくみのことです。 入力を容易にする便利な機能ですが、パスワード管理のセキュリティを下げることにも繋がりますので、使い所をよく考えて指定しましょう。 指定できる値は以下になります。 値 説明 on 入力時にオートコンプリートを許可します。 off 入力時にオートコンプリートを許可しません。 current-password ブラウザ等に記録されているサイト専用のパスワードを自動入力します。 new-password 新規入力フォーム等で新しいパスワードを提案して自動入力します。   pattern属性 形式に沿った文字が入力されるように、正規表現を使って制限できます。 例えば以下のようにpattern属性の値を指定することで、半角英数字6文字以上を満たすことができない入力値がエラーになります。 <input type="password" pattern="^([a-zA-Z0-9]{6,})$" title="半角英数字6文字以上で入力ください">   正規表現がよくわからない場合は、業務で役立つ！jQueryで覚えておくべき正規表現とは【初心者向け】を読むと基本的な理解が深まります。   placeholder属性 以下のように、値に入力時のヒントとなる文字列を設定することができます。 <input type="password" placeholder="半角英数字6文字以上のパスワードを入力"> このヒント表示により、ユーザー側は入力欄にどのような情報が求められているのかを把握できます。   required属性 以下のようにrequired属性を設定することで、入力必須の項目にできます。 <input type="password" required>   readonly属性 以下のようにreadonly属性を設定することで、読み取りのみで入力不可の項目にできます <input type="password" readonly> 値はサーバーに送信可能です。   [PR] Webデザインで副業する方法とはinputタグでパスワードの入力欄を作成してみよう 以下のようにシンプルなパスワード入力欄を作成してみましょう。   HTML <form> <input type="password" value="" name="sample" maxlength="10"> </form> inputタグの属性として、nameは、入力装置の識別子（ラベル）として、名前を定義することになります。 また、maxlength属性に定める数値は、入力文字数の上限数を定めることになります。   表示結果 See the Pen Untitled by nomallica (@nomallica) on CodePen.   まとめ 本記事では、HTMLのinput要素でパスワードの入力欄を作成する方法を以下の内容で解説しました。 inputタグで使えるパスワード属性について パスワード属性を指定したinputタグに追加できる属性 パスワード入力欄の作成方法 input要素を理解することで、パスワード入力欄に限らず様々な入力フォーム作成を実現します。 ぜひ使いこなせるように覚えておきましょう。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

HTMLでoptionタグにselected属性を使い初期値を設定する方法を現役エンジニアが解説【初心者向け】

HTMLでoptionタグにselected属性を使って初期値を設定する方法について解説します。 そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。 目次inputタグとはvalue属性について初期値とはvalue属性に初期値を設定してみようまとめ監修してくれたメンター   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 optionタグにselected属性を使って初期値を設定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   selectタグとoptionタグの関係 selectタグとは、セレクトボックスを表示するタグです。 optionタグとは、selectタグ内で使用することで、選択肢の1つを作成可能です。 <select>タグと<option>タグで、入力フォームなどで使用される選択式メニューを設置できます。 <select>タグで項目(フォーム)を作成し、選択する値(選択肢)は<option>タグで作成できます。   2つのタグを活用したHTMLは以下の通りです。 HTML <select name="number">   <option value="1">1</option>   <option value="2">2</option>   <option value="3">3</option>   <option value="4">4</option>   <option value="5">5</option> </select> 実行結果 See the Pen select1 by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   解説 ユーザーによって、例えば1を選択する操作がされるとき、次のコードが実行されます。 <select name="number">   <option value="1">1</option> 選択された値は、<select>タグのname属性と<option>タグのvalue属性がセットで送信されます。 今回の場合、ユーザーはnumberが1という情報を選択して送信することが可能です。     selected属性で初期値を選択する方法 Webページを読み込んだ際に、下記例のように、<select>タグで作成された選択式メニューの一番上の<option>タグの値が、選択されている状態となります。 例：<select>タグで初期の一番上の「1」と「あ」が選択された状態   HTML <select name="number">   <option value="1">1</option>   <option value="2">2</option>   <option value="3" selected>3</option>   <option value="4">4</option>   <option value="5">5</option> </select>   解説 selected属性を使用することによって、初期の選択値を自由に設定することが可能です。 selected属性は初期選択値にしたい<option>タグに設定します。 今回は次のコードで、3を初期の選択値として設定しています。 <option value="3" selected>3</option>   実装結果 See the Pen select3 by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   [PR] Webデザインで副業する方法とはoptionタグとselected属性を使って選択式メニューを作ってみよう 1〜5、あ〜お、A〜Eから1つ値を選択させるような選択式メニューを作成してみましょう。 初期選択値は3、い、Eになるようにします。   以下はoptionタグとselected属性を使用したコードの例です。 HTML <select name="number">   <option value="1">1</option>   <option value="2">2</option>   <option value="3" selected>3</option>   <option value="4">4</option>  
HTML

HTMLでドロップダウンメニューを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、ドロップダウンメニューを表示する方法についてテックアカデミーのメンター（現役エンジニア）が初心者向けに解説します。 目次inputタグとはvalue属性について初期値とはvalue属性に初期値を設定してみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。     田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ドロップダウンメニューを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ドロップダウンメニューとは ドロップダウンメニューは、たくさんの選択肢の中からどれかひとつを選ぶタイプのメニューバーです。 プルダウンメニューとも呼びます。 ラジオボックスやチェックボックスと異なり、たくさんの選択肢がある場合に場所をとらずに表示することができます。   HTMLでは下記のタグを組み合わせて実装します。 <select>タグ <select>タグとは、選択肢の中から選ぶタイプの入力項目を作るタグです。 <select></select> name属性 name属性とは、ドロップダウンメニューの名前を設定する属性です。 name属性に設定した名前は、選択項目をデータとして送信する際に、データの受け取り手が値を取得する際に利用します。 name属性は、以下のように記述します。 <select name="month"></select> multiple属性 multiple属性は、ドロップダウンメニューで複数項目を選択したい場合に設定する属性です。 multiple属性は、以下のように記述します。 <select multiple></select>   <option>タグ <option>タグは、ドロップダウンメニューに表示される選択肢を作るタグです。 <option>タグは、以下のように記述します。 <option>いち</option>   value属性 value属性は、選択項目をデータとして送信する際に、データの受け取り手に渡す値を設定する属性です。 value属性は、以下のように記述します。 <option value="1">いち</option>   <optgroup>タグ <optgroup>タグは、複数の<option>タグをグループ分けするタグです。 グループ分けをすることで、メニューをわかりやすく表示できます。 <optgroup>タグは、以下のように記述します。 <optgroup> <option value="tokyo">東京</option> </optgroup>   label属性 label属性は、<optgroup>タグでグループ分けした項目のラベルを設定する属性です。 label属性は、以下のように記述します。 <optgroup label="関東"> <option value="tokyo">東京</option> </optgroup>     大石ゆかり ドロップダウンメニューもフォームの部品なんですか？ 田島悠介 そうそう。都道府県を選んだり、月を選んだりする場合に向いている項目なんだよ。 大石ゆかり 複数の中から1つ選ぶ、という感じですね。 田島悠介 そうだよ。では、実際に書いてみよう！   ドロップダウンメニューを実装する それでは実際にコードの例を見ていきましょう。   今回は月を選択するドロップダウンメニューをつくります。 <option>タグで項目を囲み、valueを設定します。 name属性が”month”の<select>タグで<option>を囲みましょう。 <select name="month"> <option value="jan">1月</option> <option value="feb">2月</option> <option value="mar">3月</option> <option value="apr">4月</option> <option value="may">5月</option> <option value="jun">6月</option> <option value="jul">7月</option> <option value="aug">8月</option> <option value="sep">9月</option> <option value="oct">10月</option> <option value="nov">11月</option> <option value="dec">12月</option> </select>   ブラウザで表示すると、小さなドロップダウンメニューが表示されました。 ドロップダウンメニューをクリックすると、1月から12月の項目が縦に並びます。     月を選択するドロップダウンメニューと同じように、日にちのドロップダウンメニューも追加してみましょう。   月と日にちを組み合わせて、簡単な日付の選択バーができましたね。   つづいて、都道府県を選択するドロップダウンメニューをつくってみましょう。 name属性で”address”と指定し、<option>タグで各都道府県の項目をつくり、valueに県名を指定します。 さらに、項目を選択しやすくするために<optgroup>タグで<option>タグをグルーピングしましょう。   name属性、value属性で指定した値は、送信された先でデータの集計や保存をする際に使われます。   <optgroup label="関東"> <option value="tokyo">東京</option> <option value="chiba">千葉</option> <option value="saitama">埼玉</option> </optgroup> <optgroup label="関西"> <option value="osaka">大阪</option> <option value="hyogo">兵庫</option> <option value="kyoto">京都</option> </optgroup> <optgroup>タグで<option>をグルーピングすると、都道府県名の頭に<optgroup>タグで指定した”関東”と”関西”が表示されました。   “関東”と”関西”をグルーピングすることで、ユーザーも探しやすそうですね。   選択肢の多い項目はラジオボタンやチェックボックスよりも、ドロップダウンメニューを利用して表示したほうが表示スペースがコンパクトになり、ページがすっきりします。   選択肢が多いときには<optgroup>タグを適宜利用して項目を整理すると、ユーザー目線の使いやすいページが作れます。     今回はドロップダウンメニューを表示する方法についてご紹介しました。 HTMLでフォームをさらにカスタマイズしたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。   [PR] Webデザインで副業する方法とは執筆してくれたメンター メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり selectタグがあって、その中にoptionタグで選択項目を表示しているっていうのはわかるんですが・・・。 田島悠介 HTMLではできないけど、PHPプログラミングで送ったデータを受け取れるんだよ。selectのname属性の設定値をもとに、選択項目の値を受け取れるんだ。気になる場合は、PHPでセレクトボックスから値を受け取る方法を読んでみて。 大石ゆかり selectタグも、ページ表示時に項目を選択状態にしておくことはできるんですか？ 田島悠介 できるよ！optionタグにselectedを設定することで、optionタグの項目を選択状態にできるよ。チェックボックスの時は、checkedだったね。 HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

PHPで配列のkeyを取得する方法を現役エンジニアが解説【初心者向け】

今回は、PHPで配列のkeyを取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPで配列のkeyを取得することで、配列で使われているkeyを調べることができます。 実務でも配列のkeyを利用した値の操作を行いますので、ぜひ学習してみてください。   目次inputタグとはvalue属性について初期値とはvalue属性に初期値を設定してみようまとめ監修してくれたメンター   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPで配列のkeyを取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   この記事では、PHPで配列のkeyを取得する方法について記載しています。 まだPHPでの開発に慣れていない方でも理解できる内容です。   配列のkeyとvalueについて PHPでは連想配列という配列において、keyとvalueのセットで連想配列にデータを格納します。 配列とは、複数の値を入れる箱のようなものです。   通常の配列 通常の配列においては、添字（インデックス）という数字でデータ(value)の格納場所に番号を振っています。 配列サンプルコード <?php $array = ["りんご", "れもん", "もも"]; print_r($array); echo $array[1]; 配列実行結果 配列解説 <?phpでは、PHPプログラムを開始しています。 $array = [“りんご”, “れもん”, “もも”];では、$array配列に”りんご”, “れもん”, “もも”を代入しています。 print_r($array);では、$array配列を表示しています。 echo $array[1];では、$array配列の1番目のインデックスで指定した、れもんを表示しています。   連想配列 連想配列は、添字（インデックス）の代わりにデータ（value）を入れる箱に「key」という任意の名前をつけて管理します。 つまり、連想配列ではインデックスではなく、任意の文字列であるkeyを利用してvalueを抽出できます。 連想配列サンプルコード <?php $array = ["apple" => "りんご", "lemon" => "れもん", "peach" => "もも"]; print_r($array); echo $array["lemon"]; 連想配列実行結果 連想配列解説 <?phpでは、PHPプログラムを開始しています。 $array = [“apple” => “りんご”, “lemon” => “れもん”, “peach” => “もも”];では、$array配列に”apple” => “りんご”, “lemon” => “れもん”, “peach” => “もも”を代入しています。 print_r($array);では、$array配列を表示しています。 echo $array[“lemon”];では、$array配列のkeyであるlemonで指定した、れもんを表示しています。   array_keys関数の使い方 PHPのarray_keys関数は、連想配列の「key」だけを取得する関数です。 それでは、array_keys関数の使い方について見ていきましょう。   array_keys関数で「key」だけを抽出する 次のように、array_keys関数の引数に連想配列を渡すことで、「key」だけを抽出した配列として返却します。 array_keys($連想配列)   array_keys関数で検索するvalueとセットになっているkeyを抽出 第1引数に連想配列を渡し、第2引数に連想配列の中のvalueから検索したい値を渡すことで、検索するvalueとセットになっているkeyを抽出し配列にして返却します。 第3引数はオプションなので、必須ではありません。 第3引数は、boolean型のtrueを渡すことで、第2引数に渡した「検索するvalue」のデータ型まで完全に一致するものを連想配列の中から探します。 デフォルトではboolean型のfalseが設定されているので、データ型が完全に一致しなくても検索対象です。 boolean型というのは、trueかfalseの2つの値のどちらかになる型の値です。 array_keys($連想配列, $検索するvalue [, $型チェック = FALSE])   [PR] Webデザインで副業する方法とはarray_keys関数で「key」だけを抽出する方法を実際に書いてみましょう ここでは、連想配列のkeyをすべて抽出する方法について見ていきましょう。   サンプルコード <?php $array = ["apple" => "りんご", "lemon" =>
PHP

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでinputタグのvalue属性に初期値を設定する方法を現役デザイナーが解説【初心者向け】