スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > 初心者向けHTML:テキストボックスなどの入力フォームについて

初心者向けHTML:テキストボックスなどの入力フォームについて

投稿日:2015年3月6日

このチュートリアルではテキストボックスなどの入力フォームについて紹介します。


Step1:はじめに

HTMLのフォームを使うと、サイトを通じてユーザーからデータを受け取ることができます。
データをサーバーに送り、別の処理を実行することができます。

HTMLでフォームを使うときは、formタグで囲ってから入力用の要素を追加します。

formタグはいくつかの属性をもっており、その属性によって入力値の処理方法をブラウザが判断します。
属性には次のようなものがあります。

action
method

action属性は、実行させたいCGIスクリプトの場所をブラウザに伝えるために使用します。

一方、method属性は、2つの値をとることができます。
getとpostです。
action属性で指定したスクリプトへの、データの送り方を指定するものです。



Step2:フォームフィールド

HTML

HTMLのフォームには、次のようなフィールドを含めることができます。
これらはinput要素に関するものです。

Text
Password
Checkbox
Radio
Submit
Reset
File
Hidden
Image
Button

HTMLでは、ドロップダウンリスト、ラジオボタン、チェックボックス、テキストエリアなどの入力方法も用意されています。

これらの要素がHTMLのformタグの中でどのように使われるか、一つ一つ見ていきましょう。






Step3:テキストフィールド

テキストフィールドは、ユーザーに1行のテキストを入力してもらうために使用します。
名前、住所、郵便番号などの、あまり文字数が多くない情報を入力するために使います。

次は、テキストフィールドを使うための基本文です。

<input type="text" name="フィールドの名前">

次のように使います。

学校名: <input type="text" name="schoolname">


Step4:パスワード

テキストフィールドとよく似ていますが、扱うデータがパスワードなどのセンシティブなものであるという点が異なります。
パスワードフィールドに入力された文字は、伏字になります。

次の文は、パスワードフィールドを使うための基本文です。

<input type="password" name="passwd">


Step5:チェックボックス

チェックボックスは、ユーザーに選択肢から項目を選んでもらう場合に使用します。
選べる項目数は、1つでも複数でもゼロでも構わないという場合に使用します。

<input type="checkbox" name="color" value="yes">興味あります!<br>
<input type="checkbox" name="color" value="no">興味ありません

もし、初期状態で選択肢にチェックを入れておきたい場合は、次のようにchecked属性を使います。

<input type="checkbox" name="color" value="yes" checked>興味あります!<br>
<input type="checkbox" name="color" value="no">興味ありません


Step6:ラジオボタン

ラジオボタンは、選択肢の中から1つだけを選択してほしい場合に使用します。

<input type="radio" name="reply" value="yay">いいよ<br>
<input type="radio" name="reply" value="nay">やだよ


Step7:送信ボタン

送信ボタンは、ユーザーがサーバーにデータを送るためのものです。

次のように書きます。

<input type="submit" value="送信">

送信ボタンに画像を使うこともできます。

<input type="image" src="image.gif" name="image">


Step8:リセットボタン

送信ボタンは入力したすべてのデータをサーバーに送るためのものですが、リセットボタンは入力値をすべてクリアし、元の状態に戻すためのものです。

次のように書きます。

<input type="reset" value="Reset">


Step9:ドロップダウンメニュー

ドロップダウンメニューは、ユーザーに選択肢から項目を選んでほしいときに使用します。

チェックボックスのように複数選べるようにすることもできますし、ラジオボタンのように1つしか選べないようにすることもできます。

また、ドロップダウンメニューは、チェックボックスやラジオボタンのようにスペースをとることはありません。
すべての選択肢を表示する必要がないからです。
ラジオボタンやチェックボックスを使った場合、選択肢が5つあれば5行分のスペースが必要ですが、ドロップボックスの場合は必要なスペースは1行分だけです。

なので、すべての選択肢を一度に見せる必要がない場合は、ドロップダウンメニューを使うのがいいでしょう。

ドロップダウンの典型的なコードは次の通りです。

<select name="alphabets">
<option value="a">A</option>
<option value="b">B</option>
<option value="c" selected>C</option>
<option value="d">D</option>
</select>

selectedという属性がありますが、これは初期値として表示される値です。
上の場合であれば、ページを開くとCが選択されている状態になります。

上のコードでは、選べる選択肢は一つだけです。
もし複数の選択肢を選べるようにするには、次のようにselectタグにmultiple属性を追加します。

<select multiple name="alphabets">


Step10:テキストエリア

テキストエリアはテキストフィールドと似ていますが、複数行書ける点が異なります。
inputタグは使わず、次のように書きます。

<textarea>
ここにテキストを書きます
</textarea>

この場合、「ここにテキストを書きます」という文字がテキストボックスに表示されます。
行数、列数を指定し、テキストボックスの大きさを調整したい場合は、次のように書きます。

<textarea rows="15" cols="20">

以上がHTMLのフォームで使えるフィールドです。



引用:Web Design Library  著者:MichaelGabriel  翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング