TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでinputタグのvalue属性に初期値を設定する方法を現役デザイナーが解説【初心者向け】
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サイトでは、ユーザー情報の更新フォームなどで登録済みの入力値（名前など）が初期表示されますが、仕組みはこのようになっています。

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

まとめ

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

 

監修してくれたメンター

寺谷文宏

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

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

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

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して...
HTML

HTML5でページ内リンクを設定する方法を現役エンジニアが解説【初心者向け】

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

HTMLで画像やテキストの回り込みを指定する方法を現役デザイナーが解説【初心者向け】

HTMLで画像やテキストの回り込みを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

表で見やすくしたい！HTMLでテーブルを表示する方法【初心者向け】現役Webデザイナーが解説

この記事ではHTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介します。 HTMLでテーブルを表示する方法を学習していただくことで、...
HTML

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方を現役エンジニアが解説【初心者向け】

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方について、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

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

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

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次inputタグとはvalue属性について初期値とはvalue属性に初期値を設定してみようまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！ 大石ゆかり えっ？オセロゲームを作るなんて、難しそうですね、、、 田島悠介 大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。 大石ゆかり はい！よろしくお願いします！   はじめに 対象読者 本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。 本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！ 入門向けのJavaScriptを学習できるサイト   本記事の目的 本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。 設計から実装までの、エンジニアの思考プロセスを体験する ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する 上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。 解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！   注意点 本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。 一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。 本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。   オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間 ゲームに限らず、いかなる実装においても設計は非常に重要です。 機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。 「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。   オセロゲームのルールを確認しよう オセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。 まずは前提条件となるオセロゲームのルールを確認していきます。   オセロゲームのルール 盤は8×8マスを利用する 初期状態で真ん中の4マスに白黒の石を交互に配置する 先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく 石を置ける場所は、下記の条件を満たしている 置くマスに他の石がないこと 置くマスの上下左右、斜め1マスの場所に相手の石があること 置いた石、相手の石があった方向の延長上に自身の石があること 石を置ける条件を満たせない場合は、パスをして相手の番になる すべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする） ゲーム終了時点で石の数が多い方が勝ちとなる 以上がオセロゲームのルール概要です。   ルール以外の要件を定めよう ゲームのルールのほか、今回の実装では以下の条件を適用することとします。 自動でパスする機能は実装せず、「パス」ボタンを設置する 「現在どちらの手番であるか」を表示する ゲーム終了後、白黒それぞれの石の数と勝敗を表示する ゲームの初期化機能は実装しない 石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない 画像は用いない それでは、要件を確認したところで実際の設計に移りましょう。   要件に沿って実装設計をしてみよう 同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。 実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。 それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。 想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。   本記事の執筆者は、以下のように流れを作成しました。 上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。 もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。 想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。 本セクションは以上です。 休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。   [PR] Webデザインで副業する学習方法を動画で公開中開発環境を整えよう 🕛目安時間：30分 今回の開発に必要な環境は以下の通りです。 コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）   コードエディタを用意しよう コードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説   Webブラウザの環境を整備しよう 主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。 本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。 開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】 コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
JavaScript

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

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

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでinputタグのvalue属性に初期値を設定する方法を現役デザイナーが解説【初心者向け】