formタグとは？HTML＋JSで入力内容を送受信する方法と基本属性を解説

【 2025/05/31 00:00 更新】

formタグとは？

formタグとは、入力系要素の入力内容をまとめるタグです。

内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。

コードは以下ような感じになります。

【 HTML 】


<form action="./test.html" method="get">
    <input type="text" name="test001">
    <br>
    <input type="submit" value="送信">
</form>

入力系要素は以下のタグによって定義できます。

【入力系タグの種類】

inputタグ：type属性に指定する値によって、様々な種類の入力要素となる。
select・optionタグ：プルダウンメニューを定義できるタグ。
textareaタグ：複数行の文字を入力できるテキストボックス。
buttonタグ：ボタンを定義でき、type属性に指定する値によって様々な種類のボタンとなる。

inputタグとは

inputタグとは入力ができる要素です。
type属性に指定する値によって、様々な種類の入力要素になります。
formタグに内包して値を別の画面やプログラムに渡したり、JavaScriptと一緒に使ったりします。

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス ( 入力系タグ(input/select/... ) | こじはなNote

buttonタグとは

buttonタグはボタン用のタグです。

type属性に指定する値によって様々な種類のボタンとなります。

【 HTML 】


<form action="./test.html" method="get">
    <!-- テキストボックス -->
    <input type="text" value="初期値の文字"><br>
    <input type="text" value="">
    <br>
    <!-- type="submit" -->
    <button type="submit" name="submit01">送信</button>
    <!-- type="button" -->
    <button type="button" name="button01">ボタン</button>
    <!-- type="reset" -->
    <button type="reset" name="reset01">リセット</button>
</form>

【buttonタグに関する記事】

buttonタグ｜複数行の文字を入力できるテキストボックス ( 入力系タグ(input/select/... ) | こじはなNote

formタグで入力内容を"GET通信"で送る方法！JavaScriptでデータ取得可能

formタグで入力内容をGET通信で送信すると、HTML＋JavaScriptだけで取得したデータを表示/制御できます。

GET通信とは、インターネット上でデータを送受信するための通信方法の一種です。
通信の特徴は以下の通りです。

【 GET通信の特徴】

送信するデータはURL上(URLパラメータ)に付加。
主にリンクでページ遷移したりデータを取得するときに使う。
ブラウザの履歴に残る。

URLのパラメータとは

URLのパラメータとは、URL上に表記させた送信データのことをいいます。

URLの末尾に「?キー=値&キー=値&キー=値&...」という書き方で表記します。

※"キー"・"値"については任意の値が入り、"..."は繰り返すと言う意味です。

【 GET通信に詳しい記事】

GET通信・POST通信とは？2つの違いと通信の構造を解説します！｜こじはなNote

実際に操作してみてください！

※スタイルがデフォルトと異なる点はご了承ください。

コードはこんな感じです！

【送信前の画面用HTML 】


<form action="/demoPage/getTest.html" method="get">
    <!-- テキストボックス -->
    <input type="text" name="text01">
    <br>
    <!-- ラジオボタン -->
    <label>5個:</label><input type="radio" name="radio01" value="5">
    <label>10個:</label><input type="radio" name="radio01" value="10">
    <label>100個:</label><input type="radio" name="radio01" value="100">
    <br>
    <!-- チェックボックス -->
    <label>みかん</label><input type="checkbox" name="check01" value="みかん">
    <label>りんご</label><input type="checkbox" name="check01" value="りんご">
    <label>いちご</label><input type="checkbox" name="check01" value="いちご">
    <br>
    <!-- プルダウンメニュー -->
    <select name="select01">
        <option value="りんご">りんご</option>
        <option value="みかん">みかん</option>
        <option value="いちご">いちご</option>
    </select>
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

【送信先の画面用HTML 】


<h1>GET通信で遷移したページ</h1>
<p>【 取得したデータ 】</p>
<p>テキストボックス取得データ：<span id="text01"></span></p>
<br>
<p>ラジオボタン取得データ：<span id="radio01"></span></p>
<br>
<p>チェックボックス取得データ：<span id="check01"></span></p>
<br>
<p>プルダウンメニュー取得データ：<span id="select01"></span></p>

<!-- JavaScriptでデータ取得 -->
<script>
    // URLパラメータのデータを全て取得
    const params = new URLSearchParams(window.location.search);

    // 入力項目別にデータを取得
    const text01 = params.get('text01');
    const radio01 = params.get('radio01');
    const check01 = params.get('check01');
    const select01 = params.get('select01');

    // 取得データをHTMLにセット
    document.getElementById('text01').innerText = text01;
    document.getElementById('radio01').innerText = radio01;
    document.getElementById('check01').innerText = check01;
    document.getElementById('select01').innerText = select01;
</script>

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

"POST通信"だとJavaScriptだけではデータ取得できない

formタグで入力内容をPOST通信で送信すると、HTML＋JavaScriptだけでは取得したデータを表示/制御できません。

formタグからPOST通信で取得したデータを表示/制御させるためには、PHP/Javaなどサーバーサイド言語を一緒に使う必要があります。

（本記事ではサーバーサイド言語を使った説明は割愛します。）

POST通信とは、インターネット上でデータを送受信するための通信方法の一種です。
通信の特徴は以下の通りです。

【 POST通信の特徴】

送信するデータはリクエストボディに格納する。
主にフォーム送信や機密性の高いデータを送信するときに使う。
ブラウザの履歴に残らない。

リクエストボディとは

リクエストボディは、サーバーへ送信するデータのこと。

POST通信では、リクエストボディに送信するデータを含めます。

【 POST通信に詳しい記事】

GET通信・POST通信とは？2つの違いと通信の構造を解説します！｜こじはなNote

実際に操作してみてください！

※スタイルがデフォルトと異なる点はご了承ください。

コードはこんな感じです！

【送信前の画面用HTML 】


<form action="/demoPage/postTest.html" method="post">
    <!-- テキストボックス -->
    <input type="text" name="text01">
    <br>
    <!-- ラジオボタン -->
    <label>5個:</label><input type="radio" name="radio01" value="5">
    <label>10個:</label><input type="radio" name="radio01" value="10">
    <label>100個:</label><input type="radio" name="radio01" value="100">
    <br>
    <!-- チェックボックス -->
    <label>みかん</label><input type="checkbox" name="check01" value="みかん">
    <label>りんご</label><input type="checkbox" name="check01" value="りんご">
    <label>いちご</label><input type="checkbox" name="check01" value="いちご">
    <br>
    <!-- プルダウンメニュー -->
    <select name="select01">
        <option value="りんご">りんご</option>
        <option value="みかん">みかん</option>
        <option value="いちご">いちご</option>
    </select>
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

formタグ用の基本属性

formタグ用の基本的な属性を紹介します。

特にaction属性・method属性はいっぱい使うよ！

action属性｜送信先のURLやパスを指定

action属性は、送信先のURLやパスを指定します。

<form action="/test/test.html" method="get">
    <input type="text">
    <input type="submit">
</form>

パスとは

ファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】

パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！

こじはなNote

method属性｜データを送る通信方法を指定

method属性は、formタグ内のデータを送る通信方法を指定します。

値にはGET通信の"get"やPOST通信の"post"などを指定します。（他にも指定可能な値がありますが、あまり使われないので割愛します。）

<form action="/test/test.html" method="get">
    <input type="text">
    <input type="submit">
</form>

GET通信とは

GET通信とは、インターネット上でデータを送受信するための通信方法の一種です。
通信の特徴は以下の通りです。

【 GET通信の特徴】

送信するデータはURL上(URLパラメータ)に付加。
主にリンクでページ遷移したりデータを取得するときに使う。
ブラウザの履歴に残る。

【 URLのパラメータとは】

URLのパラメータは、URL上に表記させた送信データのことをいいます。

URLの末尾に「?キー=値&キー=値&キー=値&...」という書き方で表記します。

※"キー"・"値"については任意の値が入り、"..."は繰り返すと言う意味です。

【 GET通信に詳しい記事】

GET通信・POST通信とは？2つの違いと通信の構造を解説します！｜こじはなNote

POST通信とは

POST通信とは、インターネット上でデータを送受信するための通信方法の一種です。
通信の特徴は以下の通りです。

【 POST通信の特徴】

送信するデータはリクエストボディに格納する。
主にフォーム送信や機密性の高いデータを送信するときに使う。
ブラウザの履歴に残らない。

【リクエストボディとは】

リクエストボディは、サーバーへ送信するデータのこと。

POST通信では、リクエストボディに送信するデータを含めます。

【 POST通信に詳しい記事】

GET通信・POST通信とは？2つの違いと通信の構造を解説します！｜こじはなNote

enctype属性｜データをどう変換して送信するかを指定

enctype属性は、データをどう変換して送信するかを指定します。

POST通信（method="post"）の場合によく使う属性です。

<form action="/test/test.html" method="post" enctype="multipart/form-data">
    <input type="text">
    <input type="submit">
    <input type="file" accept="image/*" name="file01">
</form>

【 enctype属性の値の種類】

enctype="application/x-www-form-urlencoded"：
通常のフォームデータを示す。(デフォルト)
enctype="multipart/form-data"：
ファイルデータ送信用。inputタグのtype="file"がある場合に指定。
enctype="text/plain"：
ただのテキスト送信用。テストでデータ送信する場合に使われる。

POST通信とは

POST通信とは、インターネット上でデータを送受信するための通信方法の一種です。
通信の特徴は以下の通りです。

【 POST通信の特徴】

送信するデータはリクエストボディに格納する。
主にフォーム送信や機密性の高いデータを送信するときに使う。
ブラウザの履歴に残らない。

【リクエストボディとは】

リクエストボディは、サーバーへ送信するデータのこと。

POST通信では、リクエストボディに送信するデータを含めます。

【 POST通信に詳しい記事】

GET通信・POST通信とは？2つの違いと通信の構造を解説します！｜こじはなNote

GET通信には無効

enctype属性はPOST通信用の属性です。
GET通信の場合は効きません。

inputタグのtype="file"

inputタグのtype属性に"file"を設定すると、PDFやPNG、JPGなどファイルアップロード用の入力要素となります。

実際に操作してみてください！

【 HTML 】


<!-- 画像ファイルのみ -->
画像：<input type="file" accept="image/*" multiple capture>
<br>
<!-- PDFファイルのみ -->
PDF：<input type="file" accept="application/pdf">
<br>
<!-- 複数の拡張子を指定 -->
.jpg,.png,.pdf：<input type="file" accept=".jpg,.jpeg,.png,.gif,.pdf">

【 inputタグのtype="file"に詳しい記事】

type="file"｜ファイルアップロード用の入力要素(入力系タグ(input/select...)｜こじはなNote

name属性｜formを識別するためのキー名

name属性は、formを識別するためのキー名を指定します。
このform要素の名前はこれ！と指定できます。

JavaScriptや別のフォーム操作で使われることがあります。

<form action="/test/test.html" method="post" name="form001">
    <input type="text">
    <input type="submit">
</form>

autocomplete属性｜入力補完の有効/無効を指定

formタグのautocomplete属性は、内包する全入力系要素に対して入力補完の有効/無効を設定できます。

入力系タグにも付与することができ、その場合は対象の要素に対して入力補完の指定ができます。

実際に操作してみてください！

【 HTML 】


<!-- 入力補完 有効 -->
<form autocomplete="on">
    <!-- type="text" -->
    <label>名前：</label>
    <input type="text" name="userName"><br>
    <!-- type="email" -->
    <label>メール：</label>
    <input type="email" name="email">
</form>

【 autocomplete属性の値の種類】

autocomplete="on"	自動補完する。（デフォルト）
autocomplete="off"	自動補完しない。（デフォルト）

novalidate属性｜ブラウザのバリデーションチェックを無効化

novalidate属性は、ブラウザのバリデーションチェックを無効化できます。

例えば、入力系タグにrequired属性（必須指定）を付与しているとします。
未入力のまま送信(Submit)ボタンを押下すると、通常は「入力してください」と促され送信されません。
novalidate属性をformタグに付与していると、未入力であってもそのまま送信されます。

【 novalidate属性あり】

実際に操作してみてください！

【 novalidate属性なし】

実際に操作してみてください！

【 HTML 】


<form novalidate>
    <!-- type="text" -->
    <label>名前：</label>
    <input type="text" name="userName" required><br>
    <!-- type="email" -->
    <label>メール：</label>
    <input type="email" name="email" required><br>
    <!-- submitボタン -->
    <input type="submit" value="送信">
</form>

required属性とは

required属性は、入力系の要素を必須入力設定できる属性です。
属性＝"値"の形式ではなく、"required"単体で指定します。

<input type="text" required>
<textarea required></textarea>
<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

required属性以外にも色々な入力系タグ用の属性があるよ！

【入力系タグ用の属性に詳しい記事】

入力系タグの属性(入力系タグ(input/select/option/textarea/buttonタグ)と...)｜こじはなNote

accept-charset属性｜送信するデータの文字コードを指定

accept-charset属性は、送信するデータの文字コードを指定できます。
デフォルトは"UTF-8"です。

文字コードとは

人間が入力した文字や記号１つ１つの、一意なIDのようなもの。
ひらがなの「あ」は、UTF-8（文字コードの種類）では「E38182」となります。

【 HTML 】


<form accept-charset="UTF-8">
    <input type="text"><br>
    <input type="submit" value="UTF-8で送信">
</form>

target属性｜フォーム送信(submit)後のページ表示方法を指定

target属性は、フォーム送信(submit)後のページ表示方法を指定します。

送信後のページを、現在開いているタブで表示させるのか、新しいタブを開いて表示するのかなど指定できます。

【例）新しいタブ：target="_blank" 】

実際に操作してみてください！

※スタイルがデフォルトと異なる点はご了承ください。

コードはこんな感じです！

<form action="/demoPage/html-target-Test.html" method="get" target="_blank">
    <!-- テキストボックス -->
    <input type="text" name="text01" readonly value="target='_blank'">
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

【 target属性の値の種類】

target="_self"	現在のタブ/フレームで開く。（デフォルト）
target="_blank"	新しいタブで開く。
target="_parent"	親フレームで開く。
target="_top"	最上位のフレームで開く。

フレームとは

ここでいうフレームとはとは、1つのWebページの中で、別ページを表示させるための箱のようなものです。
フレームとして、iframeタグがよく使われます。

【 iframeタグの例】

<iframe srcdoc='
    <html>
        <head></head>
        <body>
            <h1>iframe内のWebページだよ！</h1>
            <p>iframeで表示したページは独立したエリア！</p>
        </body>
    </html>
' style="height:200px; width: 100%;"></iframe>

srcdoc属性に表示させたいWebページのHTML文を書くことができます。

また、src属性に表示させたいWebページのURLを指定して表示することも可能です。

readonly属性

readonly属性は、値を表示専用にする属性で、入力できません。

実際に操作してみてください！

【 HTML 】


<!-- inputタグ -->
<input type="text" value="表示専用テキスト" readonly><br>
<!-- textareaタグ -->
<textarea name="textarea01" readonly>表示専用テキスト</textarea>

【 readonly属性に詳しい記事】

readonly属性｜値を表示専用にする(入力系タグ(input/select...)｜こじはなNote

target="_self"｜現在のタブ/フレームでページが開く

target="_self"は、現在のタブ/フレームで開くよう指定できます。
デフォルトの設定です。

【 iframeタグ内での例】

実際に操作してみてください！

iframe上で送信ボタン押下すると、同じiframe上のページが変わります。

コードはこんな感じです！

<form action="/demoPage/html-target-Test.html" method="get" target="_self">
    <!-- テキストボックス -->
    <input type="text" name="text01" readonly value="target='_self'">
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

フレームとiframeタグ

ここでいうフレームとは、1つのWebページの中で、別ページを表示させるための箱のようなものです。
フレームとして、iframeタグがよく使われます。

【 iframeタグの例】

<iframe srcdoc='
    <html>
        <head></head>
        <body>
            <h1>iframe内のWebページだよ！</h1>
            <p>iframeで表示したページは独立したエリア！</p>
        </body>
    </html>
' style="height:200px; width: 100%;"></iframe>

srcdoc属性に表示させたいWebページのHTML文を書くことができます。

また、src属性に表示させたいWebページのURLを指定して表示することも可能です。

readonly属性

readonly属性は、値を表示専用にする属性で、入力できません。

実際に操作してみてください！

【 HTML 】


<!-- inputタグ -->
<input type="text" value="表示専用テキスト" readonly><br>
<!-- textareaタグ -->
<textarea name="textarea01" readonly>表示専用テキスト</textarea>

【 readonly属性に詳しい記事】

readonly属性｜値を表示専用にする(入力系タグ(input/select...)｜こじはなNote

target="_blank"｜新しいタブでページが開く

target="_blank"は、新しいタブで開くよう指定できます。

【 iframeタグ内での例】

実際に操作してみてください！

コードはこんな感じです！

<form action="/demoPage/html-target-Test.html" method="get" target="_blank">
    <!-- テキストボックス -->
    <input type="text" name="text01" readonly value="target='_blank'">
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

readonly属性

readonly属性は、値を表示専用にする属性で、入力できません。

実際に操作してみてください！

【 HTML 】


<!-- inputタグ -->
<input type="text" value="表示専用テキスト" readonly><br>
<!-- textareaタグ -->
<textarea name="textarea01" readonly>表示専用テキスト</textarea>

【 readonly属性に詳しい記事】

readonly属性｜値を表示専用にする(入力系タグ(input/select...)｜こじはなNote

target="_parent"｜親フレームでページが開く

target="_parent"は、親フレームで開くよう指定できます。

【 iframeタグ内での例】

実際に操作してみてください！

iframeタグでフレーム3階層まで準備しています。

階層1：開いているページ

階層3のページ上で送信ボタン押下すると、1つ上（親）の階層2のページが変わります。

コードはこんな感じです！

【階層3のiframe内のHTML 】

<h5>階層3：iframeで開いたページ</h5>
<form action="/demoPage/html-target-Test.html" method="get" target="_parent">
    <!-- テキストボックス -->
    <input type="text" name="text01" readonly value="target='_parent'">
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

フレームとiframeタグ

【 iframeタグの例】

<iframe srcdoc='
    <html>
        <head></head>
        <body>
            <h1>iframe内のWebページだよ！</h1>
            <p>iframeで表示したページは独立したエリア！</p>
        </body>
    </html>
' style="height:200px; width: 100%;"></iframe>

srcdoc属性に表示させたいWebページのHTML文を書くことができます。

また、src属性に表示させたいWebページのURLを指定して表示することも可能です。

readonly属性

readonly属性は、値を表示専用にする属性で、入力できません。

実際に操作してみてください！

【 HTML 】


<!-- inputタグ -->
<input type="text" value="表示専用テキスト" readonly><br>
<!-- textareaタグ -->
<textarea name="textarea01" readonly>表示専用テキスト</textarea>

【 readonly属性に詳しい記事】

readonly属性｜値を表示専用にする(入力系タグ(input/select...)｜こじはなNote

target="_top"｜最上位のフレームでページが開く

target="_top"は、最上位のフレームで開くよう指定できます。

【 iframeタグ内での例】

実際に操作してみてください！

iframeタグでフレーム3階層まで準備しています。

階層1：開いているページ

コードはこんな感じです！

【階層3のiframe内のHTML 】

<h5>階層3：iframeで開いたページ</h5>
<form action="/demoPage/html-target-Test.html" method="get" target="_top">
    <!-- テキストボックス -->
    <input type="text" name="text01" readonly value="target='_top'">
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

フレームとiframeタグ

ここでいうフレーム・とは、1つのWebページの中で、別ページを表示させるための箱のようなものです。
フレームとして、iframeタグがよく使われます。

【 iframeタグの例】

<iframe srcdoc='
    <html>
        <head></head>
        <body>
            <h1>iframe内のWebページだよ！</h1>
            <p>iframeで表示したページは独立したエリア！</p>
        </body>
    </html>
' style="height:200px; width: 100%;"></iframe>

srcdoc属性に表示させたいWebページのHTML文を書くことができます。

また、src属性に表示させたいWebページのURLを指定して表示することも可能です。

readonly属性

readonly属性は、値を表示専用にする属性で、入力できません。

実際に操作してみてください！

【 HTML 】


<!-- inputタグ -->
<input type="text" value="表示専用テキスト" readonly><br>
<!-- textareaタグ -->
<textarea name="textarea01" readonly>表示専用テキスト</textarea>

【 readonly属性に詳しい記事】

readonly属性｜値を表示専用にする(入力系タグ(input/select...)｜こじはなNote

まとめ

formタグは、入力系要素の入力内容をまとめるタグで、内包した入力系要素の入力内容を送信(submit)するための設定ができる。
formタグで入力内容をGET通信で送信すると、HTML＋JavaScriptだけで取得したデータを表示/制御できる。
formタグで入力内容をPOST通信で送信すると、HTML＋JavaScriptだけでは取得したデータを表示/制御できない。PHP/Javaなどサーバーサイド言語を一緒に使う必要がある。
action属性：送信先のURLやパスを指定する。
method属性：formタグ内のデータを送る通信方法を指定する。
enctype属性：データをどう変換して送信するかを指定する。
name属性：formを識別するためのキー名を指定する。
autocomplete属性：内包する全入力系要素に対して入力補完の有効/無効を設定する。
novalidate属性：ブラウザのバリデーションチェックを無効化できる。
accept-charset属性：送信するデータの文字コードを指定できる。
target属性：フォーム送信(submit)後のページ表示方法を指定する。
target="_self"：現在のタブ/フレームで開くよう指定する。
target="_blank"：新しいタブで開くよう指定する。
target="_parent"：親フレームで開くよう指定する。
target="_top"：最上位のフレームで開くよう指定する。

【 2025/05/31 00:00 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！