10/25 formとtable

CSS

formのHTML表記

＜form＞〜＜/form＞がひとつのフォームとなる。

送信形式、送信先等の指定

<form method="post" action="maito:xxx@xxx.net"  enctype="text/plain" id="myform"/>

method="post"

  • データの送信形式を指定する。
  • 一般的には、CGI等のプログラムへ送信することになる。
  • POST(フォームのデータを本文として送信。一度に大量のデータを送信できる）を指定する。

action="maito:xxx@xxx.net"

  • データーの送信先を指定する。
  • 通常はCGIのURIを指定。
  • mailto：を使えば、CGIなしにEメールでFORMの入力結果を受け取ることができる。
  • yahoo等のフリーメールの場合は迷惑メール扱いになりやすい。

enctype="text/plain"

  • 自分のメールアドレスに送信された場合に、文字化けしない様に表記する。

id="myform"

  • idで名前をつける。

ラベル名、一行テキストボックス指定

<label for="user"> 名前</label>
<input type="text" id="user"  name="username" />

label for=

  • 入力要素のラベル名（名前、メールアドレス等）のID属性

input type="text"

  • 一行テキストボックスが作成される。

id=

  • label forと同じにする。

name=

  • 入力欄に名前を付ける属性

複数行入力可能な入力フォーム指定

<label for="com">コメント</label>
<textarea id="com" name="comment"  cols="40" rows="8"></textarea>

textarea id=

  • 複数行入力可能な入力フォームを表示する。

cols=

  • テキストエリアの横幅　
  • 偶数で指定する。

rows=

  • テキストエリアの縦幅（行数）

送信ボタン指定

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

input type="submit"

  • 送信ボタン作成

value="送信"

  • ボタンに表示される文字列（送信）を指定

formのCSS表記

フォームの頭を揃えるために、display: block;　width:指定が必要。

#myform label {
           font-size: 0.875em;
	   display: block;
	   width: 100px;
	   float: left;
	   text-align: right;
	   margin-right: 10px;
}



<?xml  version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type"  content="text/css" />
<title>form-sinple(1)</title>
<style type="text/css">
<!--
#myform label {
       font-size: 0.875em;
	   display: block;
	   width: 100px;
	   float: left;
	   text-align: right;
	   margin-right: 10px;
}

#myform #submit {
	  margin-left: 110px; 
}
-->
</style>
</head>

<body> 
<form method="post" action="maito:xxx@xxx.net"  enctype="text/plain" id="myform"/>
<p>
<label for="user">名前</label>
<input type="text" id="user"  name="username" />
</p>
<p>
<label for="mail">メールアドレス</label>
<input type="text" id="mail"  name="mailadress" />
</p>
<p>
<label for="com">コメント</label>
<textarea id="com" name="comment"  cols="40" rows="8"></textarea>
</p>
<p>
<input type="submit" value="送信" id="submit" />
</p>
</form>
</body>
</html>