制作者の活動(PR)。

アイドル・堀北真希ちゃんをモデルにしたうさ耳女子大生化キャラクタ。次ぎ
主な作品

制作者に依るイラストと動画のサンプル

HTMLの入力フォーム関連要素。

HTML文書からCGIにデータを引渡すには、フォームが欠かせません。

ここでは、HTMLで定義されているフォーム関連要素を解説します。

HTMLの入力フォーム関連要素・目次。

<form>要素…フォーム全体。

フォームを作成するには、まずフォーム全体を<form>要素とします。

<form>要素の書式は以下の通りです。

action属性は、フォームデータを受取るCGIのURLを書きます(当然必須)。

method属性は、データを引き渡すメソッドを指定します。

内容は入力フォームを含んだブロックレヴェル要素(<fieldset>要素を含む)となります。

以下、<form>要素に用いることのできる主な要素を挙げておきます。

<input>要素…入力欄・入力ボタンなど。

<input>要素は、入力欄や入力ボタンとなります。

HTMLとしては、インライン要素となります。

<input>要素の書式は、以下の通りです。

type属性は入力欄の形式を指定します。

name属性でクエリ名を指定します。

value属性でクエリ値のデフォルトを与えます。

この他にも<a>要素と同様にキーボードアクセスを助ける属性としてaccesskey属性とtabindex属性が使えます。必須ではありませんが、使い易いウェブの為に積極的に活用しましょう。

以下、主なtype属性値を解説します。

<input type="text">要素…一行入力欄。

<input>要素に「type="text"」属性を与えると、一行入力欄を生成します。

この時、value属性値が予め入力された状態となります。

さらに、size属性で入力欄の幅(半角文字数で指定)、maxlength属性で入力可能な最大文字数(半角文字数で指定)が指定できます。

<input type="password">要素…パスワード入力欄。

<input>要素に「type="password"」属性を与えると、パスワード入力欄を生成します。

<input type="text">要素(一行入力欄)と異なり、入力された文字は伏字になります。

<input type="text">要素(一行入力欄)と同様、size属性で入力欄の幅(半角文字数で指定)、maxlength属性で入力可能な最大文字数(半角文字数で指定)が指定できます。

<input type="hidden">要素…隠し入力欄。

<input>要素に「type="hidden"」属性を与えると、隠し入力欄を生成します。

隠し入力欄は、処理の都合で与えておかなければならないクエリを指定するのに用います。

この場合、value属性の値はそのままクエリ値になります。

<input type="radio">要素…ラジオボックス選択肢。

<input>要素に「type="radio"」属性を与えると、ラジオボックスの選択肢を生成します。

ラジオボックスとは、同じクエリ名で指定された<input type="radio">要素の中から、どれか一つだけを選択するというものです。

CGIは、どの項目が選択されたかを、クエリ値で判断します。このクエリ値は当然、value属性で与えられたものです。従って、value属性は必ず指定しなければなりません。

尚、予めデフォルトの選択肢とするものには、「checked="cheked"」属性を与えておきます。

<input type="checkbox">要素…チェックボックス選択肢。

<input>要素に「type="checkbox"」属性を与えると、チェックボックスの選択肢を生成します。

チェックボックスとは、同じクエリ名で指定された<input type="checkbox">要素の中から、好きな数だけ選択できるというものです。

CGIは、どの項目が選択されたかを、クエリ値で判断します。このクエリ値は当然、value属性で与えられたものです。従って、value属性は必ず指定しなければなりません。

尚、予めデフォルトの選択肢とするものには、「checked="cheked"」属性を与えておきます。

<input type="submit">要素…入力送信ボタン。

<input>要素に「type="submit"」属性を与えると、入力送信ボタンを生成します。

この場合、value属性はクエリ値ではなくボタンに表示される文字列となります。

また、送信ボタンを複数設けてもよく、その場合にどのボタンが押されたかを判別する必要がある場合に限りname属性でクエリ名を指定します。

<input type="reset">要素…入力キャンセルボタン。

<input>要素に「type="reset"」属性を与えると、入力キャンセルボタンを生成します。

このボタンはクエリを生成しないので、name属性は無意味で、従って省略してもかまいません。

また、value属性はボタンに書かれる文字列を指定します。

<input type="image">要素…入力送信ボタン。

<input>要素に「type="image"」属性を与えると、画像による入力送信ボタンを生成します。

画像はsrc属性でURLを指定し、alt属性とvalue属性で画像表示できない場合の代替文字列を指定します。

<textarea>要素…長文入力欄。

<textarea>要素は、長文入力欄を生成します。

HTMLとしては、インライン要素となります。

<textarea>要素の書式は、以下の通りです。

rows属性で入力欄の行数を、cols属性で入力欄の一行の幅(半角文字数)を指定します(当然、どちらも必須ですね)。

wrap="soft"属性は、入力欄内での折返しを指定するものです。

公式の規格ではwrap属性は定義されておらず、本来は使用しただけで文法違反になりますが、ネットスケープ 4.x以前ではこれを指定しておかないと、折返されずに延々と横に入力文字列を延ばして行くことになってしまいます。

この他にも<a>要素と同様にキーボードアクセスを助ける属性としてaccesskey属性とtabindex属性も使えます。必須ではありませんが、使い易いウェブの為に積極的に活用しましょう。

尚、この要素の内容は、予め入力しておくべき文字列ですが、不要なら勿論省略できます。

但し、いくら内容を省略できるからといっても、絶対に空要素扱い(<textarea … />)としてはいけません。必ず、終了タグを付けてください。

<select>要素…メニュー。

<option>要素…<select>要素での選択肢。

<optgroup>要素…<option>要素を一纏めにする。

<select>要素は、メニューを生成します。

HTML上はインライン要素となります。

<select>要素の書式は、以下の通りとなります。

<select>要素のsize属性で行数を指定すると、プルダウンメニュー形式ではなく、指定された行数のリストボックスとなります。

<select>要素の「multiple="multiple"」属性は、複数選択をありにする場合に指定します。

<select>要素にも<a>要素と同様、キーボードアクセスを助ける属性としてtabindex属性が使えます。必須ではありませんが、使い易いウェブの為に積極的に活用しましょう。

<select>要素の直下に入れられる<option>要素は、選択肢を表します。value属性を省略すると、内容の文字列がクエリ値に当てられます。

また、<option>要素に「selected="selected"」属性を与えておくと、その項目が予め選択済みとなっている選択肢となります。

<select>要素の直下には、幾つかの<option>要素を一纏めにグループ化した<optgroup>要素も入れられます。

<optgroup>要素には、予め表示するグループ名をlabel属性で指定します。

<optgroup>要素内の<option>要素にも、label属性が使えます。値は、グループ名を表示することで省略できる部分を省いた、略記された選択肢を書きます。

<fieldset>要素…フォームを一纏めにする。

<legend>要素…<fieldset>要素で纏めたフォームへの見出し。

<fieldset>要素は、意味のある一纏りのフォームをグループ化します。

HTMLとしては、ブロックレヴェル要素となり、<form>直下に記述します。

内容は、<legend>要素かブロックレヴェル要素となります。

<fieldset>要素の書式は、以下の通りとなります。

<legend>要素は、必ず<fieldset>要素内容の先頭に記述します。

具体的なフォームの例。

最後に、具体的な例を挙げておきましょう。

ここでは、投稿入力欄を<dl>要素を用いてブロックレヴェル化してみました。

<form action="http://www.uso800.ne.jp/cgi/bbs.cgi" method="post">
    <fieldset>
        <legend>投稿入力</legend>
        <dl>
            <dt>[N] お名前</dt>
            <dd><input type="text" accesskey="N" name="name" size="20" /></dd>
            <dt>[A] メール</dt>
            <dd><input type="text" accesskey="A" name="mail" size="20" /></dd>
            <dt>性別</dt>
            <dd>
                <ul>
                    <li>[M] <input type="radiobox" accesskey="M" name="sex" value="m" /> 男性</li>
                    <li>[F] <input type="radiobox" accesskey="F" name="sex" value="f" /> 女性</li>
                    </ul>
                </dd>
            <dt>お住まいの場所</dt>
            <dd>
                <select name="place">
                    <option value="North">北海道・東北</option>
                    <option value="East">関東・甲信越</option>
                    <option value="Central">東海・北陸</option>
                    <option value="West">関西・中四国</option>
                    <option value="South">九州・琉球</option>
                    <option value="Foreign">日本国外</option>
                    </select>
                </dd>
            <dt>[T] 本文</dt>
            <dd><textarea name="text" accesskey="T" rows="5" col="24" wrap="soft"></textarea></dd>
            </dl>
        <p>[S] <input type="submit" accesskey="S" value="投稿" /></p>
        </fieldset>
    </form>

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com