HTML

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

初心者向けにvalue属性を使ってHTML内の入力初期値を指定する方法について解説しています。value属性はフォームから入力されたデータを扱う際に必要となるものです。代表的な使い方と初期値の設定の例を確認しましょう。

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

監修してくれたメンター

ノマリカ

印刷会社で校閲とDTPオペレーションを5年、Web制作会社でデザイナーを8年、一般企業でWeb担当を1年経験した後、フリーランスのデザイナーとして独立。
伝わりやすくて明快なデザインを得意としている。

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のinput要素とrequired属性の使い方を現役デザイナーが解説【初心者向け】

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

HTML

フリーで使えるものばかり！HTMLを書けるおすすめのエディタ10選｜現役エンジニアが紹介

今回はエディタの解説をします。 HTMLのコードをメモ帳で実装すると、全て黒色で表示され、非常に見づらいです。この問題を解決するために、HTMLエ...

HTML

HTMLでテキストを下寄せに配置する方法を現役エンジニアが解説【初心者向け】

HTMLでテキストを下寄せ（親要素の下部）に配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLからPHPを呼び出す方法を現役デザイナーが解説【初心者向け】

HTMLからPHPを呼び出す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもH...

HTML

HTMLのinputタグ内に記載された内容のみ右寄せに表示する方法を現役デザイナーが解説【初心者向け】

HTMLのinputタグ内に記載された内容のみ右寄せに表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向け...

HTML

HTMLでリストを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLでリストを使う方法について解説します。 ...

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タグのvalue属性に初期値を設定する方法を現役デザイナーが解説【初心者向け】

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

HTMLでoptionタグにselected属性を使って初期値を設定する方法について解説します。そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。目次value属性とはvalue属性が使えるタグvalue属性で初期値を指定する方法まとめHTMLを学習中の方へ田島悠介今回は、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の基礎を紹介する記事です。今回は、ドロップダウンメニューを表示する方法についてテックアカデミーのメンター（現役エンジニア）が初心者向けに解説します。目次value属性とはvalue属性が使えるタグvalue属性で初期値を指定する方法まとめHTMLを学習中の方へそもそも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

Javaで配列の初期値を設定する方法について現役エンジニアが解説【初心者向け】

Javaで配列の初期値を設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。田島悠介今回は、Javaに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介配列の初期値を設定する方法について詳しく説明していくね！大石ゆかりお願いします！目次初期値を設定する方法とは値を代入する実際に書いてみようまとめ初期値を設定する方法とは Javaの配列で任意の値を初期値として設定する方法を解説します。配列を生成しても、その要素の値はNullです。しかし、java.util.Arraysクラスのfillメソッドという、配列の各要素に対して値を一括で設定できるメソッドがあります。そのため、配列型の変数を定義した直後に、このfillメソッドを使用することで配列の初期値を設定していることと同意味に扱うことができます。 [PR] Webデザインで副業する方法とは値を代入する fillメソッドを使用した、配列の初期値を設定する書き方は以下の通りです。 Arrays.fill(配列型の変数, 設定する値); 第一引数には、予め定義している配列型の変数を指定します。第二引数には、初期値として設定したい値を指定します。ここで注意したいことは配列の要素に値が既に設定されていた場合も、fillメソッドに設定した値で上書きされてしまうということです。実際に書いてみようコードは以下のようになります。 import java.util.Arrays; public class FillTest { public static void main(String[] args) { //配列numAryの全要素に"0"をセットする Integer[] numAry = new Integer[3]; Arrays.fill(numAry, 0); //配列の全要素をコンソール表示する System.out.println("初期値としてゼロを設定：" + Arrays.asList(numAry)); //一括で"5"を設定する Arrays.fill(numAry, 5); //配列の全要素をコンソール表示する。 System.out.println("次に5を一括で設定：" + Arrays.asList(numAry)); } } まとめいかがでしたか。今回はArraysクラスのfillメソッドを使用した、配列の初期値を設定する方法を説明しました。配列の各要素の初期値がNullになってしまうと不都合なことがあります。実務では数値型の配列の場合はゼロ、文字列型の配列の場合は空白を初期値として設定することがよくあります。監修してくれたメンターメンターK 独立系SIerで6年勤務後、現在は製造業の社内SEとして働いている。開発言語はJava, C#, VBAを得意としており、生産管理システムの運用や開発に携わっている。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaやServletの技術を使ってWebアプリケーション開発を習得できるオンラインブートキャンプJava講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Java

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

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次value属性とはvalue属性が使えるタグvalue属性で初期値を指定する方法まとめHTMLを学習中の方へそもそも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でvalue属性を使って入力初期値を指定する方法を現役エンジニアが解説【初心者向け】

監修してくれたメンター

ノマリカ

目次

value属性とは

value属性が使えるタグ