フォームの種類（input,select,textarea）

<form action="" method="post">
<label for="nid">入力：</label><input type="text" name="name" id="nid" />
<input type="submit" value="送信" /><input type="reset" value="リセット">
</form>
  • action・・・データ送り先（○○.php）。空文字は自ページへ送信。<?php echo $_SERVER["PHP_SELF"] ?>を入れても自ページへ送信。
  • method・・・post、get、request。getやrequestのデータは、aaa.php?name=""の形で送られる。
  • label・・・for=""の中はidを入れる
  • submit・・・form内のデータをaction先URLへ送るボタン。幅高さはスタイルシート（widthとheightで変える。
  • reset・・・テキストボックス内をクリーンにする。
  • name・・・フォームの内容を取り出すときのキーとなる。（["name"=>"入力したテキスト"]）
  • id・・・getElementByIdで対象の要素を指定するときや、スタイルを適用するとき等に使用する。nameとidは同じでもよい。

input type="text"

<input type="text" name="x1" id="x1" />

  • size・・・横幅
  • maxlength・・・最大文字数
  • value・・・初期表示テキスト
<input type="text" name="x1" id="x1" value="テキスト" size="50" maxlength="4" />

  • autocomplete・・・自動補完（on/off）
<input type="text" name="x1" id="x1" autocomplete="on" list="gender" />
<datalist id="gender">
<option value="男">
<option value="女">
</datalist>

  • placeholder・・・初期表示テキスト（薄字）
<input type="text" name="x1" id="x1" placeholder="テキスト" />

  • readonly・・・初期表示テキスト（編集不可）
<input type="text" name="x1" id="x1" value="テキスト" readonly />

  • required・・・入力必須
<form action="" method="post">
<input type="text" name="x1" id="x1" required />
<input type="submit" value="送信" />
</form>

input type="submit"

<input type="submit" value="検索" name="x1" id="x1" />

submitボタンをクリックするとフォームデータをget or postで対象ファイルへ送る。送られた情報はnameをキーとして、$_POST['name']のような形で取り出すことができる。

submitボタンはbutton同様、CSSでスタイルを変更できる。 

/*ボタンの背景を黒にする*/
#x1 {
	color:#fff;
	background:#555;
	}


/*ボタンの背景を画像にする*/
#x1 {
	width:50px;height:50px;
	background:url(./png/9.png) no-repeat;
	}

cssのbackground-imageで背景画像を変更する場合は、valueを空欄にしておかないと画像の上に文字が表示されてしまう。

input type="image"

<input type="image" src="image/3.png" alt="検索" name="x1" id="x1" />

submitの画像版で、フォームデータを送信するボタン。背景画像をsubmitボタンに指定するとボタンが自動的に凹凸ある形になるが、これを使うとそうならない。

src属性で画像のディレクトリを指定するのと、画像なのでalt属性を指定、代わりにvalue属性は不要。

アイコンはPhotoshopとかで○と｜を組み合わせて簡単に作れる。 

/*ボタン自体を画像にする*/
#x1 {
	width:50px;height:50px;
	background:url(./png/9.png) no-repeat;
	}

検索フォームのカスタマイズ

検索フォームを何もスタイルを適用せずに配置すると以下。

これにスタイルを適用すると以下。テキストに装飾、focus擬似要素とtransitionで動きを、ボタンの微妙な位置はformを基点として絶対配置する。

もちろんborder-radiusで角を丸めたりすることも可能だ。 

#m4 {
	position: relative;	
}
#m5	{
	width: 182px;
	height: 16px;
	background: #999;
	border: none;
	padding: 4px;
	transition:backgroud .3s,box-shadow .3s;
	-webkit-transition:backgroud .3s,box-shadow .3s;
}
#m5:focus {
	background:#ffff91;
	box-shadow:0px 0px 2px #aaa;
	-webkit-box-shadow:0px 0px 2px #aaa;
	}
#m6	{
	position: absolute;
	top: 0px;
	_top: 1px; /*アンダースコアハックIE6*/
	left: 190px;
}
*:first-child + html #m6	{
	top: 1px; /*スタープラスハックIE7*/
}

そして、テキスト入力BOXの背景変更は、form要素にbackgroundを指定し、テキストボックスのボーダーを消すことで行う。

背景はphotoshopで適当に作成した。

文字の大きさはfont-sizeで、ボタン等の位置はpositionで指定する。 

#m7 {
	width: 400px;height: 60px;
	background: url(./png/11.png) left top no-repeat; 
	position: relative;
}
#m8	{
	width: 230px;height:40px;
	position: absolute;
	top: 5px;
	left: 10px;
	border: 1px solid #fff;
	font-size:22px;
}
#m9	{
	position: absolute;
	top: 5px;
	left: 250px;
}

文字の大きさはfont-sizeで、ボタン等の位置はpositionで指定する。

Wordpressの検索フォーム

Wordpressの検索フォームはid=sになっており、簡単に設置することができる。 

<form role="search" method="get" id="searchform" class="searchform" action="https://nkdesk.com/">
<div>
<label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

nameは変えられないが、idは自由に変えることができて、スタイルも自由に設定できる。

Googleの検索フォーム

Googleの検索フォームは、Googleカスタム検索から設定できる。

ソースコードを適当な場所へ埋め込めば簡単に検索フォームを利用することができる。

検索ボックスの幅はカラムの表示幅に応じて可変であり、包括要素に対してwidthを指定して調整することができる。

input type="radio"

<input type="radio" name="gender" id="man" value="男" checked /><label for="man">男性</label>
<input type="radio" name="gender" id="woman" value="女" /><label for="woman">女性</label>

どちらか片方を選ばせるなら、nameは同じにしなければならない。複数選ぶならnameを個別に設定する。checkedを入れてあると予めチェックが入った状態で表示される。

input type="checkbox"

<input type="checkbox" name="fruit" id="ringo" value="りんご" checked /><label for="ringo">りんご</label>
<input type="checkbox" name="fruit" id="mikan" value="みかん" checked /><label for="mikan">みかん</label>
<input type="checkbox" name="fruit" id="suika" value="すいか" checked /><label for="suika">すいか</label>

ラジオボタンがどちらか片方を選ばせるのに対して、複数選ばせることを目的としたボタン。ゆえに、nameを個別に設定する。

input type="hidden"

<input type="hidden" name="pass" id="pass" value="秘密のパスワード" />

ブラウザに表示させずに水面下で値の受け渡しをするのに使用する。

input type="button"

<input type="button" name="button" id="button" value="ボタン" />

通常は、javascriptのイベント発火とかでonclickやそのままidを指定したりして使うことが多い。大きさはスタイルシートにて。

input type="file"

<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="upfile">
<input type="submit" value="アップロードする">
</form>
<?php
$save_dir="./file/img/";
$file_name=$save_dir.$_FILES["upfile"]["name"];
if (is_uploaded_file($_FILES["upfile"]["tmp_name"])) {
    copy($_FILES["upfile"]["tmp_name"],$file_name);
    echo("upおｋ!!　ファイル名：".$_FILES["upfile"]["name"]);
}
?>

送信されたファイルは$_FILES変数にnameをキーとして格納される。$_FILE["upfile"]

アップロードしたファイルの名前は$_FILES["upfile"]["name"] にて、一時的にサーバーに保存されたファイル名（サーバーが自動的につけた名前）は$_FILES["upfile"]["tmp_name"] で取得可能。

is_uploaded_file はファイルがアップロードされたかどうか調べる関数です。

copy(コピー元,コピー先)でテンポラリフォルダのファイルをコピーできる。また、move_uploaded_file($_FILES["upfile"]["tmp_name"],$file_name)でファイルを移動してもよい。

アップロード先のフォルダは自動では生成しないので予め作っておく必要がある。

選択リスト（select)

各項目はoptionで1つ1つ指定する。

valueの値がsubmitされた時にnameをキーとして送られる。valueを省略した場合はoptionの中身が単純に送られるだけ。

sizeは何行初期表示するかで、1だから1行表示。

selectedを記載したoption項が初期に選択された状態となる。 

<select name="menu" id="menu" size="1">
<option value="1" selected>北海道</option>
<option value="2">青森</option>
<option value="3" selected>秋田</option>
</select>

が、actionでvalueのデータを飛ばした場合には、getElementById("formのID").valueで取り出すことが可能なので、selectedはあってもなくても問題ない。selectedが指定されていないと、ユーザーが最初にアクセスした時に何も選択された状態ではなく、そのまま送信ボタンを押しても何のデータも送信されない。

selectedIndex は、HTML の select>要素に関連するプロパティの1つで、現在選択されている option>要素のインデックスを取得または設定する際に使用されます。このインデックスは0から始まります。 

//現在選択されているoptionのインデックスを取得する。
var selectElement = document.getElementById('menu');
var selectedIndex = selectElement.selectedIndex;
alert('現在選択されているオプションのインデックスは: ' + selectedIndex);

//select要素で特定のoptionを選択する。
var selectElement = document.getElementById('menu');
selectElement.selectedIndex = 2;

//現在選択されているoptionのテキストや値を取得する。
var selectElement = document.getElementById('menu');
var selectedOption = selectElement.options[selectElement.selectedIndex];
alert('選択されているオプションのテキストは: ' + selectedOption.text);
alert('選択されているオプションの値は: ' + selectedOption.value);

複数選択を選択することができるようにするためは、select要素にmultiple属性を追加する。ユーザーはCtrlキー（Windows/Linux）またはCmdキー（Mac）を押しながら複数のオプションを選択することができるようになります。

multiple属性を使用すると、通常、ドロップダウンリストの高さが変わり、複数のオプションが一度に表示されるようになります。表示されるオプションの数を制御するために、size属性を使用して表示したいオプションの数を指定することもできます。例えば、size="4"を設定すると、4つのオプションが一度に表示されます。 

<select name="menu" size="3" multiple>
<option value="1">北海道</option>
<option value="2">青森</option>
<option value="3" selected>秋田</option>
</select>

また、フォームが送信されると、選択されたすべてのオプションのvalueが、同じname（この場合はmenu）でサーバーに送信されます。サーバーサイドのプログラムは、通常、2番目の値のみを受け取り、1番目の値は上書きされてしまいます。

仮に、name属性をmenu[]とした場合は、配列として（menu[0]、menu[1]...）取り出すことができる。 

<select name="menu[]" size="3" multiple>
<option value="1">北海道</option>
<option value="2">青森</option>
<option value="3" selected>秋田</option>
</select>

optionの中身に法則性がある場合は、for文とかで指定するのが簡便な方法だ。 

<select name="menu" size="1">
<?php 
for($i=1;$i<=31;$i++){
echo("<option>".$i."</option>");
}
?>
</select>

テキストエリア（textarea）

テキストエリアは複数行の入力ができるフォームで、rowsで行数、colsで列数、maxlengthで最大文字数を指定できる。

初期値をセットしたい場合のみ、テキストとテキストの間に初期文を記述する。セットしたくないなら空にしておく。 

<textarea name="text" rows="5" cols="20">初期値</textarea>

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ