超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ 入力欄を作る

◆フォームをブラウザに表示させる

フォームをブラウザに表示させるには <form> タグを使います。
<form></form> の間に、テキスト入力欄や選択ボタン、送信ボタンなどを作成します。


テキスト入力欄の作成には <input> タグ、<textarea> タグを使います。 <input> タグは入力テキストが1行だけの場合、<textarea> タグは入力テキストが複数行になる場合に使います。

タグ名プロパティ説明
<input>typetextテキスト入力
passwordパスワード入力
hidden隠しフィールド
nameデータ名データに名前をつける
size文字数入力欄の幅
value初期表示入力欄にデフォルト表示する内容
maxlength文字数入力可能な最大文字数
<textarea>
 〜</textarea>
nameデータ名データに名前をつける
cols文字数入力欄の幅
rows行数入力欄の高さ
wrapsoft画面上は改行、送信データは非改行
hard画面上も送信データも改行
off画面上も送信データも非改行

◆1行テキスト入力欄を作成する

1行テキスト入力欄を作成するには <input> タグを使います。

おなまえ
U R L
パスワード

なんとなく見たことがあるような感じですね。
ソースはこうなってます。

<form>
おなまえ
<input type="text" name="name" size="30"><br>
U R L
<input type="text" name="email" size="40"
value="http://"><br>
パスワード
<input type="password" name="pass" size="10">
</form>

name 属性を使って入力データに名前をつけます。データが転送されるときは、入力されたテキストだけが転送され、ブラウザに表示されるテキスト(おなまえ、URL、パスワード)は転送されないので、name 属性でつけた名前によって転送されてきたデータを識別して処理を行うことになります。
URL 入力欄では、value 属性を使って、あらかじめ入力欄に "http://" と表示していますね。
パスワード入力欄では、type 属性を "text" ではなく、"password" としています。この欄に入力しても、テキストは表示されずに "*" が表示されます。実際に上の見本に入力してみて下さい。


◆隠しフィールド

<input type="hidden"> で隠しフィールドを作ることができます。
隠しフィールドは、ブラウザでは表示されません。データを送信する人に関係のないテキストデータを、入力されたテキストと一緒に送信するために設定します。
value 属性で送信されるテキストを設定しておきます。


◆複数行のテキスト入力欄を作成する

複数行のテキスト入力欄を作るには <textarea> タグを使います。

メッセージ

ソースはこのようになります。

<form>
メッセージ<br>
<textarea name="message" cols="40" rows="8" wrap="soft">
</textarea>
</form>

<textarea> タグと </textarea> タグの間にテキストを入れると、デフォルト表示になります。

<form>
メッセージ<br>
 <textarea name="message" cols="40" rows="8" wrap="soft">
メッセージよろぴく〜☆
 </textarea>
</form>

メッセージ