タグの勉強中/フォームページを作る

タグ講座

ＨＰを作るに当たってまず最初

HTMLの基本構造

レイアウトしよう

文字を書こう

リンクをはろう

画像を表示する

リストを表示する

テーブル（表組み）を作る

フレームページを作る

フォームの作成

BGMを鳴らそう

特殊な段落、文字

アクセントをつけよう

小技

フォームとはアンケートのようにいくつかの入力欄を設けて
そこに記入された情報を受け取る為のシステムです

フォームの送信先や送信形式の設定

<form action="★" method="☆ ">～</form>
★=フォームデータの送信先（mailto:メールアドレス)または(ＣＧＩのＵＲＬ）
☆=送信形式の設定(post,get)postを使うのが一般的です
送信されるデータはエンコード（変換）されている為そのままでは読めません

CGIを使わずにデータを受け取る場合は
<form action="★" method="☆" enctype="text/plain">～</form>
のようにenctype="text/plain"というオプションを付け加えると
データは変換されずに送信されます
★=mailto:メールアドレス

一行テキスト入力欄を作る

<input type="text" name="★ " value="☆" size="■" maxlength="□">
★=入力フィールド名（質問の項目）
☆=入力欄に初めから表示されている文字
■=入力欄のサイズ(半角の文字数)
□=最大入力文字数(半角文字数)50と指定すると全角だと２５文字になります

mail送信の場合のタグの例

使用構図
<html>
<head>
<title>タグの勉強中</title>
</head>
<body bgcolor="#008b8b">
<form action="mailto:あなたのメールアドレス" method="post" enctype="text/plain">
<p>お名前：
<input type="text" name="name" value="お名前をどうぞ" size="30"><br>
メールアドレス：
<input type="text" name="mail" value="メールアドレス" size="30"><br>
URL:
<input type="text" name="urll" value="ホームページ" size="40"><br>
</p>
</form>
</body>
</html>

▲上へ戻る

複数行テキスト入力欄を作る

<textarea rows="★" cols="☆" wrap="■">□</textarea>
★=行数
☆=横幅（半角文字表示数）
□=入力欄の初期値
■=改行コード
off(改行コードなし)
soft(実際に改行されている部分だけ送信)
hard(実際に改行されている部分と自動改行された部分の両方を送信)
スタイルシートの使用でスクロールバーを非表示にする事も可能です(上記サンプル右側)

▲上へ戻る

入力欄を読み取り専用にする

<textarea rows="★" cols="★" readonly>
readonlyを指定すれば、テキスト入力欄が読み取り専用となります

オートコンプリートを無効にする

<input type="text" autocomplete="off">

のみ
デフォルト（初期状態）ではon(有効)です

▲上へ戻る

ドロップダウンメニューを作る

<select name="★">
<option value="☆">■</option>
</select>
★=識別名
☆=送信される内容
■=ページに表示される文字

赤い表示部分のサンプル

<select name="adres" multiple>とすると複数項目の選択が可能となります
[Ctrl]キーを押しながら複数選択が可能です

使用構図
<html>
<head>
<title>タグの勉強中</title>
<body>
<form action="mailto:あなたのメールアドレス" method="post">
<p>お名前：
<input type="text" name="name" value="お名前をどうぞ" size="30"><br>
メールアドレス：
<input type="text" name="mail" value="メールアドレス" size="30"><br>
URL:
<input type="text" name="urll" value="ホームページ" size="40"><br>
</p>
<select name="adres">
<option value="関東" selected>関東</option>
<option value="北海道">北海道</option>
<option value="東北">東北</option>
<option value="東海">東海</option>
<option value="関西">関西</option>
<option value="中国、四国">中国、四国</option>
<option value="九州、沖縄">九州、沖縄</option>
</select> </form>
</body>
</html>

▲上へ戻る

メニュー中に小見出しを付ける

サンプル

▲上へ戻る

チェックボックス欄の作成

<input type="checkbox" name="★" value="☆">
★=識別名
☆=送信される内容

サンプル
♂ ♀

使用構図
<html>
<head>
<title>タグの勉強中</title>
</head>
<body>
<form>
<input type="checkbox" name="sex" value="おとこ" checked>♂
<input type="checkbox" name="sex" value="おんな">♀
</form>
</body>
</html>

▲上へ戻る

ラジオボタンの作成

<input type="radio" name="★" value="☆">
複数の選択項目の中からひとつを選んでもらう場合使用します
★=識別名
☆=送信される内容

サンプル
男性女性

使用構図
<html>
<head>
<title>タグの勉強中</title>
</head>
<body>
<form>
<input type="radio" name="性別" value="おとこ" checked>男性
<input type="radio" name="性別" value="おんな">女性
</form>
</body>
</html>

▲上へ戻る

ファイル参照ボタンの作成

<input type="file" name="★" >
★=識別名

▲上へ戻る

パスワード入力欄を作る

<input type="password" name="★" value="☆" size="●" maxlength="■">
★=識別名
☆=入力欄の初期状態での表示文字
●=入力欄の横幅
■=最大入力文字数（半角文字数）

▲上へ戻る

送信ボタンの作成

<input type="submit" value="送信する">
<input type="img" src="☆">☆=画像ＵＲＬ
とすれば、画像のボタンが指定できます

▲上へ戻る

リセットボタンの作成

<input type="reset" value="リセットする">
入力した内容や選択した項目を全てリセットします
上のソースのサンプル

▲上へ戻る

ボタンに画像をつかう

<input type="image" src="★">
★=画像ファイル名

▲上へ戻る

フォームボタン群にタイトルを表示する

<fieldset><legend>★</legend></fieldset>
★=タイトル
グループ化したい部分を<fieldset>～</fieldset>ではさんで下さい

ブラウザ表示

使用構図
<html>
<head>
<title>タグの勉強中</title>
</head>
<body>
<form>
<fieldset>
<legend>性別記入欄</legend>
<input type="radio" name="性別" value="おとこ" checked>男性
<input type="radio" name="性別" value="おんな">女性
</fieldset>
</form>
</body>
</html>

▲上へ戻る