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で画像の上に文字を重ねる方法を現役エンジニアが解説【初心者向け】

HTMLで画像の上に文字を重ねる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nbs...
HTML

HTML5で定義された擬似クラスを現役デザイナーが解説【初心者向け】

HTML5で定義された擬似クラスについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、H...
HTML

HTMLで複数のチェックボックスを横並びに配置する方法を現役エンジニアが解説【初心者向け】

HTMLで複数のチェックボックスを横並びに配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでタグを使って水平線の太さを指定する方法を現役エンジニアが解説【初心者向け】

HTMLでタグを使って水平線の太さを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでspanを使用して右寄せ表示する方法を現役デザイナーが解説【初心者向け】

HTMLのspan要素はご存じでしょうか。 一部の文字の色を変更したり、表示位置を変更させたい時などに便利なタグです。 この記事では、HTMLでspan...
HTML

HTML5でcanvas要素を使ってグラフを描画する方法を現役エンジニアが解説【初心者向け】

HTML5でcanvas要素を使ってグラフを描画する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
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でbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】

本記事では、HTMLでbuttonタグを使ってリンクを貼る方法についてご紹介します。 HTMLでボタンを作りたい方 ボタンを作るためにbuttonタグとaタグとinputタグで迷っている方 この記事を読むと、迷わずボタンを作れるようになりますよ。 HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   目次 buttonタグとは 類似するタグ buttonタグを使ってリンクを貼ってみよう   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 buttonタグを使ってリンクを貼る方法について詳しく説明していくね！ 大石ゆかり お願いします！   buttonタグとは buttonタグとはHTML要素の1つでクリックできるボタンをつくるものです。 タグは以下のように記述します。 <button>ボタン</button> buttonタグの属性などについては、詳しくは以下のページも参考にしてください。 <button>:ボタン要素(MDN)   buttonタグを使ってボタンの見た目ができたら、リンクの動きを設定していきます。 <button type=“button” onclick="location.href='https://techacademy.jp/magazine/'">ページリンク</button> onclick属性という、クリックしたときの動きをJavaScriptで指定する属性を使いましょう。   上記例では、onclick属性にこのような値を設定しています。 location.href='https://techacademy.jp/magazine/' JavaScriptでは、location.href=’ URL ‘ とすることで、URLへページ遷移する動きになります。   これで、buttonタグでページリンクができました。   [PR] Webデザインで副業する学習方法を動画で公開中類似するタグ buttonタグに類似するタグとしては、aタグやinputタグなどがあります。 どれもボタンとしての見た目や機能を作ることができますが、違いがあります。 簡単にまとめてみました。 カスタマイズしやすさ フォームボタン機能 リンク buttonタグ 〇 カスタマイズ可能 〇 フォームボタンとして 利用可 〇 JavaScript aタグ ◎ 簡単にカスタマイズ可能 × フォームボタンとして 利用不可 ◎ href属性 inputタグ × カスタマイズ不可能 〇 フォームボタンとして 利用可 〇 JavaScript   buttonタグとaタグは、CSSでデザインをカスタマイズすることができますが、inputタグはできません。 buttonタグとinputタグは、フォームのボタンとして使うことができますが、aタグは使えません。   詳しく解説していきます。   aタグ(アンカー要素) クリックすると指定先に遷移します。 <a href="https://techacademy.jp/magazine/">Techacademyマガジン</a> <a>:アンカー要素(MDN)   CSSを適用して、下線を消したり色をつけたり影をつけたりすると、ボタンのような見た目になります。   aタグをボタンとして使えない、と誤解されている方もいらっしゃいますが、そんなことはありませんよ。 HTMLの規定を定めるW3Cの仕様には、aタグの中にインタラクティブコンテンツを入れてはいけないと定められています。 buttonタグもインタラクティブコンテンツに含まれるので、aタグでボタンは作ってはいけないと誤訳してしまったんですね。   aタグの子要素にbuttonタグを入れてボタンを作ってはいけません、というのが正確です。 aタグに対して、CSSでボタンのような見た目を作り、ボタンとして使うことは問題ないですよ。   本記事のテーマである「リンクを貼る」動きは問題ありませんが、フォームボタンの機能は持ち合わせていないので、注意してください。   inputタグ ユーザーからデータを受け取るためのタグです。 typeに「button」を指定することでボタンを表現できます。 <input type="button" value="ボタン"> <input>:入力欄(フォーム入力)要素(MDN)   比べてみるとわかる通り、buttonタグやaタグには子要素を作ることができます。 ボタン上に表示される内容を子要素として作っていくので、ボタンに画像を入れたり、複数行にしたり、カスタマイズ可能です。 しかし、inputタグは子要素を作ることができず、表示内容はvalue属性で設定するので、文字列1行だけです。 子要素を作れないことにより、input要素はCSSで複雑な装飾をするときに便利な機能、疑似要素を使うことができません。   inputタグでできることは、すべてbuttonタグでも同じ以上のことができます。   buttonタグを使ってリンクを貼ってみよう buttonタグを使ってリンクを貼る場合、onclick属性に以下の内容を記述しましょう。 onclick="location.href='https://techacademy.jp/magazine/'" 「’https://techacademy.jp/magazine/’」の部分がリンク先です。   buttonタグ全体では以下のようになります。 <button onclick="location.href='https://techacademy.jp/magazine/'">Techacademyマガジン(button版)</button>   buttonタグ、aタグ、inputタグそれぞれでリンク先に遷移する要素を作成してみましょう。 aタグは、CSSを設定することでボタンのような見た目を表現しました。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> <style> .a_button { display: inline-block; border-style: solid; background-color: lightgray; border-width:1px;
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

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制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

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