TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで数値の入力欄を作成する方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLで数値の入力欄を作成する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLで数値の入力欄を作成する方法について解説しています。数値入力欄を作成する場合は、inputタグのtype属性にnumberを指定します。基本の書き方と画面上での動作を覚えましょう。

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

HTMLで数値の入力欄を作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

数値の入力欄を作成する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

inputタグとは

テキストボックスなどの、基本的なユーザー入力フォームを提供するためのタグです。type属性で入力フォーム種別を指定することで、多様な部品を作ることができます。

例１：テキストボックスの場合

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

例２：ラジオボタンの場合

<input type="radio" value="1" >紅茶
<input type="radio" value="2" >コーヒー

画面表示イメージ

 

数値の入力欄を作成するには

type属性に「number」を指定することで、数値だけ入力可能なテキストボックスを表示することができます。

 

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

input type=”number”を使って数値の入力欄を作成してみよう

ユーザーに数値だけを入力してもらいたい場合には、通常のtype=”text”ではなく、type=”number”を指定することで数値専用の入力欄を用意しましょう。

数値入力欄を表示させるためのＨＴＭＬコード

<input type="number" >

画面表示イメージ

 

まとめ

inputタグのtype属性に指定できる値は種類が豊富です。今回紹介したnumber以外にも、何種類か試してみましょう

 

監修してくれたメンター

寺谷文宏

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

HTMLでbrタグの使い方と正しい改行方法を現役エンジニアが解説【初心者向け】

HTMLでbrタグの使い方と正しい改行方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &...
HTML

HTMLでページを再描画する方法を現役エンジニアが解説【初心者向け】

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

HTMLで見出しタグと段落タグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの「見出しタグ」と「段落タグ」について解説します。 ...
HTML

3種類の書き方を覚える！HTMLで空白を作る方法【初心者向け】

HTMLを書いていて、文字と文字の間を少し離したいことがたびたびあります。 しかし、HTMLに慣れないうちは思ったように空けたくても空けられないこともしば...
HTML

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

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

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

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

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

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

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次inputタグとは数値の入力欄を作成するにはinput type="number"を使って数値の入力欄を作成してみようまとめ監修してくれたメンター そもそも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のinputタグとtextareaタグを使ってテキスト入力欄を表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 目次inputタグとは数値の入力欄を作成するにはinput type="number"を使って数値の入力欄を作成してみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   【動画の解説はこちら！クリックで見る！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力欄の作り方 ネットショッピングで入力する名前・住所の記述欄は<input>タグで作られています。 データの入力方法には一行タイプのものや、ご意見・ご感想といった複数の行を入力できるもの、また ラジオボタンやチェックボックス など、さまざまな入力用の部品が用意されています。 今回は、以下の問い合わせフォームの名前とパスワード入力、ご意見・ご感想の入力欄の作り方について学んでいきましょう。   名前欄とパスワード入力欄の作り方 名前欄とパスワード入力欄を作る際、以下の2つのタグと属性を利用します。 <input>タグ type属性 これら2つのタグと属性について解説します。   <input>タグ <input>タグは、テキスト入力や送信ボタンなど、情報を入力（インプット）するときに使います。   type属性を付け足すことで、さまざまな入力用の部品を作ることが可能です。   type属性 type属性は、要素（ここでは<input>タグ）がどんな形式であるかを指定します。   問い合わせフォームを例に見てみましょう。 <input type>に”text”を設定すると「一行入力のテキスト欄」、<input type>に”password”を設定すると「パスワード形式の入力欄」を作ることができます。 <input>タグは単独で使うので終了タグはいりません。 <input type="text"> <input type="password">   ブラウザで表示しても、一見すると何も変わらない入力欄です。   しかし、テキスト欄に文字を入力してみると、”text”を指定した欄では文字が、”password”を指定した欄では黒丸が表示されました。 このようにtype属性の設定値に応じて、入力内容の表示を変えることができます。   大石ゆかり 氏名や電話番号のフォームの中に薄いグレーで文字を表示するのはどうやるんですかー？ 田島悠介 あれは、inputタグの中に「placeholder=”煌木 太郎”」って書くことで表示されるよ！ 大石ゆかり ・・・そもそもなんで入力されていない時に表示させるんですか？ 田島悠介 それはね、例を書くことでヒントになるからだよ！ 大石ゆかり なるほどっ！そう言われてみればそうですね♪   [PR] Webデザインで副業する方法とはご意見・ご感想欄の作り方 つづいて、複数の行になる長めの文章を入力する欄を作ってみましょう。 <textarea>タグ  <textarea>〜</textarea> 複数の行が入力できるテキスト欄を作ります。 rows属性 テキスト表示エリアの高さを行数で指定します。 cols属性 テキスト表示エリアの幅を文字数で指定します。   表示行数が10行、幅が60文字のご意見・ご感想入力欄を作りましょう。 <textarea>タグの間に文言を指定すると、あらかじめ入力欄に指定した文言が記入されます。 <textarea rows="10" cols="60">ここに記入してください</textarea>   ブラウザで表示すると、「ここに記入してください」の文言が入力された状態で表示されています。 「ここに記入してください」の文言を消して自由に記入してみましょう。     以下の図のように、シンプルな名前・パスワード入力欄とご意見・ご感想欄が完成しました。     フォームの作成には、この他に送信ボタンの作成や、データの送信先の指定などが必要です。 用途に応じてカスタマイズしていきましょう。   今回はinputタグとtextareaタグを使ってテキスト入力欄を表示する方法についてご紹介しました。 HTMLを使ってフォームをさらにカスタマイズしたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。 執筆してくれたメンター メンターSS 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり inputとtextareaってこうやって使い分けるんですね〜！ 田島悠介 inputタグは、テキスト入力欄の他にもチェックボックスやファイルを送信できるボタンなども設置できるんだよ！ 大石ゆかり すごい便利なんですね〜！ありがとうございましたっ！ 田島悠介 また何でも聞いてください！   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

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでDocument.formsプロパティを使うと、form要素を取得できます。 実務でも、JavaScriptでDocument.formsプロパティを使って入力フォームの情報を操作するので、ぜひ学習してみてください。   目次inputタグとは数値の入力欄を作成するにはinput type="number"を使って数値の入力欄を作成してみようまとめ監修してくれたメンター   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   DOMとは Document Object Modelの略で、文章の構造を表したプログラミングインターフェイスです。 平たく言うと、文章構造を表現したり操作する部品の集まりです。 ChromeなどのブラウザでみているWebサイトは、HTMLという言語のタグを使って文章のレイアウトや表示の色などを表現しています。 DOMの中には、このHTMLの要素を操作する機能も用意されています。 HTMLの要素を操作することで、Webサイトの表示を切り替えたり色をつけたりというような動きをもたせることができます。   Document.formsプロパティとは Document.formsプロパティとは、文章を表すDocumentインターフェイスが持つプロパティの一種です。 Document.formsプロパティには、HTMLにあるformタグをすべて格納しています。 Document.formsプロパティで、formをすべて格納するため、formsと複数形のsが付いています。 Document.formsプロパティは、formタグを参照したり操作する場合に使用します。 formタグというのは、入力フォームのように、ユーザーが情報を入力する際に利用するタグです。   [PR] Webデザインで副業する方法とはDocument.formsプロパティの使い方 ここでは、基本的なDocument.formsプロパティの使い方を解説します。 基本文法 document.forms[index] 解説 Document.formsプロパティは、document.formsと記述すれば使うことができます。 [index]の部分に、インデックスを指定することが可能です。 Document.formsの返り値は、配列ではなく HTMLCollection オブジェクトです。 JavaScriptに標準で用意されてる、Documentのオブジェクトであるdocumentを利用する文法です。   form要素を取得する方法 ここでは、form要素を取得する方法を解説します。 基本コード document.forms[0] document.forms['nameのプロパティ名'] 解説 Document.formsは複数のformを格納した配列のようなオブジェクトです。 厳密に言えば配列ではなく、HTMLCollection オブジェクトと言います。 document.forms[0]のようにformを指定することで任意のform要素を取得できます。 document.forms[‘nameのプロパティ名’]というように、該当するnameのプロパティ名を指定することで、該当するnameで指定されたform要素を取得できます。   form部品を取得する方法 ここでは、form部品を取得する方法を解説します。 基本コード document.forms[0].elements[0] document.forms['nameのプロパティ名'].elements['nameのプロパティ名'] 解説 document.forms[0].elementsでは、formタグの中にある入力欄などの部品を取得できます。 elements[0]の位置に、inputタグのような部品が該当する場合に、document.forms[0].elements[0]でinputタグの要素が取得可能です。 Document.formsと同じようにelementsもすべてのform部品を格納したHTMLCollection オブジェクトです。 そのため任意のform部品を扱う場合は、elements[0]やelements[【inputの名前】]のように[‘nameのプロパティ名’]を指定します。   実際に書いてみよう JavaScriptでのformの操作を見るために、まずはHTMLソースに2つのformタグを記述したものを用意しました。 HTMLに存在する要素を、Document.formsで実際に取得してみましょう。 HTMLサンプルコード <form name='form1'> 1つ目のformの入力欄：<input type="text" name='input1'> <input type="number"> <input type="checkbox" name='check' value='0'>確認する </form> <form name='form2'> 2つ目のformの入力欄：<input type="text" name='input2'> </form> JavaScriptサンプルコード document.forms[0].elements[0].value = '1つめのformの1つ目の入力欄に入る文字列です'; document.forms[0].elements[2].checked = true; document.forms[1].elements[0].value = '2つめのformの1つ目の入力欄に入る文字列です。' nameを利用した場合のサンプルコード document.forms['form1'].elements['input1'].value = '1つめのformの1つ目の入力欄に入る文字列です'; document.forms['form1'].elements['check'].checked = true; document.forms['form2'].elements['input2'].value = '2つめのformの1つ目の入力欄に入る文字列です。' 実行結果 See the Pen Document.forms by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 document.forms[0].elements[0].value = ‘1つめのformの1つ目の入力欄に入る文字列です’;では、document.forms[0].elements[0].valueで指定できる、HTMLの<input type=”text” name=’input1′>のvalueに、1つめのformの1つ目の入力欄に入る文字列ですを代入しています。 [0]のようなインデックスではなく、nameを利用して同じ指定を行う場合はnameを利用した場合のサンプルコードをご覧ください。 document.forms[0].elements[2].checked = true;では、document.forms[0].elements[2].checkedで指定できる、HTMLの<input type=”checkbox” name=’check’ value=’0′>のchecked
JavaScript

HTMLのオブジェクトをグレーアウトする方法を現役エンジニアが解説【初心者向け】

HTMLのオブジェクトをグレーアウトする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 オブジェクトをグレーアウトする方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 グレーアウトとは 使用可否を切り替える方法 表示非表示を切り替える方法 オブジェクトをグレーアウトしてみよう   グレーアウトとは グレーアウトとは、お問い合わせフォームなどの入力画面や入力欄が灰色の表記になっており、入力が出来ない状態になっていることを指します。 アンケートの入力欄では、条件によってある項目のチェックボックスなどが選択出来ないようにグレーアウトされている場合もあります。 webアプリケーションで条件分岐などを記述することでも可能であるものの、期限が過ぎた場合や数量などの上限を超えた場合は、HTMLによって表記をグレーアウトすることでユーザーにも元の表記を見ることが可能です。   [PR] Webデザインで副業する方法とは使用可否を切り替える方法 無効という意味のdisabledを記述することで可否を切り替えられます。 テキストなどの入力欄やラジオボックスなどのinput要素の中に「disabled」と書き加えるだけでグレーアウトすることが可能です。   表示非表示を切り替える方法 また、HTMLで入力欄の表示をなくしてしまう場合にはstyle=”display:none”をinput要素に記述しましょう。 こちらはcssでも表示を調整できるものの、一時的にHTMLの要素の一つを非表示にして置く場合などには、classやidを設定せずに直接htmlファイルに記述することでも実現できます。   オブジェクトをグレーアウトしてみよう 　(htmlファイル) <tbody> <tr> <th>テキスト</th> <td><input type="text"name="名前"value="入力欄1"></td> <td><input type="text"disabled name="テスト"value="入力欄2"></td> <td><input type="text"name="テスト"value="入力欄3"style="display:none"></td> <td><input type="text"name="テスト"value="入力欄4"></td> </tr> <tr> <th>ラジオボタン</th> <td>１<input type="radio"name="radio"value="ラジオボタン"></td> <td>２<input type="radio"disabled name="radio"value="ラジオボタン"></td> <td>３<input type="radio"name="radio"value="ラジオボタン"style="display:none"></td> <td>４<input type="radio"name="radio"value="ラジオボタン"></td> </tr> <tr> <th>チェックボックス</th> <td>AAA<input type="checkbox"name="check"value="チェックボックス"></td> <td>BBB<input type="checkbox"disabled name="check"value="チェックボックス"></td> <td>CCC<input type="checkbox"name="check"value="チェックボックス"style="display:none"></td> <td>DDD<input type="checkbox"name="check"value="チェックボックス"></td> </tr> </tbody>   執筆してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり HTMLのオブジェクトをグレーアウトする方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

HTMLで日付の入力欄を作る方法を現役デザイナーが解説【初心者向け】

HTMLで日付の入力欄を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 日付の入力欄を作る方法について詳しく説明していくね！ 大石ゆかり お願いします！   inputタグの属性について 日付の入力欄を作るにはinputタグを使います。input要素はユーザーに何かのデータを入力してもらう要素です。お問い合わせフォームや個人情報の入力欄に多く使われています。 input要素のtype属性を変えることで入力してもらいたいデータのみを入力出来るようになります。typeをtextとした場合は名前などのテキストを記入でき、typeをemalとした場合はemailのアドレスのみを入力できる欄になります。   文字列書式の違い input要素のtype属性をdateとすることで日付入力欄を作成することができます。このdateはブラウザによって表記が異なり、Google Chromeの場合にはカレンダーの表示が出てきます。 対応ブラウザのみカレンダーの表示となりますが、非対応ブラウザの場合にはtextと同じように扱われてしまいます。 この入力欄にユーザーから記入してもらうことによりテキスト文字としての表示ではなく,日付の書式としてYYYY-MM-DDとした日付のデータとして送受信が出来るようになります。   [PR] Webデザインで副業する方法とは入力フィールドを作成してみよう 今回はGoogle Chromeでの表記となります。各ブラウザごとに表記方法が変わる為、注意が必要です。 (htmlファイル) <div> <inputtype="date"name="日付"> </div>     監修してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで数値の入力欄を作成する方法を現役デザイナーが解説【初心者向け】