HTML

HTMLのfieldset要素で使える属性を現役エンジニアが解説【初心者向け】

初心者向けにHTMLのfieldset要素で使える属性について解説しています。ここではHTML5で追加されたdisabled属性、form属性、name属性を説明します。それぞれの役割と書き方を学習しましょう。

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

HTMLのfieldset要素で使える属性について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

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

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

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

fieldset要素で使える属性について詳しく説明していくね！

お願いします！

fieldset要素とは

おもに複数の入力装置になるinputタグなどを項目としてグループ化するためのタグです。

[PR] Webデザインで副業する学習方法を動画で公開中

fieldset要素の活用場面

fieldset要素は、inputタグなどが複数ある入力項目をまとめることに、活用できます。

fieldset要素で使える属性について

HTML5から、disabled属性、form属性、name属性が使用できることになりました。

disabled属性

属性の値として、disabledを定めることで、グループ化されている内部の全ての入力装置が無効になります。

form属性

属性の値として、formタグのid属性の名前と同一に定めることで、該当のformタグの外にあるfieldsetタグとそのformタグを結びつけれます。

name属性

属性の値として、該当のfieldsetタグを特定するための識別子に定めることができます。

fieldset要素を使ってみよう

まずは、一般的な使用例として、以下のサンプルコードを提示します。

HTML

<form>
  <input type="checkbox">
  <fieldset>
    <input type="radio" name="radiocheck">
    <input type="radio" name="radiocheck">
  </fieldset>
</form>

表示結果

See the Pen
2020-04-23-sample05 by YOHEI INAI (@yohei_inai)
on CodePen.

HTML

<form id="sample">
  <input type="checkbox">
  <fieldset>
    <input type="radio" name="radiocheck">
    <input type="radio" name="radiocheck">
  </fieldset>
  <fieldset disabled="disabled">
    <input type="text">
  </fieldset>
</form>

<fieldset form="sample">
  <input type="submit">
</fieldset>

表示結果

See the Pen
2020-04-23-sample06 by YOHEI INAI (@yohei_inai)
on CodePen.

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

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

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

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

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

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

無料で使える！ホームページ作成におすすめのテンプレート10選

今回は手軽に使えるホームページのテンプレートを紹介しています。今回紹介するサイトでは手軽に使えるホームページのテンプレートですが、それぞれのページに利用...

Webデザイン

デザインを実装する上で知っておきたい！9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXディレクターでありデザイン本の執筆も...

Webデザイン

事例から学ぶ！マテリアルデザインとは【初心者向け】

シンプルな見た目なのにどこかリッチな印象を受ける、「マテリアルデザイン」聞いたことはあるけど、誰かに説明できるほど詳しく分からないという方も多いのではな...

Webデザイン

HTMLの基本構造を現役デザイナーが解説【初心者向け】

HTMLの基本構造について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方...

HTML

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

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

HTML

これだけは知っておきたい！HTML/CSSの基礎【人事担当者のためのIT勉強会レポート】

今回のテーマは、HTML/CSSの基礎です。なお、こちらの内容はTechAcademyのWebデザインオンラインブートキャンプでも扱っています。 ...

イベントレポート

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

JavaScriptでフォーム要素にdisabledを設定・解除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォーム要素にdisabledを設定・解除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次fieldset要素とはfieldset要素の活用場面fieldset要素で使える属性についてfieldset要素を使ってみよう監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでフォーム要素にdisabledを設定・解除する方法について詳しく説明していくね！大石ゆかりお願いします！ disabledとは disabledは「無効」を示すHTMLの属性です。 disabled属性は、「フォーム要素」と呼ばれるHTML要素に対して指定できます。フォーム要素の代表的な例は、以下の通りです。 input / select / textarea / button どの要素に対しても、disabled属性をあてると「無効」になるような挙動をします。例えば、以下のように、何かの操作ができる要素に対し、操作をできなくするために使います。 input要素にdisabled属性を指定すると、そのinput要素に入力ができなくなる button要素にdisabled属性を指定すると、そのbutton要素を押せなくなるこれは、ある条件を満たさないと入力できない・ボタンを押せない、といった仕様を実現するために便利な機能です。また、disabledを指定したフォーム要素の値は、フォーム送信時に送信されない特徴もあります。 disabled指定をした要素の見た目 CSSでスタイルを変えていない状態では、無効になった要素はグレーがかった色になり、入力できないことを伝えます。 HTMLでdisabled属性を指定する disabled属性は、フォーム要素に以下の記述を加えることで指定できます。 //input要素の入力を不可にする <input type="text" name="name" placeholder="入力できません" disabled> //ボタンを押せなくする <button type="button" disabled>押せないボタン</button> JavaScriptでdisabled属性を指定 / 解除する JavaScriptでもdisabled属性を指定できます。これは、ユーザーの操作に応じて入力可能、不可能を切り替える際などに有用です。コードは以下のような流れになります。 //HTML <input type="text" id="input-message"> //Javascript const input = document.getElementById('input-message'); input.disabled = true; ここではまずinput要素のidを用いて要素を取得し、inputという変数に代入しています。あとはinputのdisabledプロパティをtrueに設定するだけで、HTML側で要素がdisabledになります。逆に解除したい（有効な状態にしたい）場合は、このdisabledプロパティをfalseに設定します。 input.disabled = false; disabledの基本に関する説明は以上です。次は実践的なコードを書いてみましょう！実際に書いてみよう今回は「ユーザーが5文字以上入力したらボタンを押せるようにする」という機能を実装してみましょう。これはWeb用語では「バリデーション」と呼ばれ、ユーザーが入力した値に応じて送信を可能にしたり、不可能にする機能です。身近なところでは、会員登録時に「パスワードが短すぎます」とメッセージを出されるのが一例です。完成形のコードは以下の通りです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>disabled sample</title> </head> <body> <form id="form" action="#"> <input type="text" id="input-text" placeholder="5文字以上入力してください"> <button type="submit" id="button" disabled>送信</button> </form> <script>

JavaScript

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] プログラミングで挫折しない学習方法を動画で公開中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で複数のチェックボックスを横並びに配置する方法を現役エンジニアが解説【初心者向け】

HTMLで複数のチェックボックスを横並びに配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次fieldset要素とはfieldset要素の活用場面fieldset要素で使える属性についてfieldset要素を使ってみよう監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介複数のチェックボックスを横並びに配置する方法について詳しく説明していくね！大石ゆかりお願いします！チェックボックスを実装する方法チェックボックスは、inputタグのtype属性に「checkbox」と指定することで実装できます。一般的には、HTML内で以下のように実装されます。最も簡素な例 <form> <input type="checkbox">選択肢テキスト <input type="checkbox">選択肢テキスト </form> See the Pen チェックボックスを実装する方法_最も簡素な例 by nomallica (@nomallica) on CodePen. labelタグを使用した例 labelタグを使用することで、選択肢テキスト部分でもチェックが入れられるようになります。以下のように選択肢テキストをlabelタグで囲み、for属性の値をinputタグのid属性と合わせることで実装できます。 <form> <input type="checkbox" id="check1"><label for="check1">選択肢テキスト</label> <input type="checkbox" id="check2"><label for="check2">選択肢テキスト</label> </form> See the Pen チェックボックスを実装する方法_labelタグを使用した例 by nomallica (@nomallica) on CodePen. さらにfieldsetタグでグループ分けした例 fieldsetタグでチェックボックスをグループ化した例が、以下の通りです。 inputタグにname属性を追加することで、グループとの関連付けができます。 <form> <fieldset> <input type="checkbox" id="check1" name="group1"><label for="check1">選択肢テキスト</label> <input type="checkbox" id="check2" name="group1"><label for="check2">選択肢テキスト</label> </fieldset> <fieldset>

HTML

Laravelでformを使う方法【初心者向け】現役エンジニアが解説

今回は、Laravel のFormを利用してフォームの作成を行っていきます。 LaravelのFormを利用することで、ブラウザ画面からフォームを利用してデータを送信することが可能になります。実務でもWebアプリケーションを開発する際、ユーザーがデータをフォーム入力して、データベースに登録する処理はよく利用しますので、非常に実践的な内容になっています。目次 Formとは Formの例 Laravelとは Laravel の始め方 tinker の使い方 Mysqlの設定 Mysqlの利用 Laravelの処理 Laravel Collectiveの使い方 Formとは WebアプリケーションでFormというと、企業ページへのお問い合わせフォームであったり、SNSの投稿フォームだったり、多岐にわたり多用されます。このFormという単語ですが、初学者の頃は、Fromと混同しやすくタイプミスが発生する点に注意していただくと、学習がスムーズです。今回は、LaravelのライブラリであるLaravel CollectiveというライブラリのFormファサードを利用して実装していきます。 Formファサードとはデザインパターンで言うところの、複数のクラスを利用する上で窓口となるクラスを利用して、依存関係を含めシンプルに処理を実装することができる仕組みです。デザインパターンというのは、プログラミングのアルゴリズムを定型化することで、誰でも高品質な処理を実装することができる考え方です。アルゴリズムというのは、プログラミングの処理の流れです。例えば、子供の頃、迷路の本などで入り口から出口までなぞり書きしたことがあるかと思います。入り口から出口まで後戻りせず、一筆書きで迷路をクリアする処理をアルゴリズムとイメージすると良いかもしれません。クラスとは、あるオブジェクトの設計図です。オブジェクトを作るためには設計図を設計した上で、設計図に基づいてオブジェクトの作成が必要です。オブジェクトとは、クラスという設計図から生成される製品です。家を例にすると、家という製品（オブジェクト）は、柱や壁や電気や水道やガスなどいろいろな部品によって、クラスという設計図に基づいて構成されています。つまり、家の設計図がクラスで、実際の家がオブジェクトというイメージになります。そして、実際の製品をインスタンスと呼びます。これは、生成する家が全く同じクラス（設計図）に基づくオブジェクト（製品）であっても、インスタンス（田中様の家）、インスタンス（鈴木様の家）というように、生成後は別の意味を持った家になるためです。家の設計図であるクラスを利用して、様々な家を集積するようなWebアプリケーションを実装する場合、家というクラスだけでなく、車というクラスや、お店というクラスもあるかもしれません。どの家とどの車が同じ所有者で、その所有者はお店も所有しているのか、お店を利用するだけなのか、というようにクラス同士が連動して動作する場合、最終的なWebアプリケーションがクラスでごちゃごちゃになりかねません。そこで、Formファサードのような依存関係をシンプルに実装してくれる機能を利用していくと、実務でも保守のしやすい素敵なアプリケーションを実装可能になります。 [PR] プログラミングで挫折しない学習方法を動画で公開中Formの例今回は次のようなFormタグを利用します。 Form::model Form::modelで、モデルデータと連動しながらForm処理を開始します。そうでない場合は、Form::openを利用することができます。 Form::label Form::labelで、ラベルの生成処理をします。 Form::text Form::textで、テキストボックスの生成処理をします。 Form::submit Form::submitで、送信表示の生成処理をします。 Form::close Form::closeで、Formタグの実装を終了します。今回利用するFormタグ以外にも、たくさんのFormタグが存在するので、Laravel Collectiveの公式ページを参考にしていただくと良いですよ。 LaravelCollective | HTML v6.x Laravelとは Laravelとは、PHPでWebアプリケーションを開発する際、セキュリティも高く、効率的な開発をすることができるフレームワークです。フレームワークとは、Web開発における共通処理であるライブラリを呼び出すことで、効率的にWebアプリケーションを開発することができるツールです。ライブラリとは、よく利用する便利な処理をまとめて実装しているプログラムです。同じような処理をしているライブラリが、世界中に存在するため、どのライブラリを呼び出し利用するかはプログラマーが考えて決定します。 Laravel の始め方今回解説する実装環境は、PHP7.2系とLaravel6系とMySQL5.6系です。 MySQLの最新バージョンはMySQL8系ですが、実行環境の都合でMySQL5.6系ですので、基本的にはMySQL8系でも同じ考え方をしていただくと良いです。今回はcomposerコマンドを利用して、techacademyというプロジェクト名で、Laravel6.x系最新版で立ち上げます。 ^6.0 と書けば、バージョン6.xの最新版が選択されます。コマンド composer create-project --prefer-dist laravel/laravel techacademy ^6.0 Laravelのインストール方法やcomposerのインストール・使い方についてはこちらの記事を参考にしてみてください。 Laravelのバージョン Laravelの現在の最新バージョンはLaravel8です。しかし、Laravel6を利用するのは、Laravel6がLTSというバージョンだからです。 LTSとは、長期に渡りサポートされるバージョンを意味します。最終的なサポート期間がLaravel6のほうがLaravel8よりも長いため、実務ではLaravel6を利用することが多いです。バージョン公開日セキュリティサポート 8.0 2020年9月8日 2021年9月8日まで 7.0 2020年3月3日 2021年3月3日まで 6.0 2019年9月3日 2022年9月3日まで tinker の使い方 Laravelでは php artisan tinker というコマンドを実行すると、Laravelの機能を実行するREPLが起動します。 REPLとは対話型コマンドでアプリケーションを操作する方法です。 tinkerの起動方法コマンドラインで次のコマンドを入力するとtinkerが起動します。 php artisan tinker tinkerの終了方法 REPLの実行中は、行頭に>>>が表示されています。その状態でexitと入力することでtinkerを終了することができます。 >> exit MySQLの設定いくつかMySQLの設定が必要です。代表的な設定を抜粋して解説します。 config/database.php 設定内容 'default' => env('DB_CONNECTION', 'mysql'), 解説ここでは、MySQLを利用するという指定をしています。 .env 設定内容 DB_DATABASE=techacademy 解説ここではtechacademyというデータベースを利用する指定をしています。 MySQLの利用 MySQLの起動コマンド sudo service mysql start sudo mysql -u root 解説 MySQLが未起動の場合、sudo service mysql startでMySQLを起動します。 sudo mysql -u rootでMySQLにログインします。今回は学習用なので、ユーザー名がrootでパスワードがないパターンのログインコマンドです。実務で利用する場合は、任意のログイン情報を設定していただく必要がございます。 techacademyデータベースを作成コマンド CREATE DATABASE `techacademy`; 解説 MySQLにログイン後CREATE DATABASE `techacademy`;というコマンドを実行することで、techacademyというデータベースを作成することができます。 Laravelの処理 Laravel側で実装する代表的な処理を抜粋して解説します。 tinkerでデータベース接続を確認する方法コマンド php artisan tinker >>>DB::reconnect(); 解説 php artisan tinkerというコマンドを実行することでtinkerを利用します。 tinkerを利用しているREPLの状態は、行頭に>>>が表示されている状態です。その状態で、DB::reconnect();を実行します。無事データベースへの接続が完了していれば、次のような表示がされます。 => IlluminateDatabaseMySqlConnection {#683} マイグレーションファイルの作成と実行マイグレーションファイルとは、テーブルの作成・削除、カラムの追加・削除に関するデータベースのテーブル管理を行うファイルです。コマンド php artisan make:migration create_techacademy_table --create=techacademies php

PHP

Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】

独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なBootstrapの使い方を初心者向けに解説します。 HTML/CSSがわからない方も読むことができますが、HTMLの書き方、CSSの書き方は理解しておいた方がスムーズに読み進めることができるでしょう。なお、今回はBootstrapのバージョン「3.3.5」を使用します。本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！Bootstrapというのは何ですか〜？田島悠介 Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。大石ゆかりフロントエンドというとHTML・CSS・JavaScriptですか？田島悠介そうだね。シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。基本の使い方を見てみよう。目次本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。 Bootstrapとは Bootstrapを使う準備グリッドシステムの使い方テーブルの使い方ボタンの使い方フォームの使い方 Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。 Bootstrapを使うメリット Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。このページから確認できますが、バージョン3.3.5ではこちらのブラウザに対応しています。この際の注意点ですが、Internet Explorer 7以下とFirefox 3.6以下はサポートされません。これは、CSS3メディアクエリがサポートされていないブラウザだからです。 [PR] プログラミングで挫折しない学習方法を動画で公開中Bootstrapを使う準備実際にBootstrapを使う前の準備が必要ですので、まずはこちらに着手しましょう。PCだけあればすぐに準備できます。 Bootstrapを使用するには、BootstrapとjQuery（JavaScriptのライブラリ）を読み込む必要があります。読み込みの方法は下記の2パターンです。ソースをダウンロードして、ローカルに配置して読み込むすでにホストされているファイルをインターネット経由で読み込む今回は、前者の方法を紹介します。ダウンロードするには、BootstrapのTOPページにアクセスしましょう。「Download Bootstrap」のボタンをクリックしてください。次に表示されるページで、左にある「Download Bootstrap」をクリックするとダウンロードが始まります。ダウンロードしたZIPファイルを解凍すると、「css」、「js」、「fonts」の3つのフォルダがあることがわかるはずです。続いてHTMLファイルを用意しましょう。Bootstrapのページにもテンプレートが用意されていますが、コメントアウトが日本語の方がわかりやすいと思いますので、TechAcademyで用意しています。こちらのコードをコピーして「index.html」としてHTMLファイルを作成してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Sample</title>  <link href="css/bootstrap.min.css" rel="stylesheet">

Bootstrap

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

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでDocument.formsプロパティを使うと、form要素を取得できます。実務でも、JavaScriptでDocument.formsプロパティを使って入力フォームの情報を操作するので、ぜひ学習してみてください。目次fieldset要素とはfieldset要素の活用場面fieldset要素で使える属性についてfieldset要素を使ってみよう監修してくれたメンターそもそも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] プログラミングで挫折しない学習方法を動画で公開中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 に、trueを指定します。 checkedにtrueを指定することで、チェックボックスをチェックした状態にできます。 [0]のようなインデックスではなく、nameを利用して同じ指定を行う場合はnameを利用した場合のサンプルコードをご覧ください。 document.forms[1].elements[0].value

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLのfieldset要素で使える属性を現役エンジニアが解説【初心者向け】

目次

fieldset要素とは

fieldset要素の活用場面