1. 現在位置:
  2. トップページ
  3. tipsトップ
  4. フォーム
フォーム
<form action="アドレス" method="post" name="data">〜</form>

キャンセル(ウィンドを閉じる)

<input type="button" name= close  value= キャンセル  onClick= window.close() >

キャンセル(ウィンドを閉じる)gifボタンを使う

<A HREF="javascript:window.close()"><IMG SRC="in2.gif" BORDER="0"></A>


閉じる

<FORM><input type="button" name="OK" value="閉じる" onClick="window.close()"></FORM>

画像ボタン

<input type="submit" name="submit" value="完了">
を下記のようにします。

<input type="hidden" name="submit" value="完了">
<input type="image" src="画像ファイルのパス/画像ファイルの名前" align="top">
を下記のようにします。


<input type="text" name="name" size="20">
IE独自の仕様
全角入力禁止
<input type="text" name="mail" size="20" STYLE="ime-mode:disabled">
入力部分をフォーカスする

<input type="text" name="name" size="20"
style="background-color:#ffffff;"
onFocus="this.style.backgroundColor='#ffeecc'"
onBlur="this.style.backgroundColor='#ffffff'">
ジャバスクリプトで入力文字数の制限
7桁 ハイフンなし
HEAD
<SCRIPT TYPE="text/javascript">
<!-- 
var charnumber1=7;
function CharnumberCheck1(){
	if(document.all || document.getElemenByld){
		var str=document.form1.zip.value;
		if(str.length >= charnumber1){
			str=str.substring(0,charnumber1);
			document.form1.zip.value=str;
		}
	}
}
// -->
</SCRIPT>
BODY
<FORM name="form1">
郵便番号:
<input type="text" name="zip" size="10"
onKeydown="CharnumberCheck1()" onKeyup="CharnumberCheck1()"
onMouseout="CharnumberCheck1()" STYLE="ime-mode:disabled">
</FORM>
FORMの名前と質問のnameに注意
FORM name="form1"
input name="zip"
textarea
<textarea rows="10" cols="50" name="message">ここへ入力</textarea>
radio
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
checkbox
<input type="checkbox" name="check[]" value="1">1
<input type="checkbox" name="check[]" value="2">2
<input type="checkbox" name="check[]" value="3">3

全てチェック
<FORM>
<INPUT type=checkbox name="check">赤
<INPUT type=checkbox name="check">青
<INPUT type=checkbox name="check">緑
<BR>
<INPUT type=button value="全てOn" onClick="all_on(this.form.check)">
<INPUT type=button value="全てOff" onClick="all_off(this.form.check)">
</FORM>
<SCRIPT language="JavaScript">
<!--
function all_on(chk){
for (i = 0; i < chk.length; i++) {
chk[i].checked = true;
}
}
function all_off(chk){
for (i = 0; i < chk.length; i++) {
chk[i].checked = false;
}
}
// -->
</SCRIPT>
背景を透明化する
名前:
コメント:

名前:<input type="text" name="name" size="20" style="background:transparent; border:1px solid #aa00ff;">
コメント:
<textarea style="background:transparent; border:1px solid #aa00ff;" rows="4" cols="20" name="message">ここへ入力</textarea>
<input style="background:transparent; border:1px solid #aa00ff;" type="submit" name="submit" value="送信">
select
<select name="age">
<OPTION VALUE="" selected>下記より選択</option>
<option value="20〜25歳">20〜25歳</option>
<option value="26〜30歳">26〜30歳</option>
<option value="31〜35歳">31〜35歳</option>
<option value="36〜40歳">36〜40歳</option>
<option value="41〜45歳">41〜45歳</option>
<option value="46〜50歳">46〜50歳</option>
<option value="51〜55歳">51〜55歳</option>
<option value="56〜60歳">56〜60歳</option>
<option value="61〜65歳">61〜65歳</option>
<option value="66〜70歳">66〜70歳</option>
<option value="71〜75歳">71〜75歳</option>
<option value="76〜80歳">76〜80歳</option>
<option value="81歳以上">81歳以上</option>
</select>
都道府県
<SELECT NAME="area">
<OPTION VALUE="" selected>下記より選択</OPTION>
<OPTION VALUE="北海道">北海道</OPTION>
<OPTION VALUE="青森県">青森県</OPTION>
<OPTION VALUE="岩手県">岩手県</OPTION>
<OPTION VALUE="宮城県">宮城県</OPTION>
<OPTION VALUE="秋田県">秋田県</OPTION>
<OPTION VALUE="山形県">山形県</OPTION>
<OPTION VALUE="福島県">福島県</OPTION>
<OPTION VALUE="茨城県">茨城県</OPTION>
<OPTION VALUE="栃木県">栃木県</OPTION>
<OPTION VALUE="群馬県">群馬県</OPTION>
<OPTION VALUE="埼玉県">埼玉県</OPTION>
<OPTION VALUE="千葉県">千葉県</OPTION>
<OPTION VALUE="東京都">東京都</OPTION>
<OPTION VALUE="神奈川県">神奈川県</OPTION>
<OPTION VALUE="新潟県">新潟県</OPTION>
<OPTION VALUE="富山県">富山県</OPTION>
<OPTION VALUE="石川県">石川県</OPTION>
<OPTION VALUE="福井県">福井県</OPTION>
<OPTION VALUE="山梨県">山梨県</OPTION>
<OPTION VALUE="長野県">長野県</OPTION>
<OPTION VALUE="岐阜県">岐阜県</OPTION>
<OPTION VALUE="静岡県">静岡県</OPTION>
<OPTION VALUE="愛知県">愛知県</OPTION>
<OPTION VALUE="三重県">三重県</OPTION>
<OPTION VALUE="滋賀県">滋賀県</OPTION>
<OPTION VALUE="京都府">京都府</OPTION>
<OPTION VALUE="大阪府">大阪府</OPTION>
<OPTION VALUE="兵庫県">兵庫県</OPTION>
<OPTION VALUE="奈良県">奈良県</OPTION>
<OPTION VALUE="和歌山県">和歌山県</OPTION>
<OPTION VALUE="鳥取県">鳥取県</OPTION>
<OPTION VALUE="島根県">島根県</OPTION>
<OPTION VALUE="岡山県">岡山県</OPTION>
<OPTION VALUE="広島県">広島県</OPTION>
<OPTION VALUE="山口県">山口県</OPTION>
<OPTION VALUE="徳島県">徳島県</OPTION>
<OPTION VALUE="香川県">香川県</OPTION>
<OPTION VALUE="愛媛県">愛媛県</OPTION>
<OPTION VALUE="高知県">高知県</OPTION>
<OPTION VALUE="福岡県">福岡県</OPTION>
<OPTION VALUE="佐賀県">佐賀県</OPTION>
<OPTION VALUE="長崎県">長崎県</OPTION>
<OPTION VALUE="熊本県">熊本県</OPTION>
<OPTION VALUE="大分県">大分県</OPTION>
<OPTION VALUE="宮崎県">宮崎県</OPTION>
<OPTION VALUE="鹿児島県">鹿児島県</OPTION>
<OPTION VALUE="沖縄県">沖縄県</OPTION>
<OPTION VALUE="その他">その他</OPTION>
</SELECT>
星座
<SELECT NAME="astrology">
<OPTION VALUE="" selected>下記より選択</OPTION>
<OPTION VALUE="aries">牡羊座</OPTION>
<OPTION VALUE="taurus">牡牛座</OPTION>
<OPTION VALUE="gemini">双子座</OPTION>
<OPTION VALUE="cancer">蟹座</OPTION>
<OPTION VALUE="leo">獅子座</OPTION>
<OPTION VALUE="virgo">乙女座</OPTION>
<OPTION VALUE="libra">天秤座</OPTION>
<OPTION VALUE="scorpio">蠍座</OPTION>
<OPTION VALUE="sagitarius">射手座</OPTION>
<OPTION VALUE="capricoun">山羊座</OPTION>
<OPTION VALUE="aquarius">水瓶座</OPTION>
<OPTION VALUE="pisces">魚座</OPTION>
</SELECT>
生年月日
<SELECT name="month">
<OPTION VALUE="" selected>下記より選択</OPTION>
<OPTION VALUE="01">1</OPTION>
<OPTION VALUE="02">2</OPTION>
<OPTION VALUE="03">3</OPTION>
<OPTION VALUE="04">4</OPTION>
<OPTION VALUE="05">5</OPTION>
<OPTION VALUE="06">6</OPTION>
<OPTION VALUE="07">7</OPTION>
<OPTION VALUE="08">8</OPTION>
<OPTION VALUE="09">9</OPTION>
<OPTION VALUE="10">10</OPTION>
<OPTION VALUE="11">11</OPTION>
<OPTION VALUE="12">12</OPTION>
</select>

<select name="day">
<OPTION VALUE="" selected>下記より選択</OPTION>
<OPTION VALUE="01">1</OPTION>
<OPTION VALUE="02">2</OPTION>
<OPTION VALUE="03">3</OPTION>
<OPTION VALUE="04">4</OPTION>
<OPTION VALUE="05">5</OPTION>
<OPTION VALUE="06">6</OPTION>
<OPTION VALUE="07">7</OPTION>
<OPTION VALUE="08">8</OPTION>
<OPTION VALUE="09">9</OPTION>
<OPTION VALUE="10">10</OPTION>
<OPTION VALUE="11">11</OPTION>
<OPTION VALUE="12">12</OPTION>
<OPTION VALUE="13">13</OPTION>
<OPTION VALUE="14">14</OPTION>
<OPTION VALUE="15">15</OPTION>
<OPTION VALUE="16">16</OPTION>
<OPTION VALUE="17">17</OPTION>
<OPTION VALUE="18">18</OPTION>
<OPTION VALUE="19">19</OPTION>
<OPTION VALUE="20">20</OPTION>
<OPTION VALUE="21">21</OPTION>
<OPTION VALUE="22">22</OPTION>
<OPTION VALUE="23">23</OPTION>
<OPTION VALUE="24">24</OPTION>
<OPTION VALUE="25">25</OPTION>
<OPTION VALUE="26">26</OPTION>
<OPTION VALUE="27">27</OPTION>
<OPTION VALUE="28">28</OPTION>
<OPTION VALUE="29">29</OPTION>
<OPTION VALUE="30">30</OPTION>
<OPTION VALUE="31">31</OPTION>
</select>

ラベルを付ける サンプルフォーム

<FORM ACTION="contact.php" method="post">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="560">
<TR>
  <TD>
  ※ご記入後送信ボタンを押して下さい。
  <TABLE BORDER=0 CELLPADDING="3" CELLSPACING="3" WIDTH="530">
  <TR><!-- 項目ごとにラベルを付ける -->
    <TD BGCOLOR="#8cc1ef" ALIGN="right">
      <FONT COLOR="#ffffff">
      <label for="field1">氏名:</label>
      </FONT>
    </TD>
    <TD BGCOLOR="#d4e6f9">
      <INPUT TYPE="TEXT" id="field1" SIZE="50" NAME="person">
    </TD>
  </TR>
  <TR>
    <TD BGCOLOR="#8cc1ef" ALIGN="right" WIDTH="150">
      <FONT COLOR="#ffffff">
      <label for="field2">パスワード</label>
      </FONT>
    </TD>
    <TD BGCOLOR="#d4e6f9" WIDTH="380">
      <INPUT TYPE="password" id="field2" name="pas" />
    </TD>
  </TR>
  <fieldset><!-- fieldsetでグループ化する -->
  <TR>
    <TD BGCOLOR="#8cc1ef" ALIGN="right" WIDTH="150">
      <FONT COLOR="#ffffff">
      性別
      </FONT>
    </TD>
    <TD BGCOLOR="#d4e6f9" WIDTH="380">
      <label for="field3"><input type="radio" name="sex" id="field3" /> 男</label><br>
      <label for="field4"><input type="radio" name="sex" id="field4" /> 女</label>
    </TD>
  </TR>
  </fieldset>
  <fieldset>
  <TR>
    <TD BGCOLOR="#8cc1ef" ALIGN="right">
      <FONT COLOR="#ffffff">
      好きな色
      </FONT>
    </TD>
    <TD BGCOLOR="#d4e6f9">
<script language="javascript">
function classCheck(f,cn,flag){
for (var i=0;i<f.elements.length;i++){
if(f.elements[i].className==cn){f.elements[i].checked=flag}
}
}
</script>
      <label for="fielda"><input type="checkbox" name="check[]" value="1" id="fielda" class="iroari" onClick="classCheck(this.form,'ironasi',false)">ブラック<br />
      <label for="fieldb"><input type="checkbox" name="check[]" value="2" id="fieldb" class="iroari" onClick="classCheck(this.form,'ironasi',false)">レッド<br />
      <label for="fieldc"><input type="checkbox" name="check[]" value="3" id="fieldc" class="iroari" onClick="classCheck(this.form,'ironasi',false)">イエロー<br />
      <label for="fieldd"><input type="checkbox" name="check[]" value="4" id="fieldd" class="ironasi" onClick="classCheck(this.form,'iroari',false)">この中にはない<br />
    </TD>
  </TR>
  </fieldset>
  <fieldset>
  <TR>
    <TD BGCOLOR="#8cc1ef" ALIGN="right" WIDTH="150">
      <FONT COLOR="#ffffff">
      <label for="field6">都道府県</label>
      </FONT>
    </TD>
    <TD BGCOLOR="#d4e6f9" WIDTH="380">
      <select name="location" id="field6"><!-- optgroup要素でグループ化 -->
      <option value="">都道府県を選択して下さい</option>
      <optgroup label="北海道・東北地方">
      <option value="01">北海道</option>
      <option value="02">青森県</option>
      <option value="03">岩手県</option>
      <option value="04">宮城県</option>
      <option value="05">秋田県</option>
      <option value="06">山形県</option>
      <option value="07">福島県</option>
      </optgroup>
      <optgroup label="関東地方">
      <option value="08">茨城県</option>
      <option value="09">栃木県</option>
      <option value="10">群馬県</option>
      <option value="11">埼玉県</option>
      <option value="12">千葉県</option>
      <option value="13">東京都</option>
      <option value="14">神奈川県</option>
      </optgroup>
      <optgroup label="北陸・甲信越地方">
      <option value="15">新潟県</option>
      <option value="16">富山県</option>
      <option value="17">石川県</option>
      <option value="18">福井県</option>
      <option value="19">山梨県</option>
      <option value="20">長野県</option>
      </optgroup>
      <optgroup label="東海地方">
      <option value="21">岐阜県</option>
      <option value="22">静岡県</option>
      <option value="23">愛知県</option>
      <option value="24">三重県</option>
      </optgroup>
      <optgroup label="近畿地方">
      <option value="25">滋賀県</option>
      <option value="26">京都府</option>
      <option value="27">大阪府</option>
      <option value="28">兵庫県</option>
      <option value="29">奈良県</option>
      <option value="30">和歌山県</option>
      </optgroup>
      <optgroup label="中国地方">
      <option value="31">鳥取県</option>
      <option value="32">島根県</option>
      <option value="33">岡山県</option>
      <option value="34">広島県</option>
      <option value="35">山口県</option>
      </optgroup>
      <optgroup label="四国地方">
      <option value="36">徳島県</option>
      <option value="37">香川県</option>
      <option value="38">愛媛県</option>
      <option value="39">高知県</option>
      </optgroup>
      <optgroup label="九州・沖縄地方">
      <option value="40">福岡県</option>
      <option value="41">佐賀県</option>
      <option value="42">長崎県</option>
      <option value="43">熊本県</option>
      <option value="44">大分県</option>
      <option value="45">宮崎県</option>
      <option value="46">鹿児島県</option>
      <option value="47">沖縄県</option>
      </optgroup>
      </select>
    </td>
  </TR>
  </fieldset>
  <TR>
    <TD BGCOLOR="#8cc1ef" ALIGN="right">
      <FONT COLOR="#ffffff"><label for="field7">電話番号:</label></FONT>
    </TD>
    <TD BGCOLOR="#d4e6f9">
      <INPUT TYPE="TEXT" id="field7" SIZE="50" NAME="tel" STYLE="ime-mode:disabled">
    </TD>
  </TR>
  <TR>
    <TD BGCOLOR="#8cc1ef" ALIGN="right">
      <FONT COLOR="#ffffff"><label for="field8">E-mail:</label></FONT>
    </TD>
    <TD BGCOLOR="#d4e6f9">
      <INPUT TYPE="TEXT" id="field8" SIZE="50" NAME="mail_address" STYLE="ime-mode:disabled">
    </TD>
  </TR>
  <TR>
    <TD BGCOLOR="#8cc1ef" ALIGN="right">
      <FONT COLOR="#ffffff"><label for="field9"> 問い合わせ:</label></FONT>
    </TD>
    <TD BGCOLOR="#d4e6f9">
      <TEXTAREA NAME="comment" COLS=50 ROWS=10 id="field9"></TEXTAREA>
    </TD>
  </TR>
  <TR><TD COLSPAN="2">入力いただきありがとうございました。</TD></TR>
  <TR><TD COLSPAN="2" ALIGN="center"><BR><INPUT TYPE="submit" name="kakunin" VALUE=" 送信 ">    <INPUT TYPE="RESET" VALUE=" キャンセル "></TD></TR>
  </TABLE>
  </TD>
</TR>
</TABLE>
</FORM>
※ご記入後送信ボタンを押して下さい。
性別
好きな色
入力いただきありがとうございました。